Conversor de colores HEX, RGB y HSL
Convierte un color de HEX a RGB y HSL con el desglose por canales.
Rellena los campos y el resultado aparecerá aquí automáticamente.
Convierte un código hexadecimal sRGB de tres o seis cifras en RGB y HSL. Cada cifra corta se repite: #F0A se convierte en #FF00AA. RGB y el HEX completo conservan los bytes originales; HSL se redondea para mostrarlo. Las cadenas CSS usan punto decimal en todos los idiomas y pueden copiarse a una hoja de estilos.
Cómo funciona
Fórmula y lógica
Los canales r,g,b son bytes enteros entre 0 y 255. HSL divide los canales por 255: luminosidad L=(max+min)/2, saturación S=Δ/(1−|2L−1|) para Δ=max−min>0; el canal máximo determina el tono. Si Δ=0, la saturación es cero y el tono se escribe por convenio como 0°. La luminosidad HSL no es luminancia física ni una puntuación de contraste. El tono se redondea a grados y S y L a dos decimales porcentuales.
Ejemplo
#2E86DE → rgb(46, 134, 222), CSS redondeado hsl(210, 72.73%, 52.55%). #F0A → #FF00AA → rgb(255, 0, 170). Los puntos decimales de hsl() forman parte de la sintaxis CSS.
Campos y unidades
- Código de color hexadecimal — sin unidad
Cómo se usa
- — Introduce HEX como texto: #2E86DE, 2E86DE o #F0A.
- — Lee los bytes RGB exactos y el HEX completo.
- — Copia las cadenas CSS RGB/HSL; el HSL redondeado puede alterar ligeramente el color al convertirlo de nuevo.
Método y limitaciones
- Método de cálculo
- Fórmula y lógica
- Fuente de datos o norma
- W3C CSS Color 4: HEX y sintaxis HSL
- Limitación
- Solo se admite HEX sRGB opaco de 3/6 cifras. Los códigos alfa de 4/8 cifras, la entrada RGB/HSL, los perfiles de color y la evaluación de contraste accesible quedan fuera de esta calculadora.
FAQ
¿Por qué #F0A pasa a ser #FF00AA?
La forma corta se expande duplicando cada carácter: así está definido el formato. Rellenar con ceros daría otro color: #F00A00 en vez de #FF00AA.
¿Hace falta la almohadilla?
No, es opcional, y tampoco importan las mayúsculas. Tanto #2e86de como 2E86DE funcionan.
¿Qué significa la fila de luminosidad?
Es la luminosidad HSL en porcentaje: 0 es negro, 100 es blanco y alrededor de 50 es un color puro saturado. Es también el tercer número de la notación hsl().
¿En qué se diferencia la luminosidad HSL del brillo percibido?
La luminosidad usa una misma fórmula para todos los canales, mientras que el ojo ve el verde mucho más claro que el azul. Dos colores con la misma luminosidad HSL pueden verse bastante distintos, y comprobar el contraste exige otra medida.
¿Se pierde precisión en la conversión?
RGB y HEX completo conservan los bytes exactos. HSL redondea el tono a grados enteros y saturación/luminosidad a dos decimales. Convertir ese HSL redondeado de nuevo puede producir otros bytes RGB.