03 Informatizació

n del Color
Mónica Robles
Color Digital -2010
El Color para Web
Fuente: Color for Web and Print – Elaine Rettger
El color en los monitores
• Los monitores de ordenador, pantallas LED y LCD, televisores,
teléfonos celulares y una gran variedad de medios electrónicos y
dispositivos utilizan píxeles para su salida a color.

• Los píxeles (rojo, verde, azul) no se solapan, sino que aparecen uno al
lado del otro. Cuando un color verde aparece, sólo la luz verde se
enciende píxeles.

• Cuando aparece un color cian, tanto píxeles luz verde y azul para arriba.

• Cuando blanco aparece todos los píxeles se encienden.

• Debido a que los píxeles en nuestras pantallas son tan pequeños y

próximos entre sí, nuestros ojos los mezclan de forma aditivo.
¿Qué es un pixel?
• Píxel es una palabra formada a partir de dos palabras
en inglés: PICture, Element, ya que un pixel es el
menor elemento de la imagen digital.
• Los colores de los píxeles son realmente datos de
valores RGB, donde c/u de ellos tiene un valor RGB
numérico.
• Si ampliamos una imagen en Photoshop u otro
programa de edición de fotos, veremos que la imagen
se pone muy "pixelada".
• Una imagen digital se compone de
pixeles individuales. Cada pixel tiene su
propio valor de RGB numérico.
• Una imagen digital se compone de
pixeles individuales. Cada pixel tiene su
propio valor de RGB numérico.
Qué es hexadecimal?
• Hex significa seis (6) Dec significa
diez (10) Hexadecimal significa
dieciséis (16)
• Computadoras almacenan la información en 1 y 0.Cada 1 y
cero tiene un valor único llamado bit. Al contar con base 16
(hexadecimal) se puede incluir más valores en un solo espacio.
Hexadecimal numerology and decimal equivalents

Hex
Decimal
For example:

0
=
0

1
=
1 Decimal 0 is equal to 0 in hex.

2
=
2 Decimal 5 is equal to 5 in hex.

3
=
3
Decimal 10 is equal to A in hex.

4
=
4

5
=
5 Decimal 15 is equal to F in hex.

6
=
6 Decimal 16 is equal to 10 in hex.

7
=
7 Decimal 17 is equal to 11 in hex.

8
=
8

9
=
9 Decimal 255 is equal to FF in hex.

A
=
10

B
=
11

C
=
12

D
=
13

E
=
14

F
=
15
Cómo se relaciona el color
con lo hexadecimal?
Científicos descubrieron que el ojo humano solo puede distinguir
entre los 256 tonalidades de un color primario.

16 x 16 = 256 son todas las tonalidades de un color específico que

pueden expresarse con sólo dos dígitos hexadecimales.

256 = FF en codificación hexadecimal

En teoría, el ojo puede ver más de 16 millones de colores.

Para cada cono en el ojo Rojo,Verde y Azul hay 256 posibles

tonalidades de cada color;
256 (rojo) x 256 (azul) x 256 (verde) = 16.777.216 colores posibles
Qué es la paleta web safe?
Los primeros monitores sólo podían mostrar 256 colores.
Ciertos colores se reservaron para el sistema operativo para
usarlos en las barras de herramientas, menús, etc
Cada sistema operativo, Windows y Macintosh, se reservaba
entre 16 y 20 colores diferentes.
Esto permite exactamente seis tonalidades de cada rojo, verde y
azul (6x6x6 = 216).
Sólo 216 de los básicos 256 se podían mostrar sin tramado
(dithering). El tramado es un método que usa más de un color
para crear otro color que no está disponible. Los colores
tramados por lo general lucen granulados o moteados.
Ejemplo de una imagen tramada usando
216 colores de la paleta segura web

Imagen original Imagen tramada usando 216

web safe colors
Código de colores para el
color Web
• Los códigos de colores CSS para web y monitores se
componen de tres conjuntos de números hexadecimales,
uno para el rojo, uno para el verde, y uno para el azul, en
ese orden.

• Cada color tiene dos canales o un par de colores

hexadecimales, de modo que cada color tiene el potencial
de 256 valores (0-255). Eso es, el doble código para cada
color.

Red Green Blue

=
FF CC 66
Codificación para los colores
primarios web safe.

• Para producir colores puros deje dos colores en 0, and ponga el valor
del tercero (color deseado).

• Si todos los valores son 0, the pantalla será negra.

• Si todos los valores se hallan en el máximo (hex FF, decimal 255) la

pantalla lucirá blanca

• Recuerde el negro es la ausencia de todos los colores y el blanco la

presencia de todos los colores.
 Valores de los
colores Web Safe

decimal
hex
percentage

0
00
0

51
33
20

102
66
40

153
99
60

204
CC
80

255
FF
100

• Los colores seguros para la Web se expresan en porcentajes de

20%, 51 para decimal, y 33 en hexadecimal.

• Recuerde 6 x 6 x 6 = 216
• Los colores web siempre usarán el mismo número para ambos
valores de un canal de color y el uso de sólo el 0, 3, 6, 9, C y F
en la codificación. Esto hace que sea fácil de escribir e identificar
colores para la web.
Muestra de colores web
safe y no-web safe
Patrones comunes y
atajos de la codificación
• Para cada valor RGB de los dos números o letras son los
mismos.

• Los colores para la web sólo usan el 0, 3, 6, 9, C y F.

• La notación abreviada hexadecimal utiliza una notación de color
de 3 caracteres por cada tripleta hexadecimal cuando cada canal
es idéntico RRGGBB. Ejem:

• Color amarillo oscuro {color: # FFCC00;} se puede escribir

como amarillo oscuro {color: # FC0;}.

• Los atajos producen archivos más pequeños, hojas de estilo más

pequeñas y más rápidas cargas de páginas.
Modelos computacionales
y reproducción del color
en pantallas
Mónica Robles/Color Digital 2010
Mezcla de colores en
dispositivos CRT (1/2)
• Para reproducir colores en un monitor de tubo de rayos
catódicos convencional, se usan tres materiales distintos
(fósforos), que emiten luz cuando los alcanza un flujo de
electrones.
• En cada pixel hay tres pequeños puntos, cada uno con un
tipo de fósforo de colores rojo, verde y azul.
• Hay tres cañones de electrones, capaces de iluminar cada
tipo de fosforo en cada pixel con una intensidad distinta.
• Los puntos son lo suficientemente pequeños como para
que se perciba el color en cada pixel como una mezcla
aditiva de los tres.
En los TV con CRTs existen groupos de pixeles, con pixeles individuales R, G, B
Mezcla de colores en
dispositivos CRT (2/2)
• El color de cada pixel se especifica con
tres valores reales entre cero y uno, que
indica la intensidad relativa de cada
fósforo, respecto al máximo posible.
• En cada tipo de material, los fósforos son
distintos, y por lo tanto también lo son los
colores de cada uno de los tres tipos
 Pantallas LCD
• Una pantalla de cristal líquido (abreviado LCD) utiliza
un material líquido con propiedades ópticas especiales.
Este material es puesto entre dos electrodos
transparentes.
• Cuando se aplica un campo eléctrico, las moléculas se
organizan con el campo para formar un arreglo
cristalino ordenado, el cual polariza la luz que pasa a
través de él.
• Esta luz polarizada es entonces bloqueada por un filtro
polarizador, el cual cubre la pantalla. Si el campo está
encendido, la luz es polarizada y el píxel es oscuro.
Cuando el campo está apagado, la luz no polarizada
pasa a través del filtro y se enciende la pantalla.
 Pantallas LCD
La imagen en pantalla
es estática, y sólo es
necesario actualizar
los puntos de pantalla
que lo requieran. Por
eso estas pantallas no
parpadean. Poseen
menores niveles de luz
emitida (entonces
menos contrastes),
que los CRT.
 Mezcla de colores en
dispositivos LCD (1/2)
• En las pantallas LCD, hay una luz
blanca en la parte posterior

• En cada pixel hay tres subpixels,

cada subpixel tiene una capa de
cristal coloreado en rojo, verde
y azul.

• Cada subpixel puede iluminarse

o apagarse individualmente,
mediante una capa polarizadora
controlable que puede dejar
pasar una fraccion determinada
de la luz proveniente de la capa
trasera.
 Mezcla de colores en
dispositivos LCD (2/2)
• El efecto en cada pixel se puede emitir una luz
roja, verde o azul, o una combinación de ellas,
dando la misma funcionalidad que los monitores
CRT.

• En general, todos los dispositivos muestran

colores que son combinaciones de tres colores,
usualmente rojo, verde y azul, que se llaman
primarios
 Ejemplo de pixel y
subpixel en un monitor
• Los subpixels en las pantallas LCD suelen ser
barras rectangulares:

• obtenido de: http://en.wikipedia.org/wiki/

File:LCD RGB.jpg