Estudio de conversión de color
Escribe un código hex, una palabra clave de CSS o una función oklch() entera y obtén al instante todas las demás notaciones. Después crea una rampa, comprueba el contraste, simula cómo se ve para quien tiene daltonismo y llévate la paleta contigo.
El hex de 3, 4, 6 u 8 dígitos y las funciones rgb() y hsl() se entienden sin ayuda del navegador.
El CMYK de aquí es la conversión aritmética simple, no una separación ICC. Un CMYK listo para imprenta depende del papel, la tinta y el perfil de salida, y no se puede deducir de un valor sRGB por sí solo.
Titular grande a 24 píxeles
Subtítulo a 16 píxeles, seminegrita
Texto de cuerpo a 13 píxeles. Este es el tamaño que decide si una pareja de colores sirve de verdad.
A la inversa, usando el fondo como color de texto: Lc -60.3
Por debajo de ΔE 0,05 dos muestras son el mismo color para esa persona, así que una paleta que dependa de distinguirlas se rompe. La simulación sigue a Viénot, Brettel y Mollon (1999) y se aplica en luz lineal.
La distancia es ΔE en OKLab, donde alrededor de 0,02 es el punto en el que la mayoría empieza a ver dos muestras como colores distintos. Haz clic en una fila para saltar a ese color exacto.
Cómo funciona
Trae un color
Escribe cualquier notación CSS, usa la pipeta de pantalla, pega una paleta entera o abre una imagen y haz clic en el píxel que quieras.
Dale forma
Deslizadores de claridad, croma y tono que se comportan igual en un amarillo que en un azul, además de rampas, armonías y mezcla.
Compruébalo
WCAG 2.1 y APCA contra cualquier fondo, y una simulación de daltonismo que te avisa cuando dos muestras se funden en una.
Llévatelo
Copia una notación suelta, exporta CSS, Tailwind, SCSS, JSON, SVG o una hoja de muestras, o pasa la paleta a la siguiente herramienta.
Todas las sintaxis de color CSS
Hex de 3, 4, 6 u 8 dígitos, palabras clave, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() y display-p3. Lee el propio analizador del navegador, así que no se queda nada fuera.
Rampas que mantienen el paso
Once escalones generados en OKLCH, de modo que cada uno queda a una distancia visual constante del anterior, en vez de los saltos desiguales de una rampa en HSL.
WCAG 2.1 y APCA
El ratio clásico más el valor Lc con signo del borrador de WCAG 3, medidos contra el fondo que elijas, no solo contra blanco y negro.
Comprobación de daltonismo
Protanopía, deuteranopía y tritanopía simuladas en luz lineal, con la distancia mínima entre dos muestras para saber cuándo una paleta se viene abajo.
Pipeta e imágenes
Toma un color de cualquier punto de la pantalla donde el navegador lo permita, o abre una imagen, amplía sobre el píxel bajo el cursor y quédate con su valor exacto.
Armonías y mezcla
Conjuntos complementario, análogo, tríada, dividido, tetrádico y monocromo girados en OKLCH, además de mezcla perceptual por el arco corto de tono.
Exporta a donde sea
Propiedades personalizadas de CSS, un bloque @theme de Tailwind, variables SCSS, JSON, una hoja de muestras en SVG o PNG y un archivo de paleta de GIMP.
Nada sale de la pestaña
Sin subidas, sin llamadas a ninguna API, sin cuenta. Cada conversión, cada cifra de contraste y cada paleta las calcula tu propio navegador.
Procesado local instantáneo
Cada conversión es aritmética sobre tres números, así que no hay nada que esperar ni nada que enviar a ninguna parte. La lectura de lo que escribes se delega en el motor CSS del propio navegador, y por eso se entienden las palabras clave, color-mix() y las notaciones de gama amplia en vez de rechazarse. El trabajo perceptual —rampas en OKLCH, mapeo de gamut, distancias ΔE, simulación de daltonismo— son unos cientos de operaciones en coma flotante, y hasta extraer la paleta de una foto grande es una pasada de k-means sobre una copia reducida que termina en bastante menos de un segundo.
Lo incómodo del trabajo con color rara vez es la conversión en sí: es conseguir una escala que avance a paso constante, demostrar que dos colores se leen bien juntos y dejar el resultado con la forma que espera tu código. Esta herramienta ancla una rampa de once escalones en el color que ya tienes, te dice qué escalones han tenido que volver a sRGB y cuánto se han movido, nombra la palabra clave de CSS y el token de Tailwind más cercanos con una distancia medida, y exporta la paleta entera como propiedades personalizadas, bloque de tema de Tailwind, SCSS, JSON o una hoja de muestras.
Esta herramienta no tiene parte de servidor. Los colores que escribes, las paletas que pegas y las imágenes que abres se quedan en la pestaña: la imagen se decodifica en un lienzo que nunca sale de tu equipo, y al cerrar la pestaña desaparece todo. Lo único que viaja es lo que tú decides poner en la barra de direcciones: la paleta se codifica ahí para que puedas compartir un enlace, y no se registra nada más de tu sesión.
Preguntas frecuentes
Q¿Qué formatos de color puedo pegar?+
Hex de 3, 4, 6 u 8 dígitos, las 148 palabras clave de CSS, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() y color(display-p3 …). La entrada pasa por el analizador CSS del propio navegador, así que funciona todo lo que tu navegador acepte en una hoja de estilos. Sin ese analizador, la herramienta sigue leyendo hex, rgb() y hsl().
Q¿Por qué la herramienta prefiere OKLCH a HSL?+
En HSL, dos colores con el mismo valor de luminosidad pueden verse muy distintos de brillo: un amarillo al 50% parece mucho más claro que un azul al 50%. OKLCH está construido para que su claridad coincida con lo que percibe el ojo, y por eso las rampas, las armonías y la mezcla de aquí giran e interpolan en ese espacio.
Q¿Qué significa el número ΔE?+
Es la distancia entre dos colores en OKLab. Alrededor de 0,02 es donde la mayoría empieza a ver dos muestras como colores realmente distintos, así que sirve de vara de medir: te dice cuánto se ha desviado un escalón de la rampa al tener que volver a sRGB, cómo de cerca está de verdad el token de Tailwind más próximo y si dos colores de la paleta sobreviven a una simulación de daltonismo.
Q¿El comprobador de contraste cumple WCAG?+
El ratio de WCAG 2.1 se calcula exactamente como define la especificación, contra el fondo que elijas, y la etiqueta distingue el texto de cuerpo del umbral más laxo del texto grande en vez de mostrar un aprobado a secas. Junto a él tienes APCA, la medida perceptual propuesta para WCAG 3: útil en la práctica, pero todavía un borrador y no un criterio de conformidad.
Q¿El CMYK que sale vale para imprenta?+
No, y el de ninguna herramienta de navegador lo vale. Lo que obtienes es la conversión aritmética estándar, suficiente para hacerte una idea o para un programa que espere esos cuatro números. Una separación real depende del papel, las tintas y un perfil ICC de salida, así que hay que hacerla en tu programa de maquetación o de imagen.
Q¿Se sube a algún sitio lo que pego?+
No. No hay componente de servidor, no hay analítica sobre tus colores y no se hace ninguna petición de red en ningún momento de la conversión. Las imágenes se decodifican en local en un lienzo y se descartan al cerrarlas. La paleta se escribe en la URL de la página para que puedas compartirla o guardarla en marcadores: ese es el único sitio donde quedan tus colores, y se queda en tu equipo salvo que envíes tú el enlace.