Color Picker con valores OKLCH

¿Qué hace el Color Picker?

El picker representa un color simultáneamente en cinco modelos — HEX, RGB, HSL, HSB y OKLCH — y entrega al lado de inmediato seis snippets de código para CSS, Tailwind v4, SwiftUI, Flutter y Figma. Los sliders OKLCH son el corazón del picker: luminosidad, croma y tono son independientes entre sí, porque los ejes son perceptualmente uniformes. Eso hace al picker más adecuado para el trabajo de design system que un slider HSL clásico.

Puramente cliente. Cada valor se queda en su navegador. Sin servidor, sin tracking, sin muro de cookies. Los colores Recent se mantienen solo en la sesión actual — al recargar, la fila está vacía.

¿Por qué OKLCH primero?

En HSL, un color amarillo verdoso vívido parece más claro que un violeta oscuro, aunque ambos tengan el mismo valor L. Eso se debe a que HSL calcula la luminosidad linealmente a partir de RGB — lo que no se corresponde con cómo el ojo humano percibe la luz. OKLCH resuelve este problema porque opera en el espacio perceptual Oklab: mismo valor L significa misma luminosidad percibida, sea el color verde, azul o rojo.

Para design systems, esto significa: una paleta de colores con luminosidad constante y tono variable funciona en OKLCH sin reajuste. En HSL hay que corregir la luminosidad por tono, si no los acentos saltan.

Alerta de gama P3 y Rec2020

OKLCH puede describir colores que el espacio sRGB no puede representar. En una pantalla P3 moderna — todos los dispositivos Apple desde 2015, muchos smartphones Android, monitores de diseño modernos — esos colores son visibles. En un monitor sRGB estándar se recortan. El picker detecta esta situación automáticamente y muestra una pequeña alerta «fuera de sRGB» en cuanto la combinación OKLCH seleccionada sale del triángulo sRGB. Así sabe que sus destinatarios verán el color de forma distinta según el monitor.

¿Cómo funcionan EyeDropper y recogida de píxel desde imágenes?

El botón EyeDropper abre la pipeta de pantalla nativa del navegador: un clic en cualquier lugar de la pantalla toma el color del píxel. Disponible en Chrome desde la versión 95 y Edge desde 95. En Firefox y Safari aún falta la API — la herramienta muestra entonces una indicación y oculta el botón, en lugar de producir un error.

Como alternativa multi-navegador existe la recogida desde imagen: arrastre una imagen dentro o ábrala con un clic, y luego clique un píxel en la imagen. La pipeta lee los valores RGB a través del elemento <canvas> directamente de la imagen — todo en el navegador, sin transmisión a un servidor. Funciona con cualquier formato que el navegador decodifique: JPG, PNG, WebP, GIF, SVG, AVIF.

¿Por qué el contraste dual WCAG 2.2 y APCA?

Un color nunca es legible de forma aislada — siempre está sobre un fondo. El picker muestra por tanto el contraste contra un fondo de referencia claro y uno oscuro en paralelo. Así ve de un vistazo si el color sirve para una UI Light Mode, Dark Mode o para ambas.

WCAG 2.2

El ratio de las Web Content Accessibility Guidelines es la referencia jurídicamente vinculante según el European Accessibility Act y las transposiciones nacionales (por ej. el Real Decreto 1112/2018 sobre accesibilidad de sitios web del sector público en España). Umbrales:

• 3,0 — texto grande (≥18 pt o ≥14 pt en negrita)
• 4,5 — texto corrido (AA)
• 7,0 — texto corrido (AAA, nivel más alto)

WCAG mide el contraste como un cociente de luminancias relativas, pero no conoce polaridad — el valor es simétrico entre primer plano y fondo.

APCA Lc

El Accessible Perceptual Contrast Algorithm de Andrew Somers se propuso para WCAG 3 porque modela el contraste de forma más perceptual. Los valores APCA llevan signo: positivo significa texto oscuro sobre fondo claro, negativo al revés. Reglas prácticas de la recomendación APCA-W3:

• Lc 75+ — texto corrido pequeño (aprox. 14 pt)
• Lc 60+ — texto corrido mayor
• Lc 45+ — resaltes e iconos
• Lc 15+ — componentes UI y líneas separadoras

Los valores por debajo de 15 son prácticamente ilegibles. La escala va de aproximadamente −108 (blanco sobre negro) a +108 (negro sobre blanco).

Ver WCAG y APCA a la vez ayuda a clasificar los casos límite — algunos colores pasan WCAG por los pelos pero fallan en APCA y al revés. Para una marca Light Mode que llega justo a WCAG-AA, una mirada al valor APCA vale la pena.

¿Qué muestra la simulación de daltonismo?

Alrededor del 8 % de todos los hombres y del 0,4 % de todas las mujeres en Europa occidental tienen alguna forma de daltonismo. La más frecuente es la deuteranopía (déficit del verde), seguida de la protanopía (déficit del rojo). La tritanopía (déficit del azul) es muy rara. El picker recalcula el color seleccionado según el método de Machado, Oliveira y Fernandes (2009) para las tres dicromatopsías — sobre la base de su modelo fisiológico de la respuesta de los conos. La teoría original se remonta al trabajo de Brettel, Viénot y Mollon (1997).

Si dos colores UI parecen idénticos en la simulación, no son distinguibles para esa dicromatopsía. El rojo y el verde de un semáforo se ven en deuteranopía ambos amarillento-oliva — esa es la razón clásica por la que las buenas tarjetas de estado llevan adicionalmente un icono o una etiqueta.

¿Qué snippets de código entrega el picker?

Un clic entrega el color elegido en el formato que requiera su siguiente paso:

• Variable CSS — --brand: #1A8FE6; para un stylesheet propio o un tokens.css.
• Tailwind v4 arbitrary — bg-[oklch(60%_0.18_240)] para uso único en el markup.
• Tailwind v4 @theme — un bloque @theme { --color-brand: ...; } para un design token.
• SwiftUI — Color(red:, green:, blue:) con valores 0..1 para apps iOS / macOS.
• Flutter — Color.fromRGBO(26, 143, 230, 1.0) para código Dart.
• Figma HEX — 1A8FE6 sin # inicial, como Figma lo espera en el campo del Color Picker.

¿Dónde se guardan los colores Recent?

Hasta ocho colores seleccionados recientemente se mantienen como una pequeña fila para la sesión actual del navegador — sin localStorage, sin cookies, sin servidor. Al recargar, la fila está vacía. Esa es una decisión deliberada: sin almacenamiento en navegador significa también sin obligación RGPD, sin muro de cookies, sin lagunas en la política de protección de datos. Para conservar un set, copie los snippets de código en una nota o stylesheet. Para compartir un solo color, use el enlace de compartir con OKLCH en el hash de URL — #oklch=62.80_0.258_29.23 reconstruye el color al abrir.

¿Cómo están regulados teclado, táctil y tolerancia de entrada?

Cada slider acepta las teclas de flecha para pasos de un por ciento o un grado — bueno para ajuste fino. Tab salta limpiamente por el orden OKLCH → entrada HEX → EyeDropper → imagen → snippets → contraste → vista previa, de modo que la herramienta sigue siendo usable sin ratón. Los objetivos táctiles son en todas partes de al menos 44 × 44 píxeles para cumplir WCAG 2.5.5.

El campo de entrada HEX tolera tanto con como sin # inicial, tanto mayúsculas como minúsculas, y puede procesar valores de 3, 4, 6 u 8 dígitos — el conversor expande #FA0 automáticamente a #FFAA00. En cuanto la entrada es parseable, los sliders OKLCH saltan en sincronía al valor correspondiente, y la fila Recent acoge el color.

¿Qué herramientas están relacionadas?

Otras herramientas del ecosistema kittokit que encajan con el tema:

• Conversor HEX a RGB — convertir colores individuales entre HEX, RGB, HSL y OKLCH, sin interfaz picker.
• Comprobador de contraste — comprobar dos colores concretos contra los umbrales WCAG, con vista previa lado a lado.
• Generador de gradiente CSS — construir degradados con stops OKLCH en interpolación perceptualmente uniforme.
• Generador Box-Shadow — sombras multicapa con entrada de color OKLCH y presets Material Elevation.