Cuando eliges un color de una imagen obtienes el mismo color en tres notaciones. Son intercambiables, pero cada una es mejor para una tarea distinta.
HEX
Un código HEX como #C94C1A es una forma compacta de escribir rojo, verde y azul como tres pares de dígitos hexadecimales, cada uno de 00 a FF (0 a 255). Es el valor por defecto en las herramientas de diseño y las guías de marca, fácil de copiar y pegar, y con amplio soporte. Se permite una forma abreviada de tres dígitos como #fff cuando cada par repite un dígito.
RGB
rgb(201, 76, 26) enumera los mismos tres canales en decimal. Es más fácil de leer numéricamente, y es el formato para usar cuando quieres transparencia con rgb(201 76 26 / 50%) en CSS moderno, o cuando calculas colores en código, donde los canales son números normales.
HSL
hsl(16, 77%, 44%) describe un color por su matiz (la posición en el círculo cromático, de 0 a 360 grados), su saturación (qué tan vivo es) y su luminosidad (qué tan claro u oscuro). HSL se parece a cómo la gente piensa en el color, lo que lo hace el mejor formato para crear variaciones:
- Baja la luminosidad para un tono más oscuro en los estados de hover.
- Súbela para un tono claro en los fondos.
- Cambia solo el matiz para encontrar vecinos armoniosos.
- Reduce la saturación para una versión apagada.
Cuál copiar
- Entregar un color a un diseñador o cliente: HEX.
- Escribir CSS que necesita opacidad o cálculos: RGB.
- Crear una escala o un tema: HSL.
Los tres describen el mismo color en el espacio sRGB, así que convertir entre ellos no pierde información, salvo el redondeo de los valores HSL a números enteros.
Revisa antes de decidir
Un color que se ve bien no siempre es legible como texto. Usa el verificador de contraste para comparar el color elegido con el fondo, buscando una relación de al menos 4.5 a 1 para texto normal.
Preguntas frecuentes
¿Por qué HSL muestra números ligeramente distintos al convertir de vuelta? Por el redondeo a números enteros. La diferencia visual es imperceptible.