Degradado de color

Especifica un rango de colores que dependen de la posición.

Un gradiente de color lineal o axial

En la ciencia del color , un gradiente de color (también conocido como rampa de color o progresión de color ) especifica un rango de colores dependientes de la posición , generalmente utilizados para rellenar una región.

Al asignar colores a un conjunto de valores, un degradado es un mapa de colores continuo, un tipo de esquema de colores . En gráficos de computadora, el término muestra ^[1] ha llegado a significar una paleta de colores activos.

• Degradados de color del mundo real o libros de muestras
• 
  Abanico de colores RAL CLASSIC K5
• 
  Guía de colores Pantone
• 
  Tarjetas de colores base y mezclas Pantone
• 
  Ventilador de colores HKS

Definiciones

• El degradado de color es un conjunto de colores dispuestos en un orden lineal (ordenado)
• Un mapa de colores continuo es una curva a través de un espacio de color.

• curva a través del espacio de color RGB
• 
  gris
• 
  hélice cúbica ^[2]
• 
  Arcoiris del virus del herpes simple
• 
  divergente ^[3]

Definición estricta

Un mapa de colores ^[4] es una función que asocia un valor real r con el punto c en el espacio de color. ${\displaystyle C}$

${\displaystyle f:[r_{min},r_{max}]\subset \mathbf {R} \to C}$

que se define por:

• un espacio de color C
• una secuencia creciente de puntos de muestreo ${\displaystyle r_{0}<...<r_{m}\in [r_{min},r_{max}]}$
• una serie de valores en el espacio de color ${\displaystyle c_{0},...,c_{m}\in C}$
• El mapeo ${\displaystyle f(r_{i})=c_{i},i=0,...,m}$
• una regla para interpolar los valores intermedios ${\displaystyle r_{i-1}<r<r_{i}\in [r_{min},r_{max}]}$

dónde:

• r es un número real ${\displaystyle r\in [r_{min},r_{max}]\subset \mathbf {R} }$
• ${\displaystyle \mathbf {R} }$ es un conjunto de números reales
• c es un color = punto en el espacio de color C

Tipos

Criterios de clasificación:

• dimensión
• discreto (clasificado, esquema de color ) ^[5] / continuo
• forma
• Gama: completa o limitada. Ejemplo: color pastel con gama de saturación limitada.
• uniformidad perceptiva ^[6]
• orden
  • ordenado (secuencial) y no ordenado (categórico)
  • orden perceptivo
• legibilidad para personas con deficiencias en la visión del color o daltónicas (colorblind-friendly)
• espacio de color
• Profundidad de color

Dimensión

• 1D
• 2D: ^[7] Mapa multivariado , bivariado o trivariado
• 3D

Formas

Gradientes axiales

Un gradiente de color axial, con un segmento de línea blanca que conecta los dos puntos.

Un gradiente de color axial (a veces también llamado gradiente de color lineal) se especifica mediante dos puntos y un color en cada punto. Los colores a lo largo de la línea que pasa por esos puntos se calculan mediante interpolación lineal y luego se extienden perpendicularmente a esa línea. En los sistemas de imágenes digitales , los colores se interpolan normalmente en un espacio de color RGB , a menudo utilizando valores de color RGB comprimidos con gamma , en lugar de lineales. Tanto CSS como SVG admiten gradientes lineales. ^{[8] [9]}

Gradientes radiales

Un degradado de color radial

Un degradado radial se especifica como un círculo que tiene un color en el borde y otro en el centro. Los colores se calculan mediante interpolación lineal en función de la distancia desde el centro. Esto se puede utilizar para aproximar la reflexión difusa de la luz desde una fuente puntual por una esfera . ^{[ cita requerida ]} Tanto CSS como SVG admiten degradados radiales. ^{[10] [11]}

Gradientes cónicos

gradiente cónico

Los gradientes cónicos son gradientes con transiciones de color rotadas alrededor de un punto central (en lugar de irradiar desde el centro). Algunos ejemplos de gradientes cónicos son los gráficos circulares y las ruedas de color. ^[12] A los gradientes cónicos a veces se los denomina "gradientes de barrido" (por ejemplo, en la especificación OpenType ) o gradientes angulares.

Otras formas

En gráficos vectoriales se pueden utilizar mallas poligonales , por ejemplo, mallas de degradado compatibles con Adobe Illustrator .

Espacio de color

• 
  LCH
• 
  virus del herpes simple

Efecto del espacio de color

La apariencia de un degradado no solo varía según el color en sí, sino también según el espacio de color en el que se realiza el cálculo. El problema suele cobrar importancia por dos motivos:

• Corrección de gamma en un espacio de color. Con un valor γ típico de alrededor de 2, es fácil ver que un espacio de color con gamma habilitado se mezclará más oscuro que un espacio de color de intensidad lineal, ya que la suma de los cuadrados de dos números nunca es mayor que el cuadrado de su suma. El efecto es más evidente al mezclar colores complementarios como el rojo y el verde, donde el color del medio es un color oscuro en lugar del amarillo esperado. ^{[13] [14]} Los ejemplos radiales y cónicos de esta página muestran claramente este error.
• Manejo de otras propiedades perceptivas. En la visualización de información , no es deseable que un gradiente supuestamente "plano" muestre variaciones no monótonas en luminosidad y saturación a lo largo del recorrido. Esto se debe a que la visión humana enfatiza estas cualidades, lo que provoca sesgos o confusión en la interpretación. ^[15]

Una combinación "lineal" coincidiría con la combinación de luz física y ha sido el estándar en los motores de juegos durante mucho tiempo. ^[16] Sin embargo, en la web, se ha descuidado durante mucho tiempo tanto para los gradientes de color como para el escalado de imágenes. ^[17] Una combinación de este tipo todavía tiene una diferencia sutil con respecto a una realizada en un espacio de color perceptualmente uniforme. ^[18]

Ejemplos

• Perfiles RGB 2D
• 
• 
• 
• 
• 
• 
• 

• Degradado en la rueda de color HSV
• 
  Gradiente de un solo tono ( monocromático )
• 
  gradiente de color policromático (multitono)

Arcoiris del virus del herpes simple

• Arcoiris del virus del herpes simple
• 
  Perfiles RGB 2D
• 
  Perfiles HSV 2D
• 
  Perfil RGB 3D

Aplicaciones

• Representan valores cuantitativos u ordinales, como en los mapas de calor . La descripción más precisa se encuentra en el cuadro de color. ^[19]
  • Visualización de datos
• rellenar una región: ^[20] muchos administradores de ventanas permiten especificar el fondo de la pantalla como un degradado. Los colores producidos por un degradado varían continuamente con la posición, lo que produce transiciones de color suaves.
• Visualizar el progreso de una operación extensa de la computadora, como una descarga, una transferencia de archivos o una instalación. Ver la barra de progreso
• Colorear mapas cartográficos

• Los gradientes de color en la física
• 
  Temperatura de color del cuerpo negro 800-12200K
• 
  Colores del espectro de luz visible
• 
  degradado de color clasificado
• 
  Rayas cálidas que utilizan un degradado de color clasificado

Véase también

• Bokashi (impresión)
• Bandas de color
• Diferencia de color
• Clasificación de color
• Mapeo de color ; una función que mapea (transforma) los colores de una imagen a los colores de otra imagen
• Curva de difusión
• vacilación
• Gradiente de imagen
• Bandas de Mach
• Tresillo
• Paleta ; un conjunto finito de colores sin ningún orden particular
• Espacios de color perceptualmente uniformes
• Posterización
• Carta de colores
• Libros de muestras (como el libro de muestras de colores de Paper, el abanico de colores RAL CLASSIC K5 o las guías de colores Pantone)

Referencias

1. cssgradient: Muestras de degradado CSS
2. Esquema de colores 'cubehelix' de Dave Green
3. Mapas de colores divergentes para visualización científica - Kenneth Moreland
4. Lo bueno, lo malo y lo feo: un marco teórico para la evaluación de mapas de colores continuos por Roxana Bujack, Terece L. Turton, Francesca Samsel, Colin Ware
5. ¿Qué escala de color utilizar en la visualización de datos? por Lisa Charlotte Rost
6. Fabio Crameri: Mapas científicos de colores
7. Una encuesta y una evaluación de calidad basada en tareas de mapas de color 2D estáticos Autor(es): Bernard, Jürgen; Steiger, Martin; Mittelstädt, Sebastian; Thum, Simon; Keim, Daniel; Kohlhammer, Jörn, In Kao, David L. (Ed.) ; Society for Imaging Science and Technology -IS&T-; Society of Photo-Optical Instrumentation Engineers -SPIE-, Bellingham/Wash.: Visualization and Data Analysis 2015 : 9–11 February 2015, San Francisco, California Bellingham, WA: SPIE, 2015 (Proceedings of SPIE 9397) ISBN  9781628414875
8. Degradados lineales en "Valores de imagen CSS y módulo de contenido reemplazado de nivel 3", recomendación candidata del W3C, abril de 2012
9. Degradados lineales en "SVG 1.1 (segunda edición)", recomendación del W3C, agosto de 2011
10. Degradados radiales en "Valores de imagen CSS y módulo de contenido reemplazado de nivel 3", recomendación candidata del W3C, abril de 2012
11. Degradados radiales en "SVG 1.1 (segunda edición)", recomendación del W3C, agosto de 2011
12. Documentación de Mozilla: CSS con gradiente cónico
13. Minute Physics (20 de marzo de 2015). "El color de la computadora está roto". YouTube . Archivado desde el original el 21 de diciembre de 2021.
14. Novak, John (21 de septiembre de 2016). "Lo que todo programador debería saber sobre gamma".
15. Zeileis, Achim; Fisher, Jason C.; Hornik, Kurt; Ihaka, Ross; McWhite, Claire D.; Murrell, Paul; Stauffer, Reto; Wilke, Claus O. (2019). "colorspace: una caja de herramientas para manipular y evaluar colores y paletas". Revista de software estadístico . 96 . arXiv : 1903.06490 . doi : 10.18637/jss.v096.i01 .
16. "Capítulo 24. La importancia de ser lineal". NVIDIA Developer .
17. "El color web todavía está roto".
18. "Cómo el software se equivoca al calcular el color". bottosson.github.io . 3 de diciembre de 2020.
19. gnuplot docs 4.2 node167: Cuadro de color ^{[ enlace muerto permanente ]}
20. Eisenberg, J. David (2002). Fundamentos de SVG . O'Reilly Media . Pág. 107. ISBN. 0-596-00223-8.