Conversor de colores: HEX, RGB y HSL

Tres formas de escribir un color sRGB

HEX

Notación hexadecimal compacta y común en CSS y HTML. Esta herramienta acepta los formatos #RGB y #RRGGBB, como #FF5733.

RGB

Valores de los canales rojo, verde y azul entre 0 y 255, por ejemplo rgb(255, 87, 51).

HSL

Matiz de 0° a 360°, saturación de 0 % a 100 % y luminosidad de 0 % a 100 %. Ajustar un componente puede ayudar a crear variaciones.

Ejemplos

• Rojo puro: #FF0000 → rgb(255, 0, 0) → hsl(0, 100%, 50%).
• Azul real: #4169E1 → rgb(65, 105, 225) → aproximadamente hsl(225, 73%, 57%).
• Verde claro: hsl(120, 80%, 70%) → #75F075 y rgb(117, 240, 117).

Cómo funciona la conversión

1. HEX a RGB: separa los pares hexadecimales de rojo, verde y azul y convierte cada par a un valor decimal.
2. RGB a HEX: convierte cada canal decimal en dos dígitos hexadecimales y únelos después de #.
3. RGB y HSL: el conversor aplica los cálculos habituales de canales y matiz; los valores HSL mostrados se redondean a enteros.

Cuándo usar cada formato

• HEX es compacto y habitual en CSS, HTML y herramientas de diseño.
• RGB muestra directamente los valores de los canales rojo, verde y azul.
• HSL puede ser práctico para ajustar el matiz, la saturación o la luminosidad.

Formatos admitidos y límites

• El conversor admite colores sRGB opacos en HEX corto o largo, rgb() con comas y hsl() con comas.
• El campo no admite transparencia alfa, RGBA, HSLA, la sintaxis CSS moderna separada por espacios, nombres de colores ni espacios de color de amplia gama.
• El resultado HSL se redondea a grados y porcentajes enteros; al convertirlo de vuelta puede obtenerse un color cercano, no los mismos valores de canal originales.
• El color y el resultado permanecen en este navegador; la página y su código se cargan desde el sitio web.

Preguntas frecuentes