Pipette

Sombras de Gris

En este artículo nos gustaría atender al tema "valores grises". Para ello, primero veremos qué características y qué forma tienen los valores de gris en los distintos modelos de color comunes. Luego contrastamos una serie de diferentes valores de gris de negro a blanco en una tabla, donde los valores de gris se clasifican siempre en los mismos pasos de color a color. Esta tabla facilita la comprensión de las explicaciones introducidas en los apartados a los modelos de color. Finalmente, veremos términos comunes utilizados para los diferentes tonos de gris en diferentes contextos.

Este artículo se divide en las siguientes secciones:

Valores de Gris en el Modelo de Color RGB

Dentro del modelo de color RGB, cuando las proporciones de rojo (R), verde (G, Green) y azul (B, Blue) son idénticas, el resultado siempre es un valor de gris. Si cada una de estas proporciones es 0, el resultado es negro (en notación hexadecimal #000 o #000000). Por otro lado, si todas las participaciones están al 100 por ciento, el resultado es blanco (en notación hexadecimal #FFF o #FFFFFF respectivamente 255 en notación decimal). En el medio, hay todos los demás valores grises clasificados en consecuencia.

Valores de Gris en el Modelo de Color CMY

El modelo de color CMY se comporta de forma similar al modelo de color RGB. Aquí también surge un valor de gris con exactamente las mismas proporciones de los componentes cian (C), magenta (M) y amarillo (Y, Yellow). También en este modelo se puede regular el valor de brillo respectivamente el valor de gris variando constantemente estos tres valores.

Sin embargo, en el modelo de color CMY sustractivo, la dirección es la opuesta al modelo de color RGB aditivo: Mientras que en el modelo de color CMY, para el color negro, todos los componentes deben ser 100 por ciento y 0 por ciento para el color blanco, en el modelo de color RGB es exactamente al revés. En el modelo de color RGB, el blanco resulta cuando todos los componentes están al 100 por ciento y el negro cuando cada uno de los 3 componentes está al 0 por ciento.

Valores de Gris en el Modelo de Color CMYK

Se obtiene un valor de gris en el modelo CMYK manteniendo arbitrariamente constantes los valores de cian (C), magenta (M) y amarillo (Y, Yellow) y regulando el valor de gris mediante la proporción de K (Key, Black, Negro). En este proceso, K puede adoptar valores de 0 a 100 por ciento. Dado que "K" representa la proporción de negro, en el modelo de color CMYK, suponiendo que el cian, el magenta y el amarillo están al 0 por ciento, obtenemos automáticamente el negro puro con un valor K del 100 por ciento y el color blanco si configuramos el K valor a 0 por ciento.

Sin embargo, si establecemos los valores de cian, magenta y amarillo al 100 por ciento, debido a la mezcla sustractiva de colores, se comporta exactamente al revés: en este caso obtenemos un negro puro con un valor K del 0 por ciento y un blanco puro con un valor K del 100 por ciento. Si el cian, el magenta y el amarillo tienen un valor idéntico, que está entre 0 y 100 por ciento, todavía obtenemos valores grises y un negro puro al variar el valor K, pero ya no mas blanco puro. Cuanto más altos sean los valores idénticos de cian, magenta y amarillo, más oscuro será el valor de gris a partir de un valor K de 0 por ciento. Si el cian, el magenta y el amarillo están al 100 por ciento, siempre obtenemos negro, independientemente del porcentaje en el que esté el valor K.

Valores de Gris en el Modelo de Color HSV

En el modelo de color HSV, un valor de gris resulta de una saturación (S, Saturation) de 0 por ciento. Con esto, el tono seleccionado (H, Hue) ya no juega un papel y la luminosidad (V, Value) determina dónde se ubica el gris entre el blanco y el negro.

Esto significa que con una saturación del 0 por ciento, podemos regular el valor de gris únicamente a través de la luminosidad. Con una luminosidad del 0 por ciento obtenemos negro, con una luminosidad del 100 por ciento obtenemos blanco, en el medio están los valores de gris. En este proceso, el tono (hue) puede tomar cualquier valor sin cambiar el resultado, ya que se apaga por completo con la saturación del 0 por ciento. Sin embargo, por lo general, uno no usa un valor H arbitrario para los valores de negro, blanco y gris, sino un valor de 0 por ciento, ya que esto refleja mejor la insignificancia de este valor.

Valores de Gris en el Sistema CIE / XYZ

El modelo de color XYZ, respectivamente el sistema de valencia estándar CIE desarrollado por la Comisión Internacional de Iluminación, se comporta de manera completamente diferente a los modelos de color presentados hasta ahora. Este modelo intenta tener en cuenta la percepción humana y representar todos los colores posibles (cosa que los otros modelos no pueden).

Para lograrlo, este sistema define diferentes observadores y condiciones de iluminación para adaptarse al mayor número de situaciones posible. Dependiendo de la iluminación que elijas, los valores resultantes de la conversión de otros modelos de color variarán en consecuencia.

Uno de los tipos de iluminación más comunes y utilizados es la iluminación estándar CIE D65 (luz diurna media), que también se utiliza, por ejemplo, para sRGB, Adobe RGB y el estándar de TV PAL/SECAM. Bajo esta condición de iluminación, el blanco RGB está en X = 95,047; Y = 100.000 y Z = 108.883, mientras que el negro RGB está en X = 0; Y = 0 y Z = 0. Los tonos de grises intermedios aumentan en la misma proporción entre sí, pero a diferencia de todos los demás modelos de color presentados hasta ahora, como RGB, CMY, CMYK o HSV, no siguen una gradación lineal exacta. Por ejemplo, aunque el 50% gris de RGB está exactamente a la mitad de la escala en todos los demás sistemas, en el sistema XYZ en condiciones D65 está en X = 20,518; Y = 21,586 y Z = 23,507 sólo en aproximadamente el 20% de la escala. La razón de esto es que los colores en el espacio de color XYZ no están distribuidos uniformemente. Si utiliza otras condiciones de iluminación, el negro de RGB permanece en 0 mientras que solo cambia el máximo de la escala (donde se encuentra el blanco de RGB).

Cuando se utiliza la variante xyz estandarizada Yxy (también conocida como xyY) bajo condiciones de luz diurna media (iluminación estándar CIE D65), el color blanco respectivamente el punto blanco está en el medio del espacio de color CIE xy (en el medio de la carta de colores estándar) en la posición con las coordenadas x = 0,313 e y = 0,328 con un brillo de Y = 100%. Todos los valores de gris, incluido el negro, también están en este punto, pero con un valor de brillo Y del 0% (negro) pasando por los tonos de gris correspondientes hasta el 100% (blanco). Si elegimos un tipo de iluminación diferente, el punto blanco se desplazaría a una ubicación diferente. Por ejemplo, el punto blanco de la iluminación estándar CIE D55 (luz solar directa) está en x = 0,3324 y 0,3474, mientras que la iluminación estándar CIE E (punto blanco del punto con la misma energía) es exactamente un tercio para ambos valores.

Valores de Gris en el Sistema TColor

El valor TColor, que se basa en el modelo de color RGB, calcula los componentes RGB de rojo, verde y azul en un solo número (más sobre la fórmula para el cálculo en el artículo vinculado). Esto hace que el sistema TColor sea el único de todos los modelos de color presentados aquí que solo utiliza un valor único para describir completamente un color.

Con este cálculo, el negro da como resultado un valor TColor de 0, el blanco da como resultado el valor 16777215. En el medio se encuentran los 254 niveles de grises enteros diferentes del modelo RGB (256 niveles de grises del negro al gris y al blanco), siempre a la misma distancia de 65793. Por lo tanto, cada 65793 valor de TColor es un valor de gris. El número 65793 resulta de recorrer completamente dos canales de color (256 x 256 = 65536 colores) más 256 + 1 colores del tercer canal de color.

Tabla de Colores con Valores Grises

Para demostrar estas peculiaridades de los diferentes modelos de color, la siguiente tabla contiene algunos valores de gris entre negro (arriba) y blanco (abajo) así como los valores correspondientes en los diferentes modelos de color. Debajo de la tabla encontrará una explicación de las columnas individuales.

 HEX%RGBCMYCMYKHSVXYZXYZXYZTColor
 #0000000,000100,0100,00,000,000,000,000
 #0505051,96598,098,01,960,140,150,17328965
 #0A0A0A3,921096,196,13,920,290,300,33657930
 #0F0F0F5,881594,194,15,880,450,480,52986895
 #1414147,842092,292,27,840,670,700,761315860
 #1919199,802590,290,29,800,920,971,061644825
 #1E1E1E11,763088,288,211,81,231,301,411973790
 #23232313,733586,386,313,71,601,681,832302755
 #28282815,694084,384,315,72,022,122,312631720
 #2D2D2D17,654582,482,417,62,492,622,862960685
 #32323219,615080,480,419,63,033,193,473289650
 #37373721,575578,478,421,63,633,824,163618615
 #3C3C3C23,536076,576,523,54,294,524,923947580
 #41414125,496574,574,525,55,025,295,764276545
 #46464627,457072,572,527,55,826,126,674605510
 #4B4B4B29,417570,670,629,46,697,047,664934475
 #50505031,378068,668,631,47,628,028,745263440
 #55555533,338566,766,733,38,639,089,895592405
 #5A5A5A35,299064,764,735,39,7210,211,15921370
 #5F5F5F37,259562,762,737,310,911,412,56250335
 #64646439,2210060,860,839,212,112,713,96579300
 #69696941,1810558,858,841,213,414,115,46908265
 #6E6E6E43,1411056,956,943,114,815,617,07237230
 #73737345,1011554,954,945,116,317,118,77566195
 #78787847,0612052,952,947,117,918,820,57895160
 #7D7D7D49,0212551,051,049,019,520,522,38224125
 #82828250,9813049,049,051,021,222,324,38553090
 #87878752,9413547,147,152,923,024,226,48882055
 #8C8C8C54,9014045,145,154,924,926,228,69211020
 #91919156,8614543,143,156,926,928,330,89539985
 #96969658,8215041,241,258,829,030,533,29868950
 #9B9B9B60,7815539,239,260,831,232,835,710197915
 #A0A0A062,7516037,337,362,733,435,238,310526880
 #A5A5A564,7116535,335,364,735,837,641,010855845
 #AAAAAA66,6717033,333,366,738,240,243,811184810
 #AFAFAF68,6317531,431,468,640,742,946,711513775
 #B4B4B470,5918029,429,470,643,445,649,711842740
 #B9B9B972,5518527,527,572,546,148,552,812171705
 #BEBEBE74,5119025,525,574,548,951,556,112500670
 #C3C3C376,4719523,523,576,551,954,659,412829635
 #C8C8C878,4320021,621,678,454,957,862,913158600
 #CDCDCD80,3920519,619,680,458,061,066,513487565
 #D2D2D282,3521017,617,682,461,364,470,213816530
 #D7D7D784,3121515,715,784,364,668,074,014145495
 #DCDCDC86,2722013,713,786,368,071,677,914474460
 #E1E1E188,2422511,811,888,271,675,382,014803425
 #E6E6E690,202309,809,8090,275,279,186,215132390
 #EBEBEB92,162357,847,8492,279,083,190,515461355
 #F0F0F094,122405,885,8894,182,887,194,915790320
 #F5F5F596,082453,923,9296,186,891,399,416119285
 #FAFAFA98,042501,961,9698,090,995,6104,016448250
 #FFFFFF100,002550,000,00100,095,0100,0109,016777215

En la primera columna de la tabla se puede ver un pequeño cuadrado con el tono gris de la respectiva fila de la tabla. A continuación se muestran los valores individuales de los distintos modelos de color presentados:

Si desea valores más precisos o desea procesar los valores de gris, simplemente puede recoger el color con la Pipette. Simplemente elija los colores desde la ventana de su navegador con la función de Pipette para que no tenga que ingresarlos manualmente. La Pipette también se puede utilizar para comprender el efecto de variar cada componente de los diferentes modelos de color sobre el grado de oscuridad o brillo al aumentar o disminuir gradualmente las proporciones de cada componente en el programa.

La tabla fue generada automáticamente por una solución de software individual por Stefan Trost Media.

Nombres para Valores de Gris específicos

Algunos de los valores de gris presentados pueden describirse no sólo por su valor numérico en uno de los diferentes modelos de color, como vimos en el último apartado, sino también por sus propios nombres, que, sin embargo, pueden diferir según el contexto.

La siguiente tabla compara algunos de estos términos desde diferentes contextos. La mayoría de estos nombres de colores y constantes de color provienen del módulo de color X11 / SVG / CSS3, que también se puede utilizar para colorear sitios web, otros provienen de lenguajes de programación como Java, Pascal (Delphi y Lararus) o VBA (Visual Basic for Applications), desde el application framework y GUI toolkit Qt, así como del lenguaje de marcado de texto y documentos LaTeX y el estándar PWG 5101.1 (Media Color Names) desarrollado por el Printer Working Group (PWG).

Las primeras cuatro columnas contienen un campo de color para el valor de gris, el código de color hexadecimal y el porcentaje redondeado de todos los canales de color del modelo de color RGB, así como una traducción al español del nombre respectivo. A esto le siguen los nombres individuales de los respectivos contextos. Si un contexto no proporciona un nombre separado para uno de los valores de color enumerados, el campo correspondiente se marca con una línea.

 HEX%NombreX11 / CSSJavaPascalQtVBALaTeXPWG
 #0000000NegroBlackBLACKclBlackblackvbBlackblackBlack
 #40404025Gris Oscuro-DARK_GRAYclDkGray--darkgrayDark Gray
 #69696941Gris Nublado DimGray------
 #80808050GrisGray [CSS]GRAYclGraydarkGray-grayGray
 #A0A0A063Gris Medio--clMedGraygray---
 #A9A9A966Gris OscuroDarkGray------
 #AFAFAF69Plata Oscura------Dark Silver
 #BEBEBE74Gris MedianoGray [X11]------
 #BFBFBF75Gris Luminoso-----lightgray-
 #C0C0C075PlataSilverLIGHT_GRAYclSilver/clLtGraylightGray--Silver
 #D3D3D383Gris ClaroLightGray-----Light Gray
 #DCDCDC86GainsboroGainsboro------
 #E0E0E087Plata Pura------Clear Silver
 #E1E1E188Plata Clara------Light Silver
 #F5F5F596Blanco HumoWhiteSmoke------
 #FFFFFF100BlancoWhiteWHITEclWhitewhitevbWhitewhiteWhite

En todos los contextos, existe el consenso en utilizar los términos "negro" y "blanco" para los colores con los códigos de color RGB hexadecimal #000000 (participación de color de rojo, verde y azul del 0%) respectivamente #FFFFFF (participación de color de rojo, verde y azul del 100%). Pero también el término "gris" se utiliza de manera comparativamente uniforme para una proporción de RGB del 50% en todos los canales, lo que corresponde al código de color RGB #808080.

Sin embargo, ya los términos "gris claro" y "gris oscuro" son mucho más ambiguos. Mientras que la mayoría de los contextos se refieren al valor de color RGB #404040 como gris oscuro, Qt define el valor de color #808080 como "gris oscuro", que se conoce como "gris" en la mayoría de los otros contextos, mientras que CSS incluso usa este término para el valor de color #A9A9A9, que es más claro que el gris 50% normal. Además, el término "gris claro" puede significar un color desde #BFBFBF hasta #D3D3D3, según el contexto. Aquí puede descubrir por qué el estándar CSS define DarkGray más claro que el gris normal (Gray).

Otros términos para tonos de gris, enumerados según su brillo del negro al blanco, son las palabras "gris nublado" para #696969, "gris medio" para #A0A0A0, "plata oscura" para #AFAFAF, "gris luminoso" para #BFBFBF, "plata" para #C0C0C0, "gainsboro" para #DCDCDC, "plata pura" para #E0E0E0, "plata clara" para #E1E1E1 así como "blanco humo" para #F5F5F5. Sin embargo, la mayoría de estos términos adicionales se utilizan sólo en uno o unos pocos contextos. La mayoría de los términos para los tonos de grises están definidos por el estándar CSS y el Printer Working Group.

La ambigüedad de las definiciones de valores grises existe no sólo entre diferentes contextos sino también dentro de algunos espacios de definición. Por ejemplo, Pascal describe el valor de gris #C0C0C0 dos veces como "plata" (clSilver) y "gris claro" (clLtGray). Los nombres de colores del Printer Working Group (PWG) también contienen varias definiciones múltiples. Esto se debe al enfoque de este esquema de color de definir casi todos los valores de color no sólo en su versión pura sino también en los tonos "dark", "light" y "clear". En el grupo de valores de gris sin valor de color, esta gradación significa que no solo a "Gray" se le asignó el valor de gris #808080, sino que también "Clear Black" y "Light Black" incorporan el mismo valor de gris. Lo mismo se aplica a #C0C0C0 ("Silver" o "Clear Gray") y #FFFFFF ("White" o "Clear White").

Otra forma de doble definición se puede encontrar en el estándar CSS: CSS no sólo acepta la escritura americana "Gray" con "a", sino también la escritura inglesa "Grey" con "e" en cambio. Por lo tanto, las palabras "Grey", "DimGrey", "DarkGrey" y "LightGrey" pueden usarse de manera equivalente a "Gray", "DimGray", "DarkGray" y "LightGray", aunque los navegadores más antiguos como el Netscape Navigator todavía insistían en la variante "a".

Otro tipo de doble definición, aunque diferente, se refiere a las constantes de color de Java: normalmente, el lenguaje de programación Java distingue entre mayúsculas y minúsculas (case-sensitive). Sin embargo, las constantes de color que se muestran en la tabla se pueden escribir tanto en minúsculas como en la variante en mayúsculas que se muestra. Esta peculiaridad surgió porque la primera definición de estas constantes estaba en minúsculas. Sin embargo, dado que la convención de Java recomienda constantes en mayúscula, se realizó una redefinición correspondiente manteniendo al mismo tiempo las variantes ya definidas por razones de compatibilidad. De lo contrario, se aplica el enfoque habitual en el respectivo lenguaje de programación o entorno para la escritura de las constantes de color y los nombres de los colores, por ejemplo que CSS, Pascal y VBA no distinguen entre mayúsculas y minúsculas y, por lo tanto, permiten todas las escrituras y las consideran equivalentes, mientras que LaTex y normalmente también Java, por ejemplo, distinguen entre mayúsculas y minúsculas y sólo aceptan las escrituras mostradas.

Otras Cartas de Color

Luminosidad y Saturación | Luminosidad | Saturación | Sombras de Gris | Nombres de Color | Colores Web