colors - tipos - gradient css radial generator
¿Cuál es la mejor manera de promediar dos colores que definen un gradiente lineal? (8)
Si tengo dos colores definidos por sus valores RGB, ¿puedo promediar los valores Rojo, Verde y Azul y luego combinarlos para definir un tercer color que se ve como un promedio visual de los dos?
es decir NewColor = (R1 + R2) / 2, (G1 + G2) / 2, (B1 + B2) / 2
EDIT1: Gracias por todas las respuestas. Para mis necesidades actuales, solo estoy tratando con pares de colores que son tonos del mismo color, así que creo que promediarlos funcionará. Sin embargo, intentaré convertirme en Lab Space para asegurarme de que esa suposición sea cierta y que la técnica sea útil en el futuro.
EDIT2: Aquí están mis resultados FWIW. Color1 y Color2 son mis dos colores y las dos columnas medias son el resultado de promediar en el espacio L a b y promediar RGB respectivamente. En este caso, no hay mucha diferencia entre los dos colores, por lo que las diferencias en el resultado de las técnicas de promediado son sutiles.
Creo que la respuesta de arntjw va en la dirección correcta, y reconoce la base logarítmica, como lo menciona Dan W. Sin embargo, la media geométrica adecuada no es sqrt ((C1 ^ 2 + C2 ^ 2) / 2), sino sqrt (C1 * C2). Entonces, el color promedio sería:
NewColor = sqrt(R1*R2),sqrt(G1*G2),sqrt(B1*B2)
Los colores resultantes están más cerca de lo que esperamos. Puede generalizar a más colores usando raíces de orden superior, y ponderar cada color agregando un exponente a sus componentes.
De hecho, hay una manera mucho más simple.
Escala la imagen a 1px por 1px.
Color de 1px es el color promedio de lo que sea que hayas escalado
Esto es duro. Primero, un conjunto de valores RGB no define un color. Deben interpretarse a la luz de los colores primarios a los que se refieren (el espacio de color), como sRGB, Rec.709, Rec.2020, Adobe RGB (1998), etc.
Además, los valores RGB como los encontramos normalmente no son proporcionales a la luz lineal: están "codificados" usando una función no lineal (gamma). Y a veces (principalmente en aplicaciones de video) el valor de "negro" no es cero, pero se compensa desde cero, generalmente 16 para valores de 8 bits. Y "blanco" no es 255 sino 235. sRGB y Rec.709 comparten primarios RGB, pero sus funciones gamma son diferentes.
La conversión de espacio de color comienza con la eliminación de cualquier compensación de negro para que el negro sea cero. Si la función gamma tiene un punto de interrupción (como sRGB y Rec.709 do), tendrá que escalar cuidadosamente los valores RGB para que "blanco" sea 1.0.
Luego, "decodifica" la gamma haciendo el inverso de la función gamma original. (Una respuesta sugirió cuadrar los valores, que es una aproximación de la decodificación gamma). Ahora tiene valores RGB de luz lineal en algún espacio de color. En este punto puede convertir de ese espacio de color al espacio de Laboratorio. La mayoría de las conversiones de RGB a Lab pasan por un espacio de color intermedio llamado XYZ.
Los pasos como llamadas de funciones anidadas:
Lab = XYZ2Lab (RGB2XYZ (gamma_decode (offset_and_scale (RGB), gammaFunction ), espacio de color RGB )
(El espacio de laboratorio se desarrolló en 1976 como un intento de crear una deformación perceptualmente uniforme del espacio estándar CIE XYZ. (Luv fue otro intento). La idea es que la distancia euclidiana (línea recta) entre dos colores que eran solo - notoriamente diferente (1 "JND") sería la misma distancia para dos colores. La distancia entre dos colores en Lab se conoce como ''delta-E''. La fórmula de distancia delta Euclidiana simple ahora se llama dE76. Consulte https://en.wikipedia.org/wiki/Color_difference )
En su caso, puede promediar los dos colores Lab para obtener un nuevo color Lab, luego invertir todas las conversiones para volver a RGB en el espacio de color elegido.
Esto te acercará, pero no está garantizado, simplemente porque el "color" es una percepción humana, no una cantidad física, y ha sido notoriamente difícil de caracterizar de manera confiable. El laboratorio en realidad no funcionó tan bien como para ser perceptualmente uniforme. Entonces, en lugar de reparar Lab, propusieron una nueva función delta-E más compleja con otro warp incorporado: DE94. Eso fue mejor, pero no perfecto, así que surgió otra propuesta en 2000: DE2000. También mejor, pero no perfecto. Consulte la página Wiki anterior para obtener más información.
Si DE2000 no es lo suficientemente bueno (¡o demasiado complejo!), Puede echar un vistazo a una alternativa a Lab llamada ICtCp que se dice que es más perceptualmente uniforme que Lab.
Mire las respuestas a esta pregunta .
Básicamente, desea convertir los colores en algo llamado espacio de laboratorio , y encontrar su promedio en ese espacio.
El espacio de laboratorio es una forma de representar colores donde los puntos que están cerca uno del otro son los que se parecen entre sí a los humanos.
No sé si tomar un promedio simple de los componentes es lo "mejor" desde un punto de vista perceptual (eso suena como una pregunta para un psicólogo), pero aquí hay un par de ejemplos que usan el promedio de componentes simples.
El verde rojo-mostaza es feo, pero la interpolación parece bastante razonable.
Promediar en el espacio de color HSL puede producir mejores resultados.
Sí. Puedes promediar dos colores juntos así. Es el enfoque utilizado por OpenGL para combinar colores (por ejemplo, al crear mapas mip para renderizar objetos distantes, o al renderizar una textura transparente al 50%). Es rápido, simple y "lo suficientemente bueno" para muchas situaciones. Sin embargo, no es del todo realista y probablemente no se utilizaría en imágenes con calidad fotográfica.
Varias respuestas sugieren la conversión al espacio de color Lab, que probablemente sea un buen enfoque para una manipulación del color más compleja.
Pero si simplemente necesita una forma rápida de tomar el promedio de dos colores, esto se puede hacer en el espacio RGB. Solo tiene que tener en cuenta una advertencia: debe cuadrar los valores RGB antes de promediarlos, y luego tomar la raíz del resultado. (Si simplemente toma el promedio, el resultado tenderá a ser demasiado oscuro).
Me gusta esto:
NewColor = sqrt((R1^2+R2^2)/2),sqrt((G1^2+G2^2)/2),sqrt((B1^2+B2^2)/2)
Aquí hay un gran video que explica por qué este método es eficiente: https://www.youtube.com/watch?v=LKnqECcg6Gw