RGB y códigos hexadecimales

Con 256 niveles para el rojo, el verde y el azul, una pantalla puede representar 256 × 256 × 256 = 16 777 216 colores, y cada uno es un punto dentro de un cubo.

Tres números, tres ejes

En el espacio de color sRGB que usa la web, un color se escribe como tres valores de canal: rojo, verde y azul. En el código de uso diario, cada canal es un número entero de 0 a 255, que es el intervalo que cabe en ocho bits. Un canal en 0 significa que esa luz está apagada. Un canal en 255 significa que está encendida del todo. Así, rgb(255 0 0) es el rojo más fuerte que puede mostrar la pantalla, rgb(0 0 0) es negro y rgb(255 255 255) es blanco.

Tres números que recorren cada uno un intervalo forman una caja. Pon el rojo a lo largo de una arista, el verde en otra y el azul en la tercera, y cada color tiene un lugar dentro de un cubo. El modelo de arriba dibuja ese cubo con 512 bloques pequeños, ocho pasos a lo largo de cada arista. El negro está en una esquina. El blanco está en la esquina opuesta. Las tres esquinas junto al negro son el rojo, el verde y el azul puros. Las tres esquinas junto al blanco son cian, magenta y amarillo, cada una hecha de dos canales completos. Activa las etiquetas y sigue las aristas del negro al blanco: cada camino pasa por un color primario y uno secundario.

La línea discontinua del negro al blanco es el eje de grises. Cada punto sobre ella tiene rojo, verde y azul iguales, como rgb(128 128 128). Los colores lejos de esa línea son vivos. Los colores cerca de ella son grisáceos. Esta es la primera pista de la idea detrás del modelo HSL de la unidad siguiente: la distancia al eje de grises mide qué tan colorido es algo.

Cómo leer un código hexadecimal

CSS también permite escribir esos mismos tres números en hexadecimal, después de un signo #. El sistema hexadecimal cuenta de dieciséis en dieciséis con los dígitos del 0 al 9 y las letras de la a a la f, donde a es 10 y f es 15. Dos dígitos hexadecimales cubren 16 × 16 = 256 valores, justo un canal. Así que un código de seis dígitos son tres pares: rojo, verde, azul. CSS Color 4 señala que las mayúsculas y minúsculas no importan, así que #00ff00 y #00FF00 son el mismo color.

Para leer un par, multiplica el primer dígito por 16 y suma el segundo. Para c3 es 12 × 16 + 3 = 195. Para ff es 15 × 16 + 15 = 255, el máximo. Para 80 es 8 × 16 = 128, casi justo la mitad. Un código de tres dígitos como #f80 es una abreviatura: cada dígito se escribe dos veces seguidas, así que #f80 significa #ff8800. Escribe un código en el cuadro Hex bajo el modelo y el marcador salta a ese punto del cubo.