devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoría web

Esta página aún no está traducida al español, así que la mostramos en inglés.

OKLCH Color Picker & Converter

Explore the perceptually uniform OKLCH color space with live sliders, see whether a color fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.

Actualizado el

Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

Cómo usar: OKLCH Color Converter

  1. Paste any color (HEX, rgb(), hsl(), oklch()…) or use the picker.
  2. Adjust Lightness, Chroma and Hue — the slider tracks preview what each change will look like.
  3. Watch the gamut badge: if the color is outside sRGB, the HEX/RGB fallbacks are automatically gamut-mapped.
  4. Copy the oklch() value, or the “CSS with fallback” snippet for older browsers.

What is OKLCH?

OKLCH is a color space designed by Björn Ottosson (2020) and added to CSS in the Color Level 4 specification. It describes a color with three intuitive values: Lightness (0–100%), Chroma (how colorful, roughly 0–0.37 for screen colors) and Hue (an angle from 0 to 360°). Unlike HSL, it is perceptually uniform: two colors with the same L really look equally light to the human eye.

Why developers are switching from HSL

  • Predictable palettes: in HSL, yellow at 50% lightness looks far brighter than blue at 50%. In OKLCH, changing only the hue keeps perceived lightness — great for generating consistent button states and design-system scales (the reason Tailwind CSS v4 ships its palette in OKLCH).
  • Better accessibility maths: a fixed lightness difference translates into a fairly consistent contrast difference.
  • Wide-gamut colors: OKLCH can express Display P3 colors that HEX and rgb() cannot, so modern screens can show more vivid colors.

Gamut and fallbacks

Not every L/C/H combination exists on an sRGB screen. When chroma is too high, this tool keeps lightness and hue and reduces chroma until the color fits, then outputs that as the HEX/RGB fallback. In CSS, write the fallback first and the OKLCH value second; browsers that understand OKLCH use the second line:

color: #e5484d;
color: oklch(63% 0.2 25);

OKLCH vs OKLab

OKLab is the same space in rectangular coordinates (L, a, b). It is ideal for mixing and gradients — try the Color Mixer — while OKLCH is easier for humans to edit.

También se busca como: oklch, oklab, perceptual color, hex to oklch, oklch to hex, color picker, p3, gamut.

Herramientas que combinan con: OKLCH Color Converter

  • Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
  • Generador de colores de Tailwind — Pega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en OKLCH, con sugerencias de contraste y opciones de exportación para Tailwind v3, v4, CSS y SCSS.
  • HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
  • APCA Contrast Checker — Calculate the APCA lightness contrast (Lc) between text and background, see which uses it’s suitable for, and compare it with the classic WCAG 2 ratio.

Preguntas frecuentes

Is this an OKLCH color picker?
Yes. Drag the lightness, chroma and hue sliders to pick a color directly in OKLCH, and copy it as oklch(), HEX, RGB or HSL — with a fallback for browsers outside the sRGB gamut.
Do all browsers support oklch()?
All current versions of Chrome, Edge, Safari and Firefox support oklch() (since 2023). Add a HEX or rgb() fallback line before it if you still support older browsers.
What is the maximum chroma?
It depends on lightness and hue. In sRGB the most saturated colors reach around 0.25–0.32; Display P3 goes slightly higher. Values above the screen’s gamut are clipped or gamut-mapped by the browser.
Why does the HEX value change when I increase chroma past a point?
Because the color has left the sRGB gamut. The HEX fallback is gamut-mapped (chroma reduced) so it stays as close as possible to what you picked.
Is OKLCH the same as CIE LCH?
No. CIE LCH is based on CIELAB (1976) and has known hue shifts, especially in blues. OKLCH fixes these, which is why it is preferred for UI work.
¿Puedo instalar OKLCH Color Converter como aplicación web y utilizarla sin conexión?
Sí. OKLCH Color Converter es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

Herramientas relacionadas

localColor ConverterPaste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format…localGenerador de colores de TailwindPega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en…localColor MixerPick two colors and a number of steps to get evenly blended transition colors — perfect for gradients,…localHEX to RGBA ConverterPaste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( /…localAPCA Contrast CheckerCalculate the APCA lightness contrast (Lc) between text and background, see which uses it’s suitable for,…localCSS Variables to TailwindTurn your :root color variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4…