Conversor de colores
HEX, RGB, HSL, OKLCH y matices
Color
HEX (3, 4, 6 u 8 dígitos), rgb(), rgba(), hsl(), hsla() u oklch()
Formatos
- HEX
- #3b82f6
- RGB
- rgb(59 130 246)
- HSL
- hsl(217.2 91.2% 59.8%)
- OKLCH
- oklch(62.31% 0.188 259.81)
Matices
Matices calculados en OKLCH: mismo tono, luminosidad decreciente y croma reducido en los extremos para que cada paso quede en sRGB. El color introducido ocupa el paso más cercano. Haz clic en un matiz para copiar su valor.
Variables CSS
:root {
--brand-50: oklch(97.1% 0.014 259.815);
--brand-100: oklch(93.6% 0.031 259.815);
--brand-200: oklch(88.5% 0.056 259.815);
--brand-300: oklch(80.8% 0.097 259.815);
--brand-400: oklch(71.1% 0.151 259.815);
--brand-500: oklch(62.3% 0.188 259.815);
--brand-600: oklch(56.7% 0.184 259.815);
--brand-700: oklch(49.6% 0.165 259.815);
--brand-800: oklch(43.3% 0.139 259.815);
--brand-900: oklch(37.9% 0.117 259.815);
--brand-950: oklch(27.1% 0.083 259.815);
}Tailwind v4 (@theme)
@theme {
--color-brand-50: oklch(97.1% 0.014 259.815);
--color-brand-100: oklch(93.6% 0.031 259.815);
--color-brand-200: oklch(88.5% 0.056 259.815);
--color-brand-300: oklch(80.8% 0.097 259.815);
--color-brand-400: oklch(71.1% 0.151 259.815);
--color-brand-500: oklch(62.3% 0.188 259.815);
--color-brand-600: oklch(56.7% 0.184 259.815);
--color-brand-700: oklch(49.6% 0.165 259.815);
--color-brand-800: oklch(43.3% 0.139 259.815);
--color-brand-900: oklch(37.9% 0.117 259.815);
--color-brand-950: oklch(27.1% 0.083 259.815);
}Acerca de la herramienta
Este conversor lee un color CSS y lo muestra en HEX, RGB, HSL y OKLCH, con un botón de copia para cada formato. Acepta HEX de 3, 4, 6 u 8 dígitos y las funciones rgb(), rgba(), hsl(), hsla() y oklch(), con comas o espacios y transparencia opcional. Si un color OKLCH queda fuera del espacio sRGB, la herramienta lo indica y da el color visualizable más cercano.
También genera una escala de once matices, de 50 a 950, calculados en OKLCH: mismo tono, luminosidad decreciente y croma reducido en los extremos. El color introducido ocupa el paso con la luminosidad más parecida. Pones nombre a la paleta, eliges valores OKLCH o HEX y copias el resultado como variables CSS o como bloque @theme para Tailwind CSS v4.
Cómo usarla
- Escribe un color en el campo Color, o elígelo con el selector.
- En Formatos, copia el valor HEX, RGB, HSL u OKLCH que necesites.
- En Matices, indica el Nombre de la paleta y el Formato de los valores, OKLCH o HEX.
- Haz clic en un matiz para copiar su valor, o pulsa Copiar las variables o Copiar el bloque @theme.
Preguntas frecuentes
¿Por qué usar OKLCH en lugar de HSL?
En OKLCH, la luminosidad corresponde a la claridad percibida: dos colores con la misma L parecen igual de claros, algo que no ocurre en HSL. Eso facilita crear escalas de matices regulares, y los navegadores actuales admiten oklch() en CSS.
¿Qué ocurre con un color fuera del gamut sRGB?
Un color OKLCH puede superar lo que muestra una pantalla sRGB. La herramienta lo avisa, conserva el valor OKLCH exacto y calcula las versiones HEX, RGB y HSL reduciendo el croma, con la misma luminosidad y el mismo tono.
¿Cómo uso los matices con Tailwind CSS?
Copia el bloque @theme en tu CSS principal con Tailwind v4. Define las variables --color-nombre-50 a --color-nombre-950, lo que habilita clases como bg-nombre-500 o text-nombre-900, donde nombre es el nombre de paleta que hayas puesto.
¿Se aceptan nombres de color como red o navy?
No. La herramienta solo lee códigos hexadecimales y las funciones rgb(), rgba(), hsl(), hsla() y oklch(). Para un nombre de color CSS, introduce su equivalente hexadecimal, por ejemplo #000080 para navy.