devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoria do site

Esta página ainda não foi traduzida para o português, por isso aparece em 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.

Atualizado em

Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

Como 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.

Também pesquisado como: oklch, oklab, perceptual color, hex to oklch, oklch to hex, color picker, p3, gamut.

Ferramentas que combinam com: 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.
  • Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e 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.

Perguntas frequentes

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.
Posso instalar o OKLCH Color Converter como um aplicativo da web e usá-lo offline?
Sim. O OKLCH Color Converter é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

Ferramentas relacionadas

localColor ConverterPaste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format…localGerador de cores do TailwindCole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH…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…