El Convertidor de Formato de Color traduce cualquier color entre HEX, RGB, HSL, HSV y OKLCH. Elige un color con el selector nativo, escribe un valor hexadecimal, pega cualquier cadena de color CSS o ajusta los deslizadores RGB — cada formato se actualiza en vivo y cada uno tiene su propio botón de Copiar.
El CSS moderno te ofrece una docena de formas de escribir el mismo color: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), además de variantes alfa de cada uno. A menudo necesitas convertir entre ellos: un diseño de Figma te entrega un OKLCH, tu base de código utiliza HEX y tus variables de tema prefieren HSL para ajustes de hover. El Convertidor de Formato de Color hace todas las conversiones en un solo panel. Elige un color del selector de color nativo, pega un color existente en cualquier sintaxis o arrastra los deslizadores RGB para ajustarlo. Todos los formatos comunes se renderizan simultáneamente: HEX (con alfa), rgb()/rgba(), hsl()/hsla(), hsv() y oklch() — además de un fragmento de variable CSS y el valor de luminancia calculado para cálculos rápidos de contraste. El canal alfa es compatible de principio a fin. Cada formato tiene su propio botón de Copiar para usarlo con un clic, y el analizador acepta nombres de colores nativos y todo lo que admite CSS.
Muestra HEX, RGB/RGBA, HSL/HSLA, HSV y OKLCH simultáneamente — elige el formato que espere tu código objetivo sin volver a convertir cada vez.
Acepta HEX (#abc o #aabbcc o #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() y nombres de colores nativos. Pega cualquier cosa que admita CSS.
Maneja el nuevo formato OKLCH utilizado en el CSS moderno — un espacio de color perceptualmente uniforme que se está convirtiendo en el nuevo estándar del sistema de diseño.
Cada salida tiene su propio botón de Copiar. Haz clic para capturar exactamente el formato que necesitas para tu código, sin selección manual.
Ajusta los deslizadores de Rojo/Verde/Azul/Alfa para un ajuste fino. Cada formato se actualiza en tiempo real mientras arrastras.
La transparencia se maneja en todos los formatos: #RRGGBBAA, rgba(...), hsla(...). Configura una vez, convertido en todas partes.
Figma te entrega un OKLCH o HSL — pégalo, copia el equivalente HEX para tu configuración de Tailwind o variables CSS sin salir del navegador.
Arrastra los deslizadores para explorar tonos, anotando los valores OKLCH para una paleta sistemática del sistema de diseño.
Convierte un color de marca a su forma HSL para que puedas usar hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) para estados de hover.
El campo de luminancia te da el valor bruto utilizado en los cálculos de contraste WCAG — útil para las matemáticas de accesibilidad.
Pega un oklch(...) de un archivo CSS que estés leyendo y mira instantáneamente qué color produce realmente.
Haz clic en el ícono de Formatos de Color en el dock de DevSuite Pro. Se abre un panel con un selector de color, entrada hexadecimal y deslizadores RGB.
Usa el selector de color, escribe un hexadecimal o pega cualquier cadena de color CSS (rgb(...), oklch(...), etc.). El color se previsualiza al instante.
Cada formato se renderiza abajo: HEX, RGB, HSL, HSV, OKLCH, variable CSS y luminancia. Todos se mantienen sincronizados mientras ajustas.
Arrastra los deslizadores R/G/B/A para ajustes finos. Ideal para marcar un tono específico que coincida con una especificación de diseño.
Haz clic en Copiar en la fila del formato que desees — el valor aterrizará en tu portapapeles en la sintaxis correcta.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
