¿Como funcionan los códigos de colores CSS?

¿Es útil conocer el funcionamiento de los colores usados en CSS?, porque bien pensado podríamos utilizar alguna herramienta online, Photoshop, o simplemente consultar una página como Html Color Codes.

La verdad es que en algunas ocasiones es más cómodo establecer un color manualmente, por ejemplo un color primario, o si tras elegir un color determinado quieres oscurecerlo o aclararlo un poco. Y bueno dado que este sistema de colores es realmente simple, creo que vale la pena conocerlo.

Colores RGB o RVA

Los códigos de colores RGB o RVA, están representados por 3 pares de caracteres Hexadecimales (De 0 a 9 y de A hasta F), pudiendo llegar a obtener más de 16 millones de colores distintos.

Rojo, Verde y Azul (#000000), cada par es un color primario, que va desde 00 hasta FF. El primer caracter de cada par equivale a la intensidad y el segundo al color.

Todos los demás colores se obtienen aumentando los valores de estos 3 pares, por ejemplo los colores primarios se obtienen aumentando tan solo uno de los pares.

• #FF0000
• #00FF00
• #0000FF

Lógicamente combinando los 3 colores primarios obtenemos el color blanco y mediante la ausencia de cualquiera de los tres colores obtenemos el negro.

• #FFFFFF
• #000000

Además, mediante las distintas combinaciones de 2 primarios, obtenemos colores tales como Amarillo, Magenta o Cyan.

• #FFFF00
• #FF00FF
• #00FFFF

A partir de ahí, tan solo debemos realizar diferentes combinaciones para ir obteniendo el resto de los colores secundarios y terciarios.

• #FF8800
• #880000
• #8800FF
• #888888

Aclarar u oscurecer un color

Añadiéndole un poco más de complejidad al asunto, podemos aclarar u oscurecer un determinado color aumentando o disminuyendo el primer carácter de cada uno de los pares.

Oscurecer un color

• #8F0000
• #4F0000
• #2F0000
• #0F0000

Aclarar un color

• #8F0000
• #BF0000
• #DF0000
• #FF0000

El ejemplo está hecho con un color primario, sin embargo ocurre lo mismo con cualquier otro color, variando el primer caracter de cada par (#00 00 00), obtenemos distintas tonalidades de ese mismo color.