Elige visualmente o pega cualquier valor — HEX, RGB, HSL, OKLCH y OKLAB se mantienen sincronizados. Incluye un comprobador de contraste WCAG 2.2 y un generador de paletas basado en OKLCH. Funciona totalmente en tu navegador.
Elige visualmente o pega cualquier valor — HEX, RGB, HSL, OKLCH y OKLAB se mantienen sincronizados. Incluye un comprobador de contraste WCAG 2.2 y un generador de paletas basado en OKLCH. Funciona totalmente en tu navegador.
Pega tu valor hex (p. ej. #ff5722) en el campo HEX — la fila RGB se actualizará al instante. De igual modo, pega rgb(255 87 34) en el campo RGB y HEX, HSL, OKLCH y OKLAB se sincronizarán. La conversión es bidireccional entre todos los formatos compatibles.
OKLCH es un espacio de color de CSS Color Module Level 4 que utiliza luminosidad perceptual (L), croma (C) y tono (h) — como HSL, pero perceptualmente uniforme. Dos colores OKLCH con el mismo valor de L se ven igual de brillantes, incluso con tonos distintos. Esto hace que los tokens de diseño, las paletas generadas y las rampas de color accesibles sean mucho más predecibles que con HSL. Todos los navegadores actualizables (Chrome 111+, Safari 15.4+, Firefox 113+) lo admiten.
Los valores de color nunca salen de tu dispositivo. Abre DevTools → Network y verás cero peticiones salientes durante la conversión, la selección, la generación de paletas o la comprobación de contraste.
De los sistemas de diseño a las auditorías de accesibilidad — todos los formatos y comprobaciones que necesitas, en un solo lugar.
Conversión de ida y vuelta entre HEX (3 / 4 / 6 / 8 dígitos), RGB(A), HSL(A), OKLCH, OKLAB y colores CSS con nombre. Las cadenas de salida cumplen la sintaxis de CSS Color Module Level 4 — pégalas directamente en tus hojas de estilo.
Consulta la relación de contraste entre dos colores cualesquiera con insignias de aprobado/no aprobado con un clic para AA (4.5 : 1) y AAA (7 : 1), tanto en tamaño normal como grande. El cálculo coincide con la referencia del W3C: linealización sRGB, luminancia relativa y luego (L1+0.05)/(L2+0.05).
Haz clic en el cuentagotas para capturar cualquier color de tu pantalla — diseños, capturas, fotos, incluso otras pestañas del navegador. Usa la API nativa EyeDropper en navegadores Chromium.
Genera 9 pasos de tintes y sombras más armonías complementarias, triádicas y análogas — derivadas en OKLCH para que cada paso esté espaciado de forma perceptualmente uniforme (a diferencia de HSL, donde la luminosidad varía mucho).
Cada conversión se ejecuta en JavaScript en tu dispositivo. Nada se sube, registra ni envía a terceros — abre DevTools → Network si quieres comprobarlo tú mismo.
JavaScript puro, sin runtime de framework. La carga en frío es de menos de 50 KB comprimidos con gzip; las conversiones y la generación de paletas terminan en menos de un milisegundo en un portátil de cinco años.
Cuatro formas de empezar, todos los formatos sincronizados.
Arrastra dentro del cuadrado de saturación/valor para elegir el matiz, desliza la barra de tono debajo para cambiar el color base y usa el deslizador alfa para la transparencia. Cada formato de la derecha se actualiza al instante.
Pega un HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) o incluso un color CSS con nombre (tomato) en la entrada correspondiente — el selector y los demás formatos se sincronizarán.
Haz clic en el botón del cuentagotas para capturar cualquier píxel de tu pantalla — otra pestaña, una captura, una foto, un icono. Usa la API nativa EyeDropper en Chrome, Edge y Opera.
Haz clic en el icono de copiar junto a cualquier formato para enviarlo al portapapeles. O desplázate hasta la sección de contraste WCAG 2.2 para comprobar si tu combinación de primer plano / fondo aprueba AA o AAA en tamaños de texto normal y grande.
Una herramienta de color que se adapta a cuatro flujos de trabajo comunes.
Convierte los valores HEX de marca a OKLCH para que cada matiz de tu rampa de tokens tenga el mismo paso de luminosidad perceptual. Pega la salida OKLCH directamente en tu CSS — sin necesidad de preprocesador.
Introduce pares de primer plano / fondo y lee la relación de contraste junto con las insignias AA / AAA. Detecta combinaciones que no cumplen antes de publicar — cumple los umbrales obligatorios del W3C de 4.5 : 1 normal / 7 : 1 mejorado.
¿Tienes un HEX de un mockup pero necesitas un HSL para una configuración de Tailwind o un OKLCH para una hoja de estilos moderna? Pega una vez, copia en cualquier formato. Las cadenas de salida son sintaxis válida de CSS Color Module Level 4.
Elige un color base y observa al instante nueve tintes y sombras espaciados perceptualmente más armonías complementarias, triádicas y análogas — generadas en OKLCH para que cada paso parezca igual de brillante.
Los valores de color nunca salen de tu dispositivo. Abre DevTools → Network y verás cero peticiones salientes durante la conversión, la selección, la generación de paletas o la comprobación de contraste.
Tutoriales seleccionados para diseñadores, desarrolladores y equipos de accesibilidad.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Pega tu valor hex (p. ej. #ff5722) en el campo HEX — la fila RGB se actualizará al instante. De igual modo, pega rgb(255 87 34) en el campo RGB y HEX, HSL, OKLCH y OKLAB se sincronizarán. La conversión es bidireccional entre todos los formatos compatibles.
OKLCH es un espacio de color de CSS Color Module Level 4 que utiliza luminosidad perceptual (L), croma (C) y tono (h) — como HSL, pero perceptualmente uniforme. Dos colores OKLCH con el mismo valor de L se ven igual de brillantes, incluso con tonos distintos. Esto hace que los tokens de diseño, las paletas generadas y las rampas de color accesibles sean mucho más predecibles que con HSL. Todos los navegadores actualizables (Chrome 111+, Safari 15.4+, Firefox 113+) lo admiten.
Sí. Usamos el algoritmo de WCAG 2.2 §1.4.3: linealizar cada canal sRGB, calcular la luminancia relativa (0.2126·R + 0.7152·G + 0.0722·B) y luego (L_más_clara + 0.05) / (L_más_oscura + 0.05). AA aprueba con 4.5 : 1 para texto normal y 3 : 1 para texto grande (18 pt+ o 14 pt+ en negrita). AAA aprueba con 7 : 1 y 4.5 : 1 respectivamente.
Sí — haz clic en el botón de cuentagotas para abrir la API EyeDropper integrada en el navegador. Puedes capturar cualquier píxel en cualquier parte de la pantalla: otra pestaña del navegador, un diseño de Figma, un fotograma de vídeo, incluso una captura. Compatible actualmente con Chrome, Edge y Opera; Firefox y Safari degradan con elegancia (el botón aparece desactivado).
No. El selector, todas las conversiones, el generador de paletas y el comprobador de contraste se ejecutan en tu navegador. Nunca se transmiten valores de color, muestras de imagen ni texto. Puedes abrir DevTools → Network y comprobar que no hay ninguna petición saliente durante el uso.