Códigos de color en la web: HEX, RGB y HSL
En el desarrollo web, los colores se definen principalmente mediante tres formatos: HEX, RGB y HSL. Esta herramienta convierte al instante cualquier color a los tres formatos y muestra también el nombre CSS y el color complementario.
Códigos de color HEX
HEX es el formato de color más común en la web. Se escribe como #RRGGBB, donde cada par indica la intensidad de un canal (Rojo, Verde, Azul) de 00 a FF (0–255). Con 256 valores por canal, HEX soporta 16.777.216 colores. La notación abreviada #RGB también es válida: #F06 → #FF0066. HEX se usa en CSS (color: #FF5733;), Figma y todas las herramientas de diseño.
Modelo de color RGB
RGB refleja la estructura física de las pantallas. Cada canal toma valores de 0 a 255. En CSS: rgb(255, 87, 51) o con transparencia rgba(255, 87, 51, 0.8).
Modelo de color HSL
HSL (Tono-Saturación-Luminosidad) es más intuitivo para diseñadores. Tono (Hue): 0–360° en la rueda cromática. Saturación: 0%=gris, 100%=color vivo. Luminosidad: 0%=negro, 50%=normal, 100%=blanco. Crear tonos claros u oscuros es simple: mantener tono y saturación, ajustar luminosidad.
Colores complementarios
Los colores complementarios están a 180° el uno del otro en la rueda de colores: Rojo ↔ Cian, Verde ↔ Magenta, Azul ↔ Amarillo. Crean el máximo contraste y se usan en botones CTA y visualizaciones de datos.
Accesibilidad web (WCAG)
Aprox. el 8% de los hombres tienen daltonismo. WCAG 2.1 AA exige una relación de contraste de al menos 4,5:1 para texto normal. Nunca transmitas información solo mediante color.
Colores CSS con nombre
CSS define 148 colores con nombre (red, navy, coral, teal, etc.). Esta herramienta los reconoce automáticamente y muestra el nombre.
Privacidad
Todos los cálculos se realizan localmente en tu navegador. No se envían datos a ningún servidor.
Además de mostrar HEX, RGB y HSL, esta herramienta normaliza el color introducido por el usuario. Si se escribe un valor abreviado como #3af, se expande a seis dígitos; si el formato no coincide con #RRGGBB, no se actualizan los resultados. El panel de vista previa se alimenta del mismo color normalizado, así que es fácil comprobar visualmente si el tono introducido coincide con lo esperado antes de copiarlo.
La conversión RGB separa los canales rojo, verde y azul en valores de 0 a 255. La conversión HSL calcula matiz, saturación y luminosidad, lo que resulta más cómodo cuando se necesita ajustar una familia de colores sin cambiar totalmente su identidad. El complemento se calcula rotando el matiz 180 grados y manteniendo saturación y luminosidad, por eso sirve como referencia rápida para acentos o contrastes cromáticos. La herramienta también compara el HEX con una tabla de colores CSS con nombre y muestra el nombre cuando existe una coincidencia exacta.
Los botones de copia permiten llevar cada representación por separado a CSS, documentación o herramientas de diseño. Aun así, el color no debe evaluarse solo por su código. Para texto, iconos y botones conviene revisar contraste, estados de foco y hover, fondo claro u oscuro y consistencia con el resto de la paleta. El recordatorio WCAG del panel lateral apunta a esa necesidad: un color bonito puede no ser suficiente si el texto queda por debajo del contraste mínimo o si dos estados se distinguen solo por una diferencia de tono muy sutil.
Comentarios