Colores en CSS
El uso del color en CSS es muy sencillo, lo único que tenemos que saber es que existen varias formas de expresar en valor de un color.
A saber, colores con nombre, colores del sistema, notación rgb (hexadecimal y funcional).
1. Colores con nombre
CSS2 admite 16 palabras clave para denotar colores, no lo se a ciencia cierta, pero esto parace una reminiscencia de cuando los monitores solo soportaban 16 colores; jo, que viejo soy.
Estas palabras clave son:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, y yellow
Existen otras palabras clave para colores como dark-red y cosas asi, pero son propietarias, esto quiere decir que no podemos tener la seguridad de que sean interpretadas correctamente en cualquier navegador.
De cualquier forma, el estandar solo hace referencia a las palabras claves usadas para designar el color, no al color exacto que corresponde a cada palabra, así que es posible (aunque improbable) que dos navegadores distintos interpreten "red" como dos tonos de rojo distintos.
2. Colores del sistema
También mostrar colores en nuestra hoja de estilo usando los colores del sistema de nuestro usuario.
De entrada no me gusta la idea de dejar la presentación de mis páginas en manos de "terceros", pero sin duda es una opción interesante para aumentar la accesibilidad de nuestro sitio. Pensad si no, en una persona con problemas visuales que tenga configurado su sistema operativo con un esquema de color en alto contraste, por ejemplo. Seguro que nos agradece poder ver nuestra web de la misma forma.
De cualquier forma, copio y pego la lista de palabras claves para colores del sistema:
- ActiveBorder
- Borde de la ventana activa.
- ActiveCaption
- Título de la ventana activa.
- AppWorkspace
- Color de fondo de una interfaz de documentos múltiples.
- Background
- Fondo del escritorio.
- ButtonFace
- Color de la cara de los elementos tridimensionales de la pantalla.
- ButtonHighlight
- Sombra oscura de los elementos tridimensionales de la pantalla (para los bordes más alejados de la fuente luminosa).
- ButtonShadow
- Color de la sombra de los elementos tridimensionales de la pantalla.
- ButtonText
- Texto de los botones.
- CaptionText
- Texto de los títulos, cajas de dimensiones y cajas de flechas de las barras de desplazamiento.
- GrayText
- Texto grisado (deshabilitado). Este color es fijado en #000 si el manejador de pantalla actual no soporta un color gris sólido.
- Highlight
- Item(s) seleccionados en un control.
- HighlightText
- Texto del(los) item(s) seleccionados en un control.
- InactiveBorder
- Borde de la ventana inactiva.
- InactiveCaption
- Título de la ventana inactiva.
- InactiveCaptionText
- Color del texto de un título inactivo.
- InfoBackground
- Color de fondo de los controles de sugerencias (tooltip).
- InfoText
- Color del texto de los controles de sugerencias (tooltip).
- Menu
- Fondo del menu.
- MenuText
- Texto de los menúes.
- Scrollbar
- Area gris de la barra de desplazamiento.
- ThreeDDarkShadow
- Sombra oscura de los elementos tridimensionales de pantalla.
- ThreeDFace
- Color de la cara de los elementos tridimensionales de pantalla.
- ThreeDHighlight
- Color resaltado de los elementos tridimensionales de pantalla.
- ThreeDLightShadow
- Color claro de los elementos tridimensionales de pantalla (para los bordes enfrentados a la fuente luminosa).
- ThreeDShadow
- Sombra oscura de los elementos tridimensionales de pantalla.
- Window
- Fondo de la ventana.
- WindowFrame
- Marco de la ventana.
- WindowText
- Texto de las ventanas.
3. Notación rgb
La notación rgb se basa en la teoría del color, donde se explica que en sistemas de aditivos (donde se emite luz) cualquier color puede ser formado por la combinación de los colores rojo (R), verde (G) y azul en distintas proporciones.
No voy a extenderme en esto, pero si te interesa seguro que un paseo por la wikipedia te ayudará bastante.
La cosa es que podemos definir un color para un medio aditivo (como una tv, la pantalla teléfono movil, o nuestro monitor) combinando distintas combinaciones de rojo, verde y azul, en un rango que va desde el 0 al 255. (oops, entre 0 y 255 hay 256 valores, 256 = 28 ≡ 1 byte, que curioso...)
De esta forma, tenemos combinaciones como esta.
No voy a seguir, la combinatoria me aplasta (255 × 255 × 255 = 16.581.375)
3.1 Notación hexadecimal
Es definitvamente la más usual de todas, basta con expresar cada valor [0-255] de rojo, verde o azul en notación hexadecimal, y comenzar con una # (almohadilla)
-
.rojo{
-
color:#FF0000;
-
}
-
-
.verde{
-
color:#00FF00;
-
}
-
-
.azul{
-
color:#0000FF;
-
}
La primera pareja de digitos hexadecimales corresponden al rojo, la segunda al verde y la tercera al azul, tambien podemos usar la forma abreviada:
-
.rojo{
-
color:#F00;
-
}
-
-
.verde{
-
color:#0F0;
-
}
-
-
.azul{
-
color:#00F;
-
}
donde cada digito se expande por repetición (no por adición de ceros). Para entendernos:
#AFE = #AAFFEE
#AFE ≠ #A0F0E0
3.2 Notación funcional
Los colores RGB se expresan usando la sintaxis rgb(rojo,verde,azul), con valores para rojo, verde y azul en notación decimal (la de toda la vida)
-
.rojo{
-
color:rgb(255,0,0);
-
}
-
-
.verde{
-
color:url(0,255,0);
-
}
-
-
.azul{
-
color:url(0,0,255);
-
}
o como porcentajes:
-
.rojo{
-
color:rgb(100%,0,0);
-
}
-
-
.verde{
-
color:url(0,100%,0);
-
}
-
-
.azul{
-
color:url(0,0,100%);
-
}
Si nos pasamos de rango, realmente no pasa nada, ya que los valores se recortaran para que esten dentro de la gama de color de la que disponemos.
Esto quiere decir que un valor rgb(300,0,0) será interpretado como rgb(255,0,0).
Al menos si observamos nuestra web en un monitor tradicional, ya que existen otros tipos de dispositivos, como algunas impresoras, que admiten otros rangos de color, en cuyo caso el valor "300", será respetado.
Como soy daltonico funcional (fucsia, magenta, rosa-chicle, y el rojo pastel, siempre me parecieron iguales), creo que esto es hilar muy fino, pero ahi está.
Utilidades
Habitualmente uso dos programitas que me resultan bastante utiles a la hora de encotrar el valor para ese tono de azul electrico que desea el cliente, y no quiero abrir photoshop.
- Cute Color:
- Un selector de color, liviano y funcional. Tiene una paleta de colores y un cuentagotas para elegir el que queramos. Además nos muestra la notación de color en hexadecimal.
Muy cómodo. - Color Scheme Studio
-
Genera esquemas de color armónicos, triadas y cosas así.
Curioso.