Herramientas
Conversor de colores
Convierte un color entre HEX, RGB, HSL, OKLCH, LAB, LCH y OKLAB al instante.
#3b82f659, 130, 2460.2314, 0.5098, 0.9647217, 91%, 60%54.5 8.5 -65.554.5 66.0 277.50.64 -0.01 -0.150.64 0.15 264Sobre esta herramienta
Este conversor traduce un mismo color a ocho notaciones a la vez: HEX, RGB, RGB decimal, HSL, LAB, LCH, OKLAB y OKLCH. Es útil cuando el manual de marca da un HEX y tu hoja de estilos usa OKLCH, cuando una librería gráfica pide valores entre 0 y 1, o cuando necesitas comparar colores en un espacio perceptual como LAB antes de ajustar una paleta.
Elige en el desplegable «Formato» la notación de partida y escribe el color en «Valor». La tabla «Todos los formatos» se actualiza mientras escribes y cada fila tiene su botón para copiar. También puedes pulsar la muestra de color de la izquierda y elegir el tono con el selector del sistema. Si cambias de formato, el valor actual se reescribe en la nueva notación para que sigas desde ahí.
Todo el cálculo se hace en tu navegador con JavaScript; no se envía nada a ningún servidor. Trabaja en sRGB con iluminante D65 y redondea a 8 bits por canal, así que los colores fuera de gama se recortan al más cercano. No admite transparencia (alfa) ni HEX abreviado de tres cifras: escribe los seis dígitos.
¿Cómo se pasa un color de HEX a RGB?
- Deja «HEX» en el desplegable «Formato»; es el que aparece al abrir la página.
- Escribe o pega el color en «Valor» con sus seis cifras, con o sin almohadilla: #3b82f6, 3b82f6 y #3B82F6 valen igual.
- Mira la tabla «Todos los formatos»: la fila «RGB» muestra rgb(59, 130, 246). La tabla se actualiza con cada tecla.
- Pulsa el icono de copiar de la fila que necesites para llevarte el valor tal como se ve, listo para pegar en tu hoja de estilos o en tu programa de diseño.
¿Qué formatos de color admite?
Ocho, de entrada y de salida: HEX, RGB, «RGB decimal», HSL, LAB, LCH, OKLAB y OKLCH. En «Ejemplos de formato», debajo de la tabla, tienes un ejemplo de cómo escribir cada uno.
En los formatos de tres números basta con escribirlos en orden, separados por comas o por espacios; el nombre de la función y los paréntesis (rgb(…), hsl(…)) se pueden poner o no. En HSL el signo % es opcional, y en LAB y OKLAB los valores a y b pueden ser negativos. Usa el punto como separador decimal: 0.5, no 0,5.
Si el valor no se entiende, la tabla se cambia por el aviso «Escribe un valor de color válido para ver las conversiones». Lo más habitual es un HEX de tres cifras (#fff) o con transparencia (#ffffff80): escríbelo con seis cifras.
También puedes pulsar la muestra de color de la izquierda para abrir el selector de color del sistema. Al elegir un tono, el «Formato» pasa a HEX y la tabla se recalcula.
¿Qué diferencia hay entre HEX, RGB y RGB decimal?
Los tres describen el mismo color sRGB con tres canales: rojo, verde y azul. RGB da cada canal de 0 a 255 en base 10; HEX escribe esos mismos números en base 16, con dos cifras por canal (de 00 a ff). Así, rgb(59, 130, 246) es #3b82f6: 3b es 59, 82 es 130 y f6 es 246.
El «RGB decimal» divide cada canal entre 255 y da un número de 0 a 1 con cuatro decimales: rgb(0.2314, 0.5098, 0.9647) en el mismo ejemplo. Es la forma que piden muchos motores 3D, shaders y librerías gráficas. No es sintaxis CSS: en una hoja de estilos usa el RGB normal.
HSL describe el mismo color con tono (de 0 a 360 grados), saturación y luminosidad en porcentaje. Es más cómodo para aclarar u oscurecer un color a mano: basta con cambiar el último número.
¿Para qué sirven LAB, LCH, OKLAB y OKLCH?
Son espacios de color pensados para acercarse a cómo percibimos el color: un mismo cambio en L se ve como un cambio de claridad parecido en cualquier tono. LCH y OKLCH expresan lo mismo que LAB y OKLAB, pero con luminosidad, croma (intensidad) y tono, que es más fácil de ajustar.
La herramienta trabaja en sRGB con iluminante D65 y redondea cada canal a un número entero de 0 a 255. Si escribes un LAB o un OKLCH que queda fuera de lo que sRGB puede mostrar, el color se recorta al más cercano y los valores cambian al volver. Por la misma razón, una ida y vuelta entre formatos puede mover algún decimal.
Las filas de la tabla, salvo «RGB decimal», siguen la sintaxis de CSS: lab() y lch() con la L de 0 a 100, y oklab() y oklch() con la L de 0 a 1.
Preguntas frecuentes
¿Qué diferencia hay entre HSL y OKLCH?
Los dos describen el color con luminosidad, saturación o croma y tono, pero OKLCH está diseñado para que la luminosidad percibida sea uniforme. Dos colores con la misma L en OKLCH se ven igual de claros; en HSL no siempre ocurre.
¿Para qué sirve el RGB decimal?
Es el mismo RGB expresado de 0 a 1 en lugar de 0 a 255. Lo piden muchos motores 3D, shaders y librerías de gráficos como Three.js o Unity.
¿Por qué al convertir de ida y vuelta cambia algún decimal?
Cada conversión redondea a 8 bits por canal (0–255). Al pasar por espacios como LAB u OKLCH y volver, puede aparecer una diferencia de una unidad que a simple vista no se nota.
¿Puedo usar los valores directamente en CSS?
Sí: los formatos hex, rgb(), hsl(), lab(), lch(), oklab() y oklch() los entienden los navegadores actuales. Revisa la compatibilidad si tienes que dar soporte a navegadores antiguos.