¿Cómo convierto HEX a RGB, HSL, OKLCH y CMYK?
Escribe un color en un formato y la herramienta muestra en vivo todos los demás: HEX, RGB, HSL, HSV, OKLCH, LCH, Lab, CMYK.
Más un cuentagotas de pantalla (Chrome / Edge): pulsa cualquier píxel de tu escritorio (también funciona fuera de la ventana del navegador).
Todo se ejecuta en local: los colores no salen del navegador.
Pensado para desarrolladores web (HEX/RGB/OKLCH para CSS), trabajo de DTP (CMYK para imprenta) y color scientists (Lab/LCH para matemáticas de diferencia de color).
Cómo usarlo
- Escribe un color en el input HEX (columna izquierda) o usa el cuentagotas: "Tomar de pantalla" muestrea cualquier píxel de tu escritorio.
- A la derecha, cada formato se actualiza en vivo: RGB, HSL, HSV, OKLCH, LCH, Lab, CMYK. Cada bloque tiene sliders de canal: editar un formato actualiza los demás.
- Cada bloque tiene un botón "Copiar" que copia la cadena lista para CSS (p. ej. `oklch(0.51 0.18 264.5)`).
- "Nombre CSS más cercano" bajo el swatch muestra el color CSS con nombre al que estás más cerca (p. ej. mediumslateblue).
- En la parte inferior del panel izquierdo: 8 colores Tailwind populares como presets, ideales para arrancar una paleta.
Cuándo es útil
Quién se beneficia del conversor de colores - roles típicos:
- Desarrollador web: tienes un HEX de Figma y necesitas OKLCH para CSS moderno. Pega y listo.
- DTP / imprenta: HEX del brand book, la imprenta quiere CMYK. Nota: el nuestro es aproximado; para producción pre-press usa el perfil ICC de la imprenta.
- Migración a OKLCH: Tailwind v4 y Radix Colors usan OKLCH. Conversión fácil de una paleta HEX antigua al formato moderno.
- Color scientist: Lab y LCH son el estándar para ΔE 2000 (diferencia de color). Expórtalo a tus matemáticas.
- Branding: OKLCH muestra que el tono (h) se mantiene consistente al cambiar la luminosidad, a diferencia de HSL.
Una vez tengas tu color base, construye una escala completa 50-950 en el generador de paleta Tailwind, encuentra acentos a juego con la herramienta de armonía de colores y verifica tu par texto/fondo contra WCAG en el verificador de contraste.