Tres notaciones, un color
Elige un color visualmente o escribe un código HEX, y la herramienta muestra las tres notaciones CSS una al lado de otra; pulsa cualquier valor para copiarlo. Describen exactamente el mismo color, solo que en sistemas de coordenadas distintos:
| Formato | Ejemplo | Qué significan los números |
|---|---|---|
| HEX | #7c5cfc | Rojo, verde, azul como pares hex, 00–ff |
| RGB | rgb(124, 92, 252) | Los mismos tres canales en decimal, 0–255 |
| HSL | hsl(252, 96%, 67%) | Tono en la rueda de color (0–360°), saturación, luminosidad |
Ejemplo resuelto: leer #7c5cfc
De HEX a RGB es conversión de base directa: 7c = 7×16+12 = 124 de rojo, 5c = 92 de verde, fc = 252 de azul. El azul es el canal más fuerte con algo de rojo mezclado, así que el color cae en el rango violeta; el HSL lo confirma: el tono 252° está entre el azul (240°) y el magenta (300°), la saturación 96% significa que es casi puro, y la luminosidad 67% lo sitúa en el lado pálido del punto medio. HEX y RGB son notaciones intercambiables de los mismos valores; el HSL es un remapeo genuino, por eso sus valores parecen no relacionados a primera vista.
Qué formato cuándo
- HEX es el valor por defecto compacto para CSS, entregas de diseño y guías de marca: fácil de copiar, difícil de teclear mal.
- RGB se corresponde con cómo funcionan realmente las pantallas y las API gráficas, y se extiende de forma natural a la transparencia como
rgba(). - HSL es el formato para ajustar colores: ¿necesitas un estado hover? Mantén el tono y la saturación, baja la luminosidad un 10%. ¿Necesitas un acento complementario? Rota el tono 180°. Hacer esas cuentas en HEX es un suplicio; en HSL es un solo número.
Un flujo de trabajo práctico: elige el color de tu marca con el selector visual, copia el valor HSL y deriva tu paleta (hover, bordes, fondos) variando solo la luminosidad; los tonos quedan visualmente relacionados de forma automática.
Reglas de entrada y privacidad
El campo de texto acepta códigos HEX completos de seis dígitos con un # inicial (la forma abreviada como #fff debe expandirse a #ffffff). El selector actualiza todos los formatos en vivo, y los valores HSL se redondean a números enteros, así que la conversión de vuelta puede desplazar un valor en ±1, algo invisible en pantalla. Toda la conversión corre por completo en tu navegador; no se envía nada a ningún servidor.