El porqué de los códigos cromaticos

25 08 2009

Entre los conocimientos escenciales y básicos para el diseño se encuentra las TEORIAS y SISTÉMAS CROMÁTICOS.

¿Alguna ves han elegido en su diseño un hermoso verde que al imprimise termina siendo un café? ó ¿Visto en pantalla un rojo escarlata que termina siendo un rosado al imprimirse? ó ¿viceversa?

Esto sucede debido a que nuestro lumínico monitor y la absorbente hoja de papel, expresan y usan sistemas de colores diferentes.

NO es lo mismo la emisión de luz que la reflectancia de la misma.

Para comezar definamos que los colores se denominan y dividen en sustractivos y aditivos;

Sístesis sustractiva: La mezcla de pinturas, tintes, tintas y colorantes naturales para crear colores que absorben ciertas longitudes de onda y reflejan otras. El color que parece que tiene un determinado objeto depende de qué partes del espectro electromagnético son reflejadas por él, o dicho a la inversa, qué partes del espectro no son absorbidas.

+ Para ello se usa el SISTEMA CMYK: (acrónimo de Cyan, Magenta, Yellow y Key) es un modelo de colores sustractivo que se utiliza en la impresión a colores.

Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros más:

La mezcla de colores CMY ideales es sustractiva (pues imprimir cyan, magenta y amarillo en fondo blanco resulta en el color negro). El modelo CMYK se basa en la absorción de la luz. El color que presenta un objeto corresponde a la parte de la luz que incide sobre este y que no es absorbida por el objeto.

Sintesis Sustractiva del color

Sintesis Sustractiva del color

Sitesis Sustractiva del color

Sitesis Sustractiva del color

Sińtesis Aditiva: implica que se emita luz directamente de una fuente de iluminación de algún tipo. El proceso de reproducción aditiva normalmente utiliza luz roja, verde y azul para producir el resto de colores. Combinando uno de estos colores primarios con otro en proporciones iguales produce los colores aditivos secundarios: cian, magenta y amarillo. Combinando los tres colores primarios de luz con las mismas intensidades, se produce el blanco. Variando la intensidad de cada luz de color finalmente deja ver el espectro completo de estas tres luces.

Las televisiones y los monitores de ordenador son las aplicaciones prácticas más comunes de la síntesis aditiva.

Sistesis aditiva del color

Sistesis aditiva del color

+ Para ello el sistema RGB y el HEXADECIMAL (Web Safe Colors o HTML)

Los colores web son exactamente lo mismo que el color en RGB. La única diferencia radica en la forma de referirnos a ellos para que los navegadores sepan interpretarlos.

Los colores web se definen por tres pares de dígitos. Cada par identifica un color básico: el primer par es el rojo, el siguiente par es el verde, y el último es el azul.

Igual que sucede con la paleta RGB, el color en web es aditivo. Eso quiere decir que el valor 0 (cero) para todos los colores da como resultado el negro, mientras que el valor más alto para los tres colores, 255, da como resultado el blanco. Todo lo contrario que en la cuatricromía (CMYK).

Entonces ¿por qué el blanco es FFFFFF y no 255-255-255? Sí que es 255-255-255, sólo que expresado en hexadecimal.

Cada dígito del par identifica un valor del 0 al 15. Como sólo tenemos un caracter para expresar ese rango de valores, a partir del 9 los demás valores se representan con una letra. De ese modo:

– De 0 a 9, sus propios valores.

– “A” vale 10

– “B” vale 11

– “C” vale 12

– “D” vale 13

– “E” vale 14

– “F” vale 15

Por tanto, “02″ vale 2 y “0A” vale 10 ¿pero como funciona el primer dígito del par? El primer dígito del par tiene exactamente los mismos valores, pero expresa múltiplos de 16. La suma de los valores de ambos dígitos nos proporciona todos los valores, del 0 al 255.

– “10″ en código de color para web equivale a 16 en decimal. (16×1)+0=16

– “11″ en código de color para web equivale a 17 en decimal. (16×1)+1=17

– “34″ en código de color para web equivale a 52 en decimal. (16×3)+4=52

– El valor 172 en RGB equivaldría a “AC” en web: “A” en el primer dígito vale 160 (16×10) y “C” en el segundo vale 12; 160+12=172.

– El blanco, “FFFFFF”, es “FF” para todos los colores. O sea 16×15 en el primer dígito = 240, más 15 en el segundo dígito. 140+15=255, el valor más alto en RGB.

los colores básicos son cuatro, y rara vez tres; para colmo, cuando son tres y aditivos, se calculan en una escala de 0 a 255, y no de 00 a FF.

Total, que por muy básico que sea el tema, tenía que exlicarselo a un cliente y me ha costado un rato de Photoshop encontrar el razonamiento que me permitiese comprender el proceso. En internet hay mucho código con el color que representa, pero ni palabra del por qué (o yo no he sabido encontrarlo).

Por si alguien está igual de intrigado que yo y quiere saber como funciona el tema, ahí voy:

Los colores web son exactamente lo mismo que el color en RGB. La única diferencia radica en la forma de referirnos a ellos para que los navegadores sepan interpretarlos.

Los colores web se definen por tres pares de dígitos. Cada par identifica un color básico: el primer par es el rojo, el siguiente par es el verde, y el último es el azul.

Igual que sucede con la paleta RGB, el color en web es aditivo. Eso quiere decir que el valor 0 (cero) para todos los colores da como resultado el negro, mientras que el valor más alto para los tres colores, 255, da como resultado el blanco. Todo lo contrario que en la cuatricromía.

Entonces ¿por qué el blanco es FFFFFF y no 255-255-255? Sí que es 255-255-255, sólo que expresado en hexadecimal.

Cada dígito del par identifica un valor del 0 al 15. Como sólo tenemos un caracter para expresar ese rango de valores, a partir del 9 los demás valores se representan con una letra. De ese modo:

– De 0 a 9, sus propios valores.

– “A” vale 10

– “B” vale 11

– “C” vale 12

– “D” vale 13

– “E” vale 14

– “F” vale 15

Por tanto, “02″ vale 2 y “0A” vale 10 ¿pero como funciona el primer dígito del par? El primer dígito del par tiene exactamente los mismos valores, pero expresa múltiplos de 16. La suma de los valores de ambos dígitos nos proporciona todos los valores, del 0 al 255.

– “10″ en código de color para web equivale a 16 en decimal. (16×1)+0=16

– “11″ en código de color para web equivale a 17 en decimal. (16×1)+1=17

– “34″ en código de color para web equivale a 52 en decimal. (16×3)+4=52

– El valor 172 en RGB equivaldría a “AC” en web: “A” en el primer dígito vale 160 (16×10) y “C” en el segundo vale 12; 160+12=172.

– El blanco, “FFFFFF”, es “FF” para todos los colores. O sea 16×15 en el primer dígito = 240, más 15 en el segundo dígito. 140+15=255, el valor más alto en RGB.

Colores HTML

Colores HTML

¿Confuso? ¿Fácil?

Si desean que siga ampliando resolviendo sus dudas no duden en postear.

Fuente e imágenes: Wikipedia


Acciones

Information

One response

10 09 2009
Trackback

Comentario…

[..]Articulo Indexado Correctamente[..]…

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: