gradiente de color

Especifica una gama de colores dependientes de la posición.

Un degradado de color lineal o axial

En la ciencia del color , un degradado 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 combinación de colores . En gráficos por computadora, el término muestra ^[1] ha pasado a significar una paleta de colores activos.

• gradientes de color del mundo real o libros de muestras
• 
  Abanico color RAL CLASSIC K5
• 
  guía de colores pantone
• 
  Tarjetas de colores base Pantone y mezclas.
• 
  abanico de colores HKS

Definiciones

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

• curva a través del espacio de color RGB
• 
  gris
• 
  cubohélice ^[2]
• 
  VHS arcoiris
• 
  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, combinación de colores ) ^[5] / continuo
• forma
• gama: completa o limitada. Ejemplo: color pastel con rango de saturación limitado.
• uniformidad perceptiva ^[6]
• orden
  • ordenado (secuencial) y no ordenado (categórico)
  • orden perceptual
• legibilidad para personas con deficiencias en la visión del color o daltónicas (apto para daltónicos)
• espacio de color
• profundidad del color

Dimensión

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

formas

gradientes axiales

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

Un degradado de color axial (a veces también llamado degradado 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 normalmente se interpolan 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 basada en 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 necesaria ]} Tanto CSS como SVG admiten gradientes radiales. ^{[10] [11]}

gradientes cónicos

gradiente cónico

Los degradados cónicos o cónicos son degradados con transiciones de color que giran alrededor de un punto central (en lugar de irradiarse desde el centro). Los ejemplos de gradientes cónicos incluyen gráficos circulares y ruedas de color. ^[12] Los gradientes cónicos a veces se denominan "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
• 
  VHS

Efecto del espacio de color

La apariencia de un degradado no sólo 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 volverse importante por dos razones:

• Corrección gamma a un espacio de color. Con un γ típico de alrededor de 2, es fácil ver que un espacio de color habilitado para gamma 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, siendo el color medio 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 perceptuales. 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 camino. Esto se debe a que la visión humana enfatiza estas cualidades, provocando sesgos o confusión en la interpretación. ^[15]

Una mezcla "lineal" coincidiría con la mezcla física de luces y ha sido el estándar en los motores de juegos durante mucho tiempo. ^[16] En la web, sin embargo, se ha descuidado durante mucho tiempo tanto para los degradados 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 colores HSV
• 
  Degradado de tono único ( monocromático )
• 
  gradiente de color policromático (multitono)

VHS arcoiris

• VHS arcoiris
• 
  Perfiles RGB 2D
• 
  Perfiles HSV 2D
• 
  Perfil 3D RGB

Aplicaciones

• representan valores cuantitativos u ordinales, como en los mapas de calor . Una descripción más precisa está en el cuadro de color. ^[19]
  • visualización de datos
• llenar una región: ^[20] muchos administradores de ventanas permiten que el fondo de la pantalla se especifique como un degradado. Los colores producidos por un degradado varían continuamente con la posición, produciendo transiciones de color suaves.
• visualizar la progresión de una operación informática extendida, como una descarga, transferencia de archivos o instalación. Ver barra de progreso
• Colorear mapas cartográficos

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

Ver también

• Bokashi (impresión)
• bandas de color
• diferencia de color
• Escala de colores
• Mapeo de colores ; una función que asigna (transforma) los colores de una imagen a los colores de otra imagen
• Curva de difusión
• vacilante
• Degradado de imagen
• bandas mach
• Tresillo
• paleta ; un conjunto finito de colores sin ningún orden en particular
• Espacios de color perceptualmente uniformes
• Posterización
• Catálogo de colores
• Libros de muestras (como en el libro de muestras de colores de papel o 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-usar-en-datos-vis por Lisa Charlotte Rost
6. Fabio Crameri: mapas científicos de colores
7. Una encuesta y evaluación de la calidad basada en tareas de mapas de colores estáticos 2D Autor(es): Bernard, Jürgen; Steiger, Martín; Mittelstädt, Sebastián; Bueno, Simón; Keim, Daniel; Kohlhammer, Jörn, In Kao, David L. (Ed.); Sociedad de Ciencia y Tecnología de la Imagen -IS&T-; Sociedad de ingenieros de instrumentación fotoóptica -SPIE-, Bellingham/Wash.: Visualización y análisis de datos 2015: 9 a 11 de febrero de 2015, San Francisco, California Bellingham, WA: SPIE, 2015 (Actas de SPIE 9397) ISBN  9781628414875
8. Degradados lineales en "Valores de imagen CSS y módulo de contenido reemplazado nivel 3", Recomendación del candidato 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 nivel 3", Recomendación del candidato del W3C, abril de 2012
11. Degradados radiales en "SVG 1.1 (segunda edición)", Recomendación del W3C, agosto de 2011
12. documentos de mozilla: gradiente cónico CSS
13. Minuto de Física (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 codificador debería saber sobre gamma".
15. Zeileis, Achim; Pescador, Jason C.; Hornik, Kurt; Ihaka, Ross; McWhite, Claire D.; Murrell, Pablo; Stauffer, Reto; Wilke, Claus O. (2019). "Colorspace: una caja de herramientas para manipular y evaluar colores y paletas". arXiv : 1903.06490 [estad.CO].
16. "Capítulo 24. La importancia de ser lineal". Desarrollador NVIDIA .
17. "El color de la web todavía está roto".
18. "Cómo el software se equivoca con el color". bottosson.github.io .
19. gnuplot docs 4.2 node167: cuadro de color
20. Eisenberg, J. David (2002). Elementos esenciales de SVG . Medios O'Reilly . pag. 107.ISBN​ 0-596-00223-8.