O que é OKLCH e por que devo usá-lo em vez de HEX ou HSL?

OKLCH (Luminosidade, Croma, Matiz) é um espaço de cor perceptualmente uniforme baseado no modelo Oklab. Ao contrário do HEX ou HSL, mudanças numéricas iguais no OKLCH produzem diferenças perceptuais iguais. Isso o torna ideal para criar paletas de cores acessíveis, gradientes suaves e escalas de cores consistentes para o Tailwind v4. Para designers e desenvolvedores front-end que precisam de controle preciso sobre a percepção das cores, o OKLCH é uma escolha mais moderna e científica.

Como converter HEX para OKLCH?

Cole seu valor HEX (por exemplo, #3b82f6) no campo de entrada HEX e o campo OKLCH é atualizado instantaneamente com a notação equivalente oklch(0.6 0.18 250). Todos os outros formatos — OKLab, RGB e HSL — também são sincronizados ao mesmo tempo, permitindo que você compare e utilize facilmente os diferentes formatos de cor sem nenhum esforço adicional.

O que significa 'fora do gamut sRGB' e o que acontece com a cor?

Algumas cores OKLCH — particularmente valores de croma alto — excedem o espaço de cores sRGB que a maioria dos monitores usa. Quando isso acontece, a ferramenta aplica o algoritmo toGamut do CSS Color 4 para encontrar a cor sRGB exibível mais próxima. Um banner de aviso âmbar aparece mostrando o valor original fora do gamut ao lado do resultado mapeado, garantindo total transparência sobre quais ajustes foram feitos na cor.

Como funciona o gerador de paleta OKLCH do Tailwind v4?

O gerador usa a programação de luminosidade oficial do Tailwind v4 (50=0.971, 100=0.945, até 950=0.238) aplicada ao seu matiz e croma atuais. Ele produz 11 etapas de cor do claro ao escuro e as exporta como um bloco de código @theme { --color-brand-50: oklch(...); } pronto para colar no seu CSS, simplificando enormemente a configuração de temas personalizados no Tailwind.

Por que a interpolação OKLCH tem aparência melhor que HSL para gradientes?

O HSL interpola em um sistema de coordenadas cilíndrico que não corresponde à percepção humana, frequentemente causando quedas de cinza ou desvios inesperados de matiz no meio de um gradiente. O OKLCH interpola no espaço Oklab perceptualmente uniforme, de modo que luminosidade e croma transitam suavemente sem distorções de cor inesperadas. Isso é especialmente notável em gradientes de fundo, esquemas de cores de gráficos e transições de estado de interface do usuário.

Este conversor OKLCH é gratuito e privado?

Sim. A ferramenta é completamente gratuita e funciona inteiramente no seu navegador usando a biblioteca culori. Nenhum valor de cor é enviado a um servidor. Todo o processamento é feito localmente no lado do cliente, portanto você pode usar a ferramenta com segurança sem preocupações com privacidade de dados, sem necessidade de criar uma conta ou instalar extensões.

O OKLCH do CSS Color 4 funciona em todos os navegadores?

A sintaxe de cores OKLCH (oklch()) é suportada em todos os navegadores modernos desde 2023, incluindo Chrome 111+, Firefox 113+, Safari 15.4+ e Edge 111+. Para navegadores mais antigos, use os valores de fallback HEX ou RGB fornecidos por este conversor. Recomenda-se fornecer ambos os formatos em ambientes de produção para garantir a máxima compatibilidade.

Ferramentas de Cores

Conversor OKLCH – CSS Color 4, Gerador de Paleta Tailwind v4

Conversor de cores OKLCH gratuito com sincronização em tempo real entre OKLCH, OKLab, RGB, HSL e HEX. Inclui controles L/C/H/Alpha, mapeamento de gamut CSS Color 4 e exportação de paleta Tailwind v4.

OKLCH (Luminosidade, Croma, Matiz) é um espaço de cor perceptualmente uniforme construído sobre o modelo Oklab e adotado oficialmente no CSS Color Level 4. Ao contrário do RGB ou HSL, o OKLCH mantém a luminosidade percebida consistente entre os matizes, tornando-o ideal para sistemas de cores acessíveis, paletas Tailwind v4 e gradientes suaves.

Como Usar o Conversor de Cores OKLCH

1
Insira um valor de cor
Digite ou cole um valor em qualquer formato suportado: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) ou oklab(0.6 -0.056 -0.169). A ferramenta sincroniza todos os outros formatos instantaneamente.
2
Ajuste com os controles L/C/H/Alpha
Arraste os controles de Luminosidade (L), Croma (C), Matiz (H) ou Alpha. O controle de Croma exibe o marcador de limite do gamut sRGB para que você saiba sempre quando uma cor excede o intervalo de exibição padrão.
3
Verifique o aviso de gamut, se aparecer
Se sua cor OKLCH estiver fora do gamut sRGB, um banner de aviso âmbar exibirá o valor original e o resultado mapeado pelo toGamut do CSS Color 4 usado para exibição.
4
Gere uma paleta Tailwind v4
A seção de paleta OKLCH do Tailwind v4 gera automaticamente 50 a 950 etapas de cor para o seu matiz atual, seguindo a programação de luminosidade oficial do Tailwind. Clique em Copiar para colar o bloco @theme diretamente no seu CSS.

Referências

W3C CSS Color Level 4 – oklch()
A especificação W3C que define a notação de cor OKLCH e os algoritmos de mapeamento de gamut.
Culori – Biblioteca de Cores JavaScript
A biblioteca open-source que alimenta a conversão OKLCH, o mapeamento toGamut e a interpolação perceptual nesta ferramenta.
Evil Martians – OKLCH no CSS: Por que abandonar RGB e HSL?
Um guia abrangente explicando as vantagens do OKLCH sobre RGB e HSL para trabalhos de cores modernos.
Tailwind CSS v4 – Paleta Padrão
Documentação oficial da paleta de cores do Tailwind, incluindo os valores de luminosidade OKLCH usados neste gerador de paletas.

Ferramentas Relacionadas

Conversor de Cores

Converta entre RGB, RGBA, HEX, HSL, HSV e CMYK com sincronização bidirecional em tempo real.

Minificador CSS

Minifique CSS que usa seus valores de cores OKLCH.

Visualizador SVG

Visualize e inspecione gráficos SVG que usam valores de preenchimento e contorno OKLCH.

Perguntas Frequentes

O que é OKLCH e por que devo usá-lo em vez de HEX ou HSL?: OKLCH (Luminosidade, Croma, Matiz) é um espaço de cor perceptualmente uniforme baseado no modelo Oklab. Ao contrário do HEX ou HSL, mudanças numéricas iguais no OKLCH produzem diferenças perceptuais iguais. Isso o torna ideal para criar paletas de cores acessíveis, gradientes suaves e escalas de cores consistentes para o Tailwind v4. Para designers e desenvolvedores front-end que precisam de controle preciso sobre a percepção das cores, o OKLCH é uma escolha mais moderna e científica.
Como converter HEX para OKLCH?: Cole seu valor HEX (por exemplo, #3b82f6) no campo de entrada HEX e o campo OKLCH é atualizado instantaneamente com a notação equivalente oklch(0.6 0.18 250). Todos os outros formatos — OKLab, RGB e HSL — também são sincronizados ao mesmo tempo, permitindo que você compare e utilize facilmente os diferentes formatos de cor sem nenhum esforço adicional.
O que significa 'fora do gamut sRGB' e o que acontece com a cor?: Algumas cores OKLCH — particularmente valores de croma alto — excedem o espaço de cores sRGB que a maioria dos monitores usa. Quando isso acontece, a ferramenta aplica o algoritmo toGamut do CSS Color 4 para encontrar a cor sRGB exibível mais próxima. Um banner de aviso âmbar aparece mostrando o valor original fora do gamut ao lado do resultado mapeado, garantindo total transparência sobre quais ajustes foram feitos na cor.
Como funciona o gerador de paleta OKLCH do Tailwind v4?: O gerador usa a programação de luminosidade oficial do Tailwind v4 (50=0.971, 100=0.945, até 950=0.238) aplicada ao seu matiz e croma atuais. Ele produz 11 etapas de cor do claro ao escuro e as exporta como um bloco de código @theme { --color-brand-50: oklch(...); } pronto para colar no seu CSS, simplificando enormemente a configuração de temas personalizados no Tailwind.
Por que a interpolação OKLCH tem aparência melhor que HSL para gradientes?: O HSL interpola em um sistema de coordenadas cilíndrico que não corresponde à percepção humana, frequentemente causando quedas de cinza ou desvios inesperados de matiz no meio de um gradiente. O OKLCH interpola no espaço Oklab perceptualmente uniforme, de modo que luminosidade e croma transitam suavemente sem distorções de cor inesperadas. Isso é especialmente notável em gradientes de fundo, esquemas de cores de gráficos e transições de estado de interface do usuário.
Este conversor OKLCH é gratuito e privado?: Sim. A ferramenta é completamente gratuita e funciona inteiramente no seu navegador usando a biblioteca culori. Nenhum valor de cor é enviado a um servidor. Todo o processamento é feito localmente no lado do cliente, portanto você pode usar a ferramenta com segurança sem preocupações com privacidade de dados, sem necessidade de criar uma conta ou instalar extensões.
O OKLCH do CSS Color 4 funciona em todos os navegadores?: A sintaxe de cores OKLCH (oklch()) é suportada em todos os navegadores modernos desde 2023, incluindo Chrome 111+, Firefox 113+, Safari 15.4+ e Edge 111+. Para navegadores mais antigos, use os valores de fallback HEX ou RGB fornecidos por este conversor. Recomenda-se fornecer ambos os formatos em ambientes de produção para garantir a máxima compatibilidade.