Selector y conversor de color

Escribe o elige un color, léelo en doce notaciones, crea un esquema de armonías y una escala 50-900 y comprueba su contraste según WCAG.

Cómo copiar color

1
Elige un color o pega un valor
Escribe cualquier notación que entienda un navegador: un código hex, rgb(), hsl(), oklch() o incluso un nombre de color CSS. El campo de texto es el control principal; la muestra y el cuentagotas son atajos al mismo valor.
2
Cópialo en cualquier formato
Las doce notaciones aparecen a la vez con un botón de copia al lado de cada una. Nada se esconde tras un menú desplegable, así que convertir de HEX a RGB lleva un clic en lugar de tres.
3
Exporta la paleta como CSS o JSON
El color base, su escala de diez pasos y cualquier color extraído de una imagen salen juntos como propiedades personalizadas de CSS, un fragmento de tema de Tailwind, variables SCSS o JSON sencillo.

Por qué el espacio de trabajo es OKLCH

HSL tiene una ventaja clara y un fallo serio. La ventaja es que tono, saturación y luminosidad son números separados que puedes entender y ajustar. El fallo es que su luminosidad no coincide con la luz que ves: hsl(60 100% 50%) es un amarillo muy claro y hsl(240 100% 50%) es un azul oscuro, aunque ambos digan cincuenta por ciento. Por eso al girar el tono en HSL salen esquemas de armonía donde una muestra salta a la vista y otra desaparece. OKLCH corrige esto. Su claridad sigue la percepción humana, así que al mover solo el tono de verdad mantienes el brillo estable. Cada esquema y cada escala de esta página se calcula ahí y luego se convierte a sRGB para la salida.

Qué significan los números de contraste

WCAG expresa el contraste como la relación entre la luminancia relativa de dos colores, de 1:1 para colores idénticos a 21:1 para negro sobre blanco. El texto de párrafo necesita 4,5:1 para aprobar AA. El texto grande (18,66 px o más, o 14 px en negrita) y elementos de interfaz como iconos y bordes de campos necesitan 3:1. AAA pide 7:1 en texto de párrafo. No son preferencias de estilo, marcan la diferencia entre una página que se lee al sol o con visión limitada y una que no. Cuando una pareja no llega, el botón junto al veredicto baja la claridad en OKLCH hasta que aprueba, así obtienes la versión más cercana que cumple de tu propio color y no uno distinto.

Paletas extraídas de una fotografía

Sube una imagen y sus colores dominantes se extraen por corte medio: la nube de píxeles se divide una y otra vez por el canal que más varía, y la media de cada caja resultante se convierte en una muestra. Luego se eliminan casi duplicados con CIEDE2000, la métrica de distancia perceptual, así obtienes seis colores distintos y no seis tonos del mismo cielo. La imagen se reduce primero a 400 píxeles y nunca sale de tu navegador.

Colores e imágenes se quedan en esta pestaña

Cada conversión es una operación aritmética en JavaScript en tu propio dispositivo; no hay ninguna llamada a API detrás. Una imagen que sueltes para crear una paleta se decodifica, reduce y muestrea de forma local y nunca se sube ni se guarda. Cierras la pestaña y no queda nada.

Preguntas frecuentes

¿Por qué OKLCH es mejor que HSL?

Porque su claridad coincide con lo que ve tu ojo. En HSL, dos colores con el mismo valor de luz pueden verse con brillos muy diferentes, lo que estropea esquemas de armonía y escalas tonales. OKLCH es perceptualmente uniforme por construcción, así que los pasos iguales se ven iguales.

¿Por qué el valor CMYK es solo de referencia?

La separación real a CMYK depende de la prensa, la tinta y el papel, descritos por un perfil ICC. El valor de aquí viene de una conversión aritmética simple, útil para una idea aproximada pero incorrecta para una tirada de impresión. Pide a tu imprenta los números corregidos por perfil.

¿Cómo se lee una relación de contraste como 4,5:1?

Compara la luminancia de dos colores. 4,5:1 es el mínimo WCAG AA para texto de párrafo; 3:1 cubre texto grande y elementos de interfaz, y 7:1 es AAA. Cuanto más alta, más legible; 21:1 es negro sobre blanco.

¿El cuentagotas funciona en Safari y Firefox?

Todavía no. La API EyeDropper es una función de Chromium. En otros navegadores el botón te lo indica y te lleva a la ruta de imagen: sube una foto y toma el color de la paleta que genera.

¿Cómo saco una paleta de una foto?

Abre los ajustes, elige una imagen y decide cuántos colores quieres entre tres y doce. Los colores dominantes aparecen como muestras que puedes copiar una a una o exportar junto con todo lo demás.

¿Mi imagen se sube a algún sitio?

No. Tu navegador la decodifica, la dibuja en un lienzo a 400 píxeles y la muestrea ahí. No se transmite ninguna parte y el archivo nunca se escribe en el almacenamiento.

¿Para qué sirve la escala 50-900?

Es la rampa tonal que esperan los sistemas de diseño y Tailwind: diez pasos de un tono desde casi blanco hasta casi negro. La croma se reduce en ambos extremos, porque la saturación total con luz muy alta o muy baja queda fuera de sRGB y vuelve apagada.