¿Qué formatos de color genera este conversor?

Muestra HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH y OKLAB simultáneamente, más el color CSS con nombre más cercano, para cualquier color que introduzcas.

¿Qué es OKLCH y por qué convertiría a él?

OKLCH es un espacio de color perceptualmente uniforme donde la luminosidad, el croma y el tono se comportan de forma predecible. Los diseñadores migran paletas a él porque interpolar y aclarar colores en OKLCH se ve más uniforme que en HSL o RGB.

¿Cómo se elige el color con nombre más cercano?

Tu color se compara con los 148 colores CSS con nombre por distancia en RGB, y se devuelve la coincidencia más cercana. Cuando nada está realmente cerca, la herramienta lo dice en lugar de sugerir un nombre engañoso.

¿El conversor conserva el canal alfa?

Sí. Un color translúcido se muestra como HEXA (#rrggbbaa), como rgba()/hsla() y con una cola de alfa `/ 0.5` en HWB, LAB, LCH, OKLCH y OKLAB. Los colores opacos omiten el alfa por completo.

¿Puedo pegar un valor oklch() o lab() como entrada?

Sí. La entrada acepta cualquier sintaxis de color CSS, incluidas oklch(), oklab(), lab(), lch() y hwb(), y la convierte en todos los demás formatos igual que maneja hex o rgb().

¿Se envían a un servidor los colores que introduzco?

No. El análisis y cada conversión funcionan localmente en tu navegador, así que los colores que escribes o pegas nunca salen de tu dispositivo y no se suben a ArrayKit.

Conversor de formatos de color

Introduce un color en cualquier sintaxis CSS y velo como HEX, RGB, HSL, HWB, LAB, LCH, OKLCH y OKLAB a la vez, con una muestra en vivo. Todo se convierte en tu navegador.

El conversor de formatos de color analiza y convierte cada color localmente en tu navegador. Los valores que escribes o pegas nunca salen de tu dispositivo y nada se sube a ArrayKit.

Abre el conversor de colores CSS

Acerca de Formatos de color

El conversor de formatos de color toma un único color escrito en cualquier sintaxis CSS —un hex como #7c3aed, un valor rgb() o hsl(), hwb(), lab(), lch(), oklch(), oklab(), o un color con nombre como rebeccapurple— y lo muestra simultáneamente en todas las demás notaciones. Obtienes HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH y OKLAB, más el color CSS con nombre más cercano y una muestra en vivo, cada uno listo para copiar. Está pensado para diseñadores y desarrolladores de front-end que migran una paleta a espacios modernos como OKLCH, que igualan un color entre una herramienta de diseño y una hoja de estilos, o que comprueban cómo se ve un valor en un espacio perceptualmente uniforme. El alfa se conserva de principio a fin. Cada análisis y conversión funciona localmente en tu navegador, así que los colores que introduces nunca salen de tu dispositivo.

Características

Introduce un color en cualquier sintaxis CSS: hex, rgb(), hsl(), hwb(), lab(), lch(), oklch(), oklab() o un color con nombre
Ve HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH y OKLAB lado a lado, actualizados a medida que escribes
Copia con un clic cada formato individual
Muestra en vivo sobre un tablero de ajedrez para que la transparencia sea evidente
Muestra el color CSS con nombre más cercano para cualquier entrada
El alfa se conserva en HEXA, rgba()/hsla() y la sintaxis moderna `/ a`
Salida OKLCH y OKLAB para migrar paletas a espacios perceptualmente uniformes
Funciona por completo en tu navegador: los colores que introduces nunca se suben

Cómo usar Formatos de color

Escribe o pega un color en la entrada en cualquier formato CSS
Lee la muestra en vivo para confirmar que introdujiste el color correcto
Copia la notación que necesites: HEX, RGB, HSL, HWB, LAB, LCH, OKLCH u OKLAB
Toma el color con nombre más cercano cuando quieras una etiqueta legible

Ejemplo

Entrada

#7c3aed

Salida

rgb(124, 58, 237)
hsl(262, 83%, 58%)
oklch(0.5413 0.2466 292.94)

Un hex se expande en todas las notaciones de color CSS a la vez.

Errores comunes y solución de problemas

La entrada muestra "Couldn’t parse that color." — Comprueba que la sintaxis coincida con un color CSS real: p. ej. #7c3aed, rgb(124 58 237), hsl(262 83% 58%) o un nombre de color válido. Los caracteres sueltos o un % ausente rompen el análisis.
Los valores OKLCH o LCH se ven ligeramente distintos tras una ida y vuelta por hex. — Convertir a través de un espacio más amplio y de vuelta redondea cada canal, así que un valor puede desplazarse un punto o dos. La muestra sigue siendo visualmente idéntica.
El color con nombre más cercano dice que nada está cerca. — Solo existen 148 nombres CSS, así que un color de marca personalizado a menudo no tiene coincidencia cercana. Usa el valor HEX u OKLCH en lugar de un nombre.
El alfa desapareció de la salida. — El alfa solo se muestra cuando es menor que 1. Un color totalmente opaco emite #rrggbb, rgb() y hsl() sin cola de alfa.

Preguntas frecuentes

¿Qué formatos de color genera este conversor?: Muestra HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH y OKLAB simultáneamente, más el color CSS con nombre más cercano, para cualquier color que introduzcas.
¿Qué es OKLCH y por qué convertiría a él?: OKLCH es un espacio de color perceptualmente uniforme donde la luminosidad, el croma y el tono se comportan de forma predecible. Los diseñadores migran paletas a él porque interpolar y aclarar colores en OKLCH se ve más uniforme que en HSL o RGB.
¿Cómo se elige el color con nombre más cercano?: Tu color se compara con los 148 colores CSS con nombre por distancia en RGB, y se devuelve la coincidencia más cercana. Cuando nada está realmente cerca, la herramienta lo dice en lugar de sugerir un nombre engañoso.
¿El conversor conserva el canal alfa?: Sí. Un color translúcido se muestra como HEXA (#rrggbbaa), como rgba()/hsla() y con una cola de alfa `/ 0.5` en HWB, LAB, LCH, OKLCH y OKLAB. Los colores opacos omiten el alfa por completo.
¿Puedo pegar un valor oklch() o lab() como entrada?: Sí. La entrada acepta cualquier sintaxis de color CSS, incluidas oklch(), oklab(), lab(), lch() y hwb(), y la convierte en todos los demás formatos igual que maneja hex o rgb().
¿Se envían a un servidor los colores que introduzco?: No. El análisis y cada conversión funcionan localmente en tu navegador, así que los colores que escribes o pegas nunca salen de tu dispositivo y no se suben a ArrayKit.

Herramientas relacionadas

Conversor de colores CSS — Convierte entre HEX, RGB y HSL con una muestra en vivo.
Verificador de contraste — Comprueba la relación de contraste WCAG y si pasa AA/AAA entre dos colores.
Colores Tailwind — Crea una escala de tonos Tailwind 50-950 en OKLCH desde un color.
Selector de color de imagen — Toma el HEX, RGB y HSL de cualquier píxel de una imagen.
SVG a PNG — Convierte marcado SVG o un archivo .svg en un PNG o JPG nítido.
Conversor de Unidades CSS — Convierte px, rem, em, pt y % al instante con un tamaño base.