Conversor de HEX para OKLCH

O que é um Conversor de HEX para OKLCH?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Principais Recursos

Alternativas ao Conversor de HEX para OKLCH

Exemplos de HEX para OKLCH

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Conversões Comuns de HEX → OKLCH (Tailwind v4)

Tabela de referência de 10 matizes médias populares da paleta padrão do Tailwind v4 com seus equivalentes HEX e OKLCH. Os valores batem com a precisão da paleta publicada do Tailwind v4 (três decimais em L e C, inteiro ou um decimal em H).

Como Usar o Conversor de HEX para OKLCH

1. 1

   Cole um código hex no campo HEX

   Jogue qualquer valor hex na entrada HEX — com ou sem o `#` na frente, na forma abreviada de 3 dígitos (`#F73`), forma cheia de 6 dígitos (`#3b82f6`), forma abreviada alfa de 4 dígitos (`#F738`) ou forma cheia alfa de 8 dígitos (`#FF573380`). O parser normaliza todas as cinco formas de entrada para a mesma cor interna antes de derivar o OKLCH. A capitalização não importa (`#3b82f6` e `#3B82F6` interpretam de forma idêntica). Caracteres inválidos ou contagem errada de dígitos produzem um erro discreto inline; hex válido atualiza todo outro campo de formato em tempo real, incluindo OKLCH.

2. 2

   Leia a tripla OKLCH do campo OKLCH

   O campo OKLCH mostra o valor na forma moderna do CSS Color 4: `oklch(0.629 0.193 263.4)` para uma cor opaca, `oklch(0.629 0.193 263.4 / 0.5)` para uma com alfa. L é arredondado para três decimais (bate com a precisão publicada do Tailwind v4), C para três decimais, H para um grau decimal. A fonte-de-verdade OKLCH interna da ferramenta significa que a precisão de float subjacente é preservada por todos os outros campos — round-trips de volta para hex permanecem bit-estáveis, diferente de conversores legados que pivotam por HSL e derivam um grau ou dois por round-trip.

3. 3

   Clique em Copiar para pegar a string OKLCH

   Cada card de formato tem um botão Copiar à direita. Um clique e o valor cai na sua área de transferência — o rótulo do botão brevemente pisca "Copiado!" para você saber. A string copiada é a sintaxe canônica do CSS Color 4 (`oklch(0.629 0.193 263.4)`), pronta para jogar em um bloco `@theme` do Tailwind v4 ou em uma definição de variável CSS do shadcn/ui. Para saída específica de plataforma (propriedade customizada CSS, token Tailwind v4, SwiftUI, Compose, Flutter), use a seção Copiar como código abaixo do seletor — esses snippets emitem o formato que cada plataforma espera nativamente.

4. 4

   Confira os badges de gama Display P3 / Rec2020

   Três badges de gama (sRGB, Display P3, Rec2020) mostram se a cor atual cabe no alcance reprodutível de cada espaço. Se o badge sRGB ficar vermelho mas o P3 ficar verde, a cor é um OKLCH de gama ampla que vai renderizar saturado em hardware Apple (iPhone, iPad, MacBook a partir de 2017) mas dessaturar em um monitor legado de 24 bits. O botão **Snap to sRGB** usa redução binária de chroma (algoritmo informativo do CSS Color 4 §13) para encolher a cor para dentro do sRGB preservando L e H, produzindo um fallback hex que você pode embarcar via `@supports not (color: oklch(0 0 0))`.

5. 5

   Também visíveis: RGB, HSL, OKLAB, HSV, HWB, CMYK, cor nomeada

   O mesmo hex que você cola também acende os outros oito campos de formato — RGB para chamadas de canvas e hardware, HSL para variáveis CSS legadas, OKLAB para matemática de paleta e matrizes de daltonismo, HSV e HWB para fluxos de seletor de cor de designer, CMYK para estimativas de impressão e a cor nomeada CSS mais próxima para prosa de documentação. Você nunca fica trancado em hex → OKLCH apenas. O seletor (quadrado SL + controle de matiz + controle de alfa) dirige todos os nove simultaneamente, e em navegadores baseados em Chromium o botão EyeDropper amostra qualquer pixel na tela, incluindo fora do navegador.

Erros Comuns de HEX / OKLCH

Set OKLCH C = 0.3 expecting "30% saturation":
oklch(0.7 0.3 250) → may exceed sRGB gamut for blues
Wide-gamut color renders desaturated on legacy displays.

Treat C as absolute chroma, check gamut badges:
oklch(0.7 0.15 250) → comfortably in sRGB for this L+H pair
Use the badges to find the max C that fits the target gamut.

Copy HSL L percentages into OKLCH directly:
hsl(220 50% 30%) ported as oklch(0.30 0.10 220)
The two colors look noticeably different in brightness.

Re-derive OKLCH from the original hex, don't port HSL:
hex source → OKLCH conversion → oklch(0.34 0.08 254)
The perceptual L stays correct; the palette feels even.

Ship oklch(0.7 0.4 30) without checking sRGB gamut:
P3 displays render saturated red; sRGB displays render desaturated
Brand color looks inconsistent across user hardware.

Check sRGB gamut badge, Snap to sRGB if needed, layer with @supports:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
P3 hardware gets the wide-gamut value; sRGB hardware gets the snapped fallback.

Define brand color in OKLCH only:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 and old iOS Safari render no color at all.

Layer with @supports for graceful fallback:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Modern browsers get OKLCH; legacy browsers get the hex fallback.

Substitute lch() for oklch() expecting same result:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — different colors entirely
Copy-pasted across spaces, the value is silently wrong.

Pick one space and stay in it:
oklch(0.629 0.193 263.4) for modern design systems
or lch(60% 50 240) — but don't swap function names without re-converting

Quem Usa HEX para OKLCH

Devs Front-end Migrando para Tokens OKLCH do Tailwind v4

O Tailwind v4 padronizou OKLCH para sua paleta padrão em janeiro de 2025. Migrar uma base de código v3 com cores de marca em hex significa converter cada hex para OKLCH e jogar o resultado no novo bloco `@theme`. Cole cada hex aqui, copie o valor `oklch()`, defina `--color-primary: oklch(0.629 0.193 263.4)` e companhia. Os badges de gama ao vivo sinalizam quaisquer cores que excedam o sRGB para você decidir se mantém o valor de gama ampla para usuários Display P3 ou faz snap para sRGB.

Autores de Temas shadcn/ui Construindo Paletas Customizadas

O tema de variáveis CSS do shadcn/ui usa OKLCH para todo token (`--background`, `--foreground`, `--primary`, etc.). Temas customizados derivam de um hex de marca base convertendo para OKLCH e depois varrendo o L para as variantes claro/escuro. Cole o hex de marca, leia a tripla OKLCH, construa o resto do tema dando passos no L mantendo C e H fixos. Bate exatamente com o fluxo canônico do shadcn.

Autores de Design Systems Gerando Rampas Perceptualmente Uniformes

Gere uma rampa 50/100/200/.../900 dando passos iguais no canal L do OKLCH mantendo C e H fixos. O intervalo visual entre paradas adjacentes parece idêntico em todos os matizes — o que uma paleta de cor de marca realmente precisa. O Tailwind v4 usa exatamente essa construção para sua paleta padrão, e o shadcn/ui espelha. Cole cada hex de marca, leia o OKLCH, gere a rampa algoritmicamente ou pelo painel Tints/Shades/Tones abaixo do seletor.

Engenheiros de Acessibilidade Verificando Contraste no Espaço OKLCH

Contraste WCAG 2.1 e APCA ambos reportam contra a cor sRGB resolvida, não contra a tripla OKLCH — mas saber o L OKLCH de uma cor de marca torna o ajuste de contraste previsível: suba o L em 0.1 para passar AA contra branco, baixe o L em 0.1 para passar AA contra preto. A visão simultânea OKLCH + WCAG + APCA torna a relação visível. Cole o hex de marca, confira os badges de contraste, ajuste o L em OKLCH (mais previsível que HSL) até o par passar nas duas métricas.

Web Devs Construindo Tokens de Cor de Gama Ampla para Telas Modernas

A maioria dos aparelhos Apple desde 2017 (e muitos aparelhos Android modernos) renderiza Display P3 nativamente. Definir cores de destaque de marca em OKLCH te deixa endereçar vermelhos e verdes saturados apenas-P3 que nenhum código hex consegue codificar. Cole um hex existente para ler seu OKLCH, depois empurre o canal C acima do teto sRGB para reivindicar a saturação extra do P3. Os badges de gama confirmam que o novo valor cabe em P3 (e faz fallback graciosamente em telas apenas-sRGB via compressão de chroma aplicada pelo navegador).

Educadores Ensinando Luminosidade Perceptual vs Geométrica

A visão simultânea OKLCH + HSL torna óbvia a diferença entre luminosidade perceptual e geométrica. Cole um verde saturado e um azul saturado no mesmo HSL L=50%; os valores OKLCH L diferem notavelmente porque o OKLCH mede brilho percebido de verdade. Arraste o slider de matiz do HSL e veja o L OKLCH oscilar enquanto você mantém o L HSL constante — a curva é o defeito de gama visualizado. Uma demonstração pronta para sala de aula de por que design systems migraram para OKLCH.

Mantenedores Open-Source Modernizando Documentação de Tokens

Docs de design system mais antigos tipicamente listam cores de marca apenas como códigos hex. Modernizar para OKLCH significa mostrar a mesma cor nos dois espaços — o hex para compatibilidade com bloco de código, o OKLCH para a tabela de spec e a definição de token moderna. Cole cada hex, copie a saída OKLCH, atualize os docs. O hash de URL compartilhável também deixa contribuidores linkarem para a cor exata em discussão em uma issue do GitHub sem ambiguidade.

Matemática e Pipeline de HEX para OKLCH

HEX → OKLCH é um Pipeline de 7 Passos

A conversão roteia por cinco representações intermediárias: hex → sRGB inteiro → sRGB normalizado (0-1) → sRGB linear (gama-decodificado) → CIE XYZ D65 → OKLAB → OKLCH. Cada passo é uma matriz ou função por trechos bem definida de uma fonte primária. A ferramenta roda o pipeline completo a cada tecla; a matemática é rápida o suficiente (microssegundos) que nenhum debounce é necessário. Mostrar a tupla RGB intermediária ao lado do OKLCH significa que você pode depurar um valor OKLCH inesperado inspecionando os canais RGB.

Função de Gama do CSS Color 4 §11.2

A conversão sRGB → sRGB linear usa a função por trechos do CSS Color 4 §11.2: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. A forma por trechos (com um pequeno segmento linear perto de zero) evita a instabilidade numérica da forma de expoente puro em cores muito escuras. Essa é a mesma função que perfis ICC usam para codificar sRGB e a mesma função que navegadores usam internamente ao renderizar códigos hex. O inverso para OKLCH → hex aplica a mesma função ao contrário: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

Matriz do CSS Color 4 §15.1: sRGB linear ↔ XYZ D65

A matriz do CSS Color 4 §15.1 converte sRGB linear para CIE XYZ sob o ponto branco D65: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. A linha Y dá a fórmula de luminância sRGB. A matriz é a mesma usada em toda biblioteca de gerenciamento de cor, incluindo ICC, Adobe Color Engine e o pipeline open-source LCMS. A matriz inversa para OKLCH → hex aplica a inversa do §15.1.

Matrizes OKLAB do Ottosson 2020 e Passo de Raiz Cúbica

A conversão XYZ D65 → OKLAB usa duas matrizes e um passo de raiz cúbica publicados no paper OKLAB de 2020 de Björn Ottosson. A primeira matriz transforma XYZ em um espaço LMS de resposta cone (modelado vagamente nas sensibilidades dos cones L/M/S humanos). Tire a raiz cúbica de cada canal para comprimir a faixa dinâmica de forma não-linear (o passo corretor de uniformidade perceptual). A segunda matriz transforma o LMS de raiz cúbica em coordenadas L/a/b do OKLAB. As três operações usam os valores exatos publicados na implementação de referência do paper; sem re-derivações ou arredondamentos. O inverso para OKLCH → hex aplica essas matrizes ao contrário.

OKLAB ↔ OKLCH é Cartesiano-para-Polar

Os eixos `a` e `b` do OKLAB formam um plano de chroma perpendicular ao eixo L. O OKLCH codifica em polar esse plano: `C = sqrt(a² + b²)` (distância euclidiana do cinza), `H = atan2(b, a) * 180 / π` (ângulo em graus, embrulhado em 0-360°). O inverso: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. A forma polar é preferida ao OKLAB para armazenamento de design tokens porque o Matiz é um eixo estável — rotacionar o Matiz não cruza acidentalmente pelo cinza do jeito que rotacionar `a` ou `b` pode no OKLAB.

Detecção de Gama via Verificação de Faixa de Canal

Uma cor é considerada dentro da gama para um espaço alvo (sRGB, Display P3, Rec2020) se cada canal cair dentro de `[-ε, 1 + ε]` após conversão para os primários daquele espaço, onde `ε = 1e-7` para absorver ruído de precisão de float em torno de fronteiras. O badge de gama de cada espaço fica vermelho quando qualquer canal excede a faixa. OKLCH é sem-limite-de-gama — `oklch(0.7 0.4 30)` é uma coordenada válida mas pode exceder o espaço de byte 256-por-canal do sRGB. A verificação roda a cada tecla; combinada com Snap to sRGB, isso pega a armadilha de adoção mais comum (OKLCH de gama ampla não exibindo corretamente em telas legadas).

Snap-to-sRGB com Redução Binária de Chroma

O Snap to sRGB casa com o algoritmo informativo de mapeamento de gama no CSS Color 4 §13: mantenha L e H fixos nos valores atuais, busca-binária em C ∈ [0, C atual] pelo maior C cuja conversão sRGB fica dentro da gama. A busca roda no máximo 30 iterações (precisão ~10⁻⁹), o que é mais que suficiente para precisão visual. Preservar L e H significa que a cor após o snap se lê como a mesma família de matiz no mesmo brilho — apenas perde saturação. Não fazemos clip dos canais RGB diretamente porque isso distorce o matiz notavelmente (especialmente em azuis, que fazem clip em direção ao roxo).

Boas Práticas para Fluxos HEX / OKLCH

Use OKLCH como Formato Canônico de Token em Código Novo

Para qualquer design system embarcando em 2025 ou depois, defina cores de marca e rampas de paleta em OKLCH. O eixo L entrega rampas perceptualmente uniformes automaticamente; o eixo Chroma consegue endereçar cores de gama ampla que o hex não consegue codificar. Mantenha um fallback hex para navegadores mais antigos via `@supports not (color: oklch(0 0 0))` ou PostCSS em tempo de build, mas faça do OKLCH a fonte-de-verdade no seu armazenamento de tokens. Tailwind v4 e shadcn/ui ambos embarcam assim; projetos novos podem seguir essa liderança sem fricção.

Gere Rampas Dando Passos no L, Mantendo C e H Constantes

A construção canônica de rampa OKLCH: trave C e H, varra L em incrementos iguais. Uma rampa de 9 passos `oklch(L 0.15 263)` para L = 0.1, 0.2, …, 0.9 produz espaçamento visualmente uniforme em cada passo. É exatamente o que o Tailwind v4 faz internamente. Não varra C junto com L a menos que queira que a intensidade cromática da rampa varie deliberadamente (raro). Não derive H entre passos — mesmo uma deriva de 5° faz a rampa parecer embaralhada.

Bata a Precisão do Tailwind v4: 3 Decimais em L+C, 1 Decimal em H

A paleta padrão do Tailwind v4 publica valores OKLCH com três casas decimais em L e C, e uma casa decimal em H — `oklch(0.629 0.193 263.4)` para o blue-500. Bater essa precisão nos seus próprios tokens significa que fluxos de colar-no-config produzem valores idênticos aos que o Tailwind embarca, e ferramentas de diff não vão sinalizar diferenças espúrias. O arredondamento padrão da ferramenta segue essa convenção; copiar e colar em um bloco `@theme` é bit-exato.

Rode OKLCH de Gama Ampla pela Verificação de Gama Display P3

Se você está mirando hardware Apple moderno (iPhone, iPad, MacBook a partir de 2017) ou embarcando conteúdo HDR-aware, os badges de gama te deixam empurrar C acima do teto sRGB para reivindicar a saturação extra do P3. A compressão de chroma aplicada pelo navegador impede a cor de fazer clip em telas apenas-sRGB. Não faça pre-snap para sRGB por padrão a menos que saiba que sua audiência inteira está em telas legadas — isso perde 30%+ da saturação que o hardware P3 consegue renderizar.

Forneça um Fallback Hex via @supports para Navegadores Pré-2023

Embora o suporte evergreen em navegadores para `oklch()` agora seja 94%+, a cauda longa (IE 11, Chrome Android antigo, webviews embarcadas) ainda precisa de um fallback. Embrulhe tokens em `@supports (color: oklch(0 0 0))` e forneça uma variante hex no branch alternativo. A saída do Snap to sRGB é exatamente esse fallback — gerado automaticamente a partir da tripla OKLCH atual com L e H preservados. Plugins PostCSS de tempo de build como `postcss-oklab-function` também conseguem inserir inline a aproximação sRGB em tempo de compilação.

Documente Tanto o OKLCH quanto o Hex de Origem nos Seus Tokens

Quando você embarca uma variável CSS como `--color-primary: oklch(0.629 0.193 263.4)`, inclua um comentário com o hex de origem: `/* source: #3b82f6 (Tailwind blue-500) */`. Seis meses depois, quando alguém precisar derivar uma matiz escura relacionada ou conferir o valor contra um PDF de guia de marca, o hex de origem preserva a trilha completa de proveniência. O OKLCH sozinho é significativo mas mais difícil de reconhecer de cara; o hex de origem é o identificador que a maioria dos colegas vai procurar primeiro.

Use o Hash de URL para Compartilhar Decisões de Cor ao Vivo

Toda mudança de cor atualiza o hash da URL como `#hex=3b82f6` ou `#oklch=...` automaticamente. Copie a URL em uma thread do Slack ou uma issue do GitHub e qualquer um que abrir cai na mesma cor com a mesma tripla OKLCH. Isso é mais confiável do que colar uma string OKLCH no chat — destinatários às vezes erram decimais ou embrulham na precisão errada — e deixa uma thread de design review referenciar uma cor exata em vez de "o azul de marca que discutimos terça". O hash nunca é transmitido ao servidor.

Perguntas Frequentes