Ir a la herramienta
OKLCH Studio

Selector de color OKLCH

Elige en espacio perceptual, luego comprueba contraste y aplica Fix a AA — ideal para tokens y Tailwind v4.

Full studio here. Need pairs, names, or brand-from-URL? Colorise Pro. · About

Pick
Photo
Read

Pasos

  1. 01

    Elegir

    OKLCH + armonías.

  2. 02

    Contraste

    Fix si hace falta.

  3. 03

    Export

    CSS o JSON.

Selector OKLCH para tokens

Landing del selector: elige en OKLCH y valida contraste después. Fix y foto tienen URLs propias.

Plano L×C

Mejor que HSL para escalas y accesibilidad.

Abrir selector →

Luego contraste

Roles texto/fondo y Fix a AA.

Contraste →

Uso

Tailwind v4 @theme y design systems.

Evita

Publicar HEX sin revisar pares de contraste.

Tailwind

Bloque @theme.

@theme { --color-brand: oklch(0.55 0.14 250); }

Selector de color OKLCH: OKLCH vs HSL vs HEX

HEX stores a display color. HSL is convenient but not perceptual. OKLCH separates lightness, chroma, and hue the way your eye expects — better for scales, contrast Fix, and UI tokens.

SpaceBest forWatch out
OKLCHScales, accessible pairs, CSS oklch()Wide-gamut colors may need clip to sRGB
HSLQuick hue spins in familiar UIsLightness shifts often change perceived hue
HEXCopy-paste into any design toolNo structure — hard to build systems

Preguntas frecuentes

HEX a oklch()?

Pega HEX y copia oklch() al instante.

¿Y Fix?

Contraste corrige luminosidad sin cambiar el tono de marca.