HEX, RGB y HSL explicados: cómo elegir y convertir colores web
Comprende los formatos de color más usados en CSS, la transparencia y por qué convertir un color no garantiza buen contraste.
HEX, RGB y HSL son formas distintas de describir colores para pantallas. Una conversión correcta puede representar el mismo color con otra notación, pero cada formato facilita tareas diferentes. Comprenderlos ayuda a mantener un sistema visual coherente y a evitar valores copiados sin contexto.
RGB: canales de luz
RGB indica la intensidad de rojo, verde y azul. En CSS tradicional, cada canal usa valores de 0 a 255. Negro es rgb(0, 0, 0), blanco es rgb(255, 255, 255) y un rojo puro es rgb(255, 0, 0).
La transparencia puede añadirse mediante un canal alfa. Un valor alfa de 0 es transparente y 1 es opaco. El color final visible depende entonces del fondo sobre el que se compone.
HEX: representación compacta de RGB
HEX utiliza dos dígitos hexadecimales para cada canal. #FF0000 equivale a rojo 255, verde 0 y azul 0. Los dígitos van de 0 a 9 y de A a F, por lo que FF representa 255.
La forma corta #RGB solo sirve cuando cada dígito se repite: #3A7 equivale a #33AA77. También existe una notación con alfa, pero conviene confirmar la compatibilidad del entorno objetivo.
HSL: tono, saturación y luminosidad
HSL separa el tono en un círculo de grados, la intensidad del color y su luminosidad. Resulta práctico para crear variantes: puedes mantener el tono y reducir la saturación o aumentar la luminosidad. Sin embargo, cambios numéricos iguales no producen siempre la misma diferencia perceptual en colores distintos.
.button {
background: hsl(265 80% 55%);
color: #ffffff;
}Convertir sin cambiar el color
El Convertidor de colores de ToolBlur muestra valores equivalentes HEX, RGB y HSL con una vista previa. Debido al redondeo, una conversión repetida puede cambiar mínimamente algunos números. Guarda un formato canónico en tu sistema de diseño para evitar variaciones innecesarias.
Formato y accesibilidad son problemas distintos
Un color válido no es automáticamente accesible. El contraste depende de la combinación entre primer plano y fondo, además del tamaño y grosor del texto. Comprueba estados normal, hover, focus y disabled. No utilices solo el color para comunicar un error o éxito; añade texto, iconos o estructura.
Consejos para un sistema de colores
- Define nombres por función, como
--color-text, no solo por apariencia. - Mantén una fuente única para los valores.
- Documenta fondos sobre los que puede utilizarse cada color.
- Prueba modo claro, oscuro y alto contraste.
- Evita crear decenas de variantes casi idénticas.
Preguntas frecuentes
¿HEX ofrece más colores que RGB?
No cuando ambos utilizan canales de 8 bits. Son notaciones distintas para el mismo espacio de valores.
¿HSL es más preciso?
No necesariamente. Es una organización más intuitiva para ciertos ajustes, no un aumento automático de precisión.
¿Por qué un color se ve diferente en dos pantallas?
Calibración, brillo, perfil de color, tecnología del panel y condiciones ambientales influyen en la percepción.