Español
Convierte entre HEX, RGB, HSL y OKLCH con vista previa en vivo.
Última actualización
Coddy te enseña escribiendo código real en tu navegador: lecciones interactivas, feedback al instante y ayuda de IA cuando te atascas.
Un conversor de colores toma un color en cualquier formato habitual - HEX, RGB, HSL, OKLCH - y te muestra todos los demás formatos que representan ese mismo color. Es la herramienta del día a día para diseñadores y desarrolladores cuando hay que igualar colores de marca, depurar variables CSS, comparar paletas de modo claro y oscuro o revisar el contraste de accesibilidad.
CSS soporta varios modelos de color, y cada uno tiene sus puntos fuertes. HEX y RGB describen los colores en términos de luz roja, verde y azul. HSL es más intuitivo (tono, saturación, luminosidad). OKLCH es un modelo perceptual donde cambios numéricos iguales se ven como cambios perceptuales iguales - muy útil para generar tintes, sombras y paletas accesibles.
La accesibilidad sale del contraste, no solo del color. WCAG define una relación de contraste entre texto y fondo: al menos 4.5:1 para texto normal y 3:1 para titulares grandes. Una buena herramienta de color te muestra ambos números junto a tu color para que no acabes publicando una UI inaccesible sin querer.
#ff8800 es exactamente lo mismo que rgb(255, 136, 0).L en OKLCH se percibe como prácticamente el mismo cambio de luminosidad para cualquier tono. HSL no se comporta así.Pega cualquier valor HEX, RGB, HSL u OKLCH, o elige un color con el cuentagotas o el selector nativo.
El conversor muestra el mismo color expresado en cada formato compatible. Haz clic en cualquier valor para copiarlo al portapapeles.
Mueve el slider de luminosidad para conseguir tintes (más claros) y sombras (más oscuros). Usa la luminosidad de OKLCH si quieres pasos visualmente consistentes.
El panel de contraste muestra la relación WCAG frente a blanco y frente a negro. Apunta a ≥ 4.5 para texto de cuerpo y ≥ 3 para titulares grandes.
Usa el formato que encaje con tu código - HEX para tokens de diseño, OKLCH para paletas modernas, HSL si vas a hacer ajustes con calc().
Los cinco formatos con los que te vas a topar a diario, con ejemplos del mismo color. Referencia completa de sintaxis en la página <color> de MDN.
| Formato | Sintaxis | Ejemplo (naranja) |
|---|---|---|
| HEX | #RRGGBB o #RGB | #ff8800 |
| HEX con alfa | #RRGGBBAA | #ff880080 (50% transparente) |
rgb() | Rojo, verde, azul de 0 a 255 | rgb(255 136 0) |
rgb() con alfa | Sintaxis moderna con barra | rgb(255 136 0 / 0.5) |
hsl() | Tono 0–360°, saturación 0–100%, luminosidad 0–100% | hsl(32 100% 50%) |
oklch() | Luminosidad 0–100%, croma, tono | oklch(74% 0.18 50) |
| Con nombre | Color con nombre de CSS (hay 147) | darkorange |
color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);Las cuatro declaraciones producen exactamente el mismo azul. Elegir una u otra para tus tokens de diseño depende sobre todo de cómo quieras retocarlos más adelante.
--brand: oklch(67% 0.16 268);--brand-light: oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark: oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);Manteniendo fijos el tono (268) y el croma, y variando solo la luminosidad, obtienes una paleta consistente en la que cada paso *se ve* como el mismo salto - algo que HSL no garantiza.
background: rgb(108 140 255 / 0.5);background: #6c8cff80;/ 0.5 es la forma moderna de añadir alfa en CSS. La variante HEX agrega un byte de alfa de dos dígitos (80 ≈ 50%).
hsl(60 100% 50%) (amarillo) y hsl(240 100% 50%) (azul) tienen la misma L, pero un brillo percibido muy diferente - usa OKLCH si vas a comparar visualmente.#abc) es la abreviatura de la forma de 6 dígitos (#aabbcc).rgba(...) en vez de la sintaxis moderna rgb(... / alfa) - las dos funcionan, pero la forma con barra es la del spec actual y se lee mejor en herramientas.#RR, GG, BB) y pasa cada par de hexadecimal a decimal. O pega el valor en un conversor de colores y verás el resultado RGB al instante.L no siempre se ve igual de brillante. OKLCH sí es perceptualmente uniforme, así que va mejor para generar tintes, sombras y paletas accesibles consistentes.