Este tutorial ha sido aprobado por expertos así se garantiza la veracidad de nuestra esta sección.
Solución:
El método puede variar dependiendo de sus necesidades. Aquí hay 3 formas de calcular la luminancia:
-
Luminancia (estándar para ciertos espacios de color):
(0.2126*R + 0.7152*G + 0.0722*B)fuente
-
Luminancia (opción percibida 1):
(0.299*R + 0.587*G + 0.114*B)fuente
-
Luminancia (opción percibida 2, más lenta de calcular):
sqrt( 0.241*R^2 + 0.691*G^2 + 0.068*B^2 )sqrt( 0.299*R^2 + 0.587*G^2 + 0.114*B^2 )(gracias a @MatthewHerbst) fuente
[Edit: added examples using named css colors sorted with each method.]
Creo que lo que está buscando es la fórmula de conversión RGB -> Luma.
Fotométrico/digital ITU BT.709:
Y = 0.2126 R + 0.7152 G + 0.0722 B
Digital ITU BT.601 (da más peso a los componentes R y B):
Y = 0.299 R + 0.587 G + 0.114 B
Si está dispuesto a cambiar la precisión por el rendimiento, hay dos fórmulas de aproximación para esta:
Y = 0.33 R + 0.5 G + 0.16 B
Y = 0.375 R + 0.5 G + 0.125 B
Estos se pueden calcular rápidamente como
Y = (R+R+B+G+G+G)/6
Y = (R+R+R+B+G+G+G+G)>>3
He hecho una comparación de los tres algoritmos en la respuesta aceptada. Generé colores en ciclo donde solo se usó cada 400 colores. Cada color está representado por 2×2 píxeles, los colores se ordenan de más oscuro a más claro (de izquierda a derecha, de arriba a abajo).
1.ª imagen – Luminancia (relativa)
0.2126 * R + 0.7152 * G + 0.0722 * B
Segunda imagen – http://www.w3.org/TR/AERT#color-contrast
0.299 * R + 0.587 * G + 0.114 * B
3ra imagen – Modelo de color HSP
sqrt(0.299 * R^2 + 0.587 * G^2 + 0.114 * B^2)
Cuarta imagen: fórmula de relación de contraste y luminancia relativa de WCAG 2.0 SC 1.4.3 (consulte la respuesta de @Synchro aquí)
El patrón a veces se puede ver en la primera y segunda imagen dependiendo de la cantidad de colores en una fila. Nunca vi ningún patrón en la imagen del tercer o cuarto algoritmo.
Si tuviera que elegir, elegiría el algoritmo número 3, ya que es mucho más fácil de implementar y aproximadamente un 33 % más rápido que el cuarto.
Te mostramos las comentarios y valoraciones de los usuarios
Si piensas que te ha resultado de ayuda nuestro post, sería de mucha ayuda si lo compartes con otros juniors y nos ayudes a difundir este contenido.