Conversor de Cores — HEX, RGB, HSL e OKLCH

O que é um conversor de cores?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
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 matrix), 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;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Principais Recursos

Conversores de Cor Alternativos Comparados

Exemplos de Conversão de Cor

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

Como Usar o Conversor de Cores

1. 1

   Cole ou digite qualquer cor em qualquer formato

   Cada um dos 9 campos de formato (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Named) é editável diretamente — não há botão "Converter" para clicar. Cole um hex do Figma, digite um valor `oklch()` de uma configuração Tailwind, jogue um `hsl()` de uma folha de estilos antiga ou até digite um nome de cor CSS como `tomato`. A ferramenta interpreta de forma incremental enquanto você digita, então um valor digitado pela metade não vai apagar os outros até você confirmar um formato válido. Entrada inválida ganha um erro discreto inline; entrada válida atualiza a grade inteira.

2. 2

   Todos os 9 formatos atualizam na hora

   A fonte interna da verdade é OKLCH (perceptualmente uniforme, sem fronteiras de gama), e todo outro formato é derivado dela em cada tecla. O campo em que você está digitando preserva a posição do cursor — apenas os *outros* oito campos são re-renderizados. Isso significa que você pode editar o canal L do OKLCH diretamente e ver hex, RGB, HSL e CMYK deslocarem em tempo real sem perder o cursor. A matemática de conversão roda inteira em JavaScript usando os mesmos primitivos OKLAB que vêm nos navegadores modernos.

3. 3

   Use o seletor para exploração visual

   Abaixo da grade de formatos há um quadrado de saturação-luminosidade (arraste em qualquer ponto para ajustar S+L do matiz atual), um controle deslizante de matiz (arraste para girar pela roda das cores) e um controle deslizante de alfa (arraste para ajustar transparência). Em navegadores baseados em Chromium (Chrome, Edge, Brave) o botão **Eyedropper** ativa a API EyeDropper nativa — clique em qualquer ponto da tela, inclusive fora da janela do navegador, para amostrar a cor daquele pixel. Safari e Firefox ainda não trazem a API, então o botão fica oculto neles e o quadrado SL + slider de matiz continuam sendo o seletor principal.

4. 4

   Confira gama e contraste de relance

   Três badges de gama (**sRGB**, **Display P3**, **Rec2020**) mostram se a cor atual cai dentro do alcance reprodutível de cada espaço — útil quando você está trabalhando em OKLCH e quer saber quais telas vão renderizar o valor com fidelidade. A linha de contraste mostra a razão WCAG 2.1 contra branco e preto, mais a pontuação APCA Lc (métrica de futuro do WCAG 3). Badges de aprovação / reprovação (AA, AAA) aparecem inline. Se uma cor estiver fora da gama sRGB, um botão **Snap to sRGB** encolhe o chroma até caber.

5. 5

   Copie na sintaxe nativa da sua plataforma

   Cada um dos 9 campos de formato tem seu próprio botão **Copiar** — um clique, o valor cai na sua área de transferência e o rótulo brevemente troca para "Copiado!" para confirmar. Abaixo do seletor, a seção **Copiar como código** gera snippets prontos para colar em cinco plataformas: propriedade customizada CSS, token `@theme` do Tailwind v4, literal `Color(red:green:blue:)` do SwiftUI, constante `Color(0xFF...)` do Jetpack Compose e `Color(0xFF...)` do Flutter. O hash da URL (`#hex=...` ou `#oklch=...`) também atualiza, para que você possa compartilhar um link ao vivo com a cor exata.

Erros Comuns na Conversão de Cor

Assumir que uma paleta HSL é perceptualmente uniforme:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
Na tela esses passos parecem irregulares.

Usar OKLCH para rampas perceptualmente uniformes:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
Na tela esses passos parecem uniformes.

Enviar nossa saída CMYK direto para uma impressora:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
O resultado impresso pode ficar barrento ou supersaturado.

Enviar o hex original para a gráfica:
hex #FF6347 → deixar o impressor converter via ICC para a impressora dele
O resultado impresso casa com a cor da tela muito mais de perto.

Fingir que Lc 60 = WCAG 4.5:1:
APCA Lc 60 → "isto passa AA"
A razão WCAG 2 para o mesmo par pode ser 3.8:1 (falha AA).

Confira as duas métricas independentemente:
razão WCAG 2 ≥ 4.5:1 para conformidade AA de corpo de texto, E
APCA |Lc| ≥ 75 para legibilidade no mundo real.
As duas precisam passar, não uma substituindo a outra.

Passos no L do HSL para tons:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90% parece desbotado; 30% parece muito mais escuro do que o intervalo até 60%.

Passos no L do OKLCH para tons:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Cada passo parece o mesmo intervalo visual.

Copiar hex de 8 dígitos para um parser legado:
#FF573380 → parser trunca → #FF5733 (sem alfa)
A transparência de 50% é silenciosamente perdida.

Confirme se o destino suporta hex de 8 dígitos, ou use rgba():
para CSS moderno: #FF573380 (hex de 8 dígitos)
para suporte legado: rgba(255, 87, 51, 0.5) (sempre suportado)
Sintaxe alfa explícita evita truncamento silencioso.

Ajustar toda cor OKLCH para sRGB por padrão:
oklch(0.7 0.25 30) → ajuste → oklch(0.7 0.18 30)
Telas P3 perdem 30%+ de saturação sem razão.

Confira a badge Display P3 primeiro:
se cabe-no-P3: mantém o valor de gama ampla, adiciona fallback sRGB via @supports
se excede o P3: aí ajusta para sRGB
Deixe o hardware de gama ampla fazer o trabalho dele.

Quem Usa Esta Ferramenta

Devs Front-end Migrando para Tokens OKLCH do Tailwind v4

O Tailwind v4 padronizou OKLCH para sua paleta padrão em 2024. Migrar um design system antigo baseado em HSL ou hex significa converter centenas de cores de marca para OKLCH. Cole cada hex, copie a saída OKLCH, jogue no bloco `@theme`. As badges de gama ao vivo sinalizam quaisquer cores que excedam o sRGB para você decidir se mantém o valor de gama mais ampla para telas Display P3.

Designers Traduzindo Cores do Figma para iOS / Android

O Figma exporta hex por padrão, mas o iOS quer literais `Color(red:green:blue:)` do SwiftUI e o Android quer constantes `Color(0xFF...)` do Jetpack Compose. Cole o hex do Figma uma vez, copie o snippet SwiftUI para o engenheiro iOS e o snippet Compose para o engenheiro Android — ambos já na sintaxe exata que cada plataforma espera, com o hex original preservado em um comentário para rastreabilidade.

Designers Preparando Provas de Impressão (Aproximação CMYK)

Quando uma cor de marca precisa aparecer em um cartão de visita impresso, a aproximação CMYK dá uma estimativa rápida para compartilhar com a gráfica antes da conversão ICC adequada. Cole o hex de marca, copie as porcentagens CMYK, envie para o impressor para um orçamento rápido — depois confie na conversão consciente de perfil ICC do impressor para a correspondência final contra a impressora específica.

Engenheiros de Acessibilidade Verificando WCAG e APCA

O WCAG 2.1 é o padrão regulatório (ADA, EAA, Section 508) hoje; o APCA Lc é o sucessor proposto para o WCAG 3. As duas métricas mostradas lado a lado significam que um designer pode confirmar que uma cor de corpo de texto atinge 4.5:1 WCAG contra branco e depois conferir que ela também passa de APCA Lc 75, em uma tela — sem ficar pulando entre duas calculadoras separadas.

Educadores Ensinando Conceitos de Espaço de Cor

A visão simultânea de nove campos torna visíveis as relações entre espaços de cor. Digite um valor OKLCH e veja o HSL derivar porque L significa coisas diferentes em cada espaço. Arraste o slider de matiz e veja hex, RGB e CMYK atualizarem. Mostre as badges de gama ficando vermelhas conforme você empurra o chroma para além do sRGB. A ferramenta é sua própria demonstração de sala para um curso universitário de computação gráfica ou HCI.

Gerentes de Marca Encontrando a Cor Nomeada CSS Mais Próxima

Quando o texto de marketing diz "um acento cor de tomate" mas o hex de marca real é `#FF6347`, o campo Named retorna `tomato (exact)` porque é literalmente isso que `tomato` resolve na especificação CSS. Para hexes em quase-acerto, o campo retorna a cor nomeada mais próxima com a distância ΔE em OKLAB — útil para documentação, prosa e nomeação casual de cor.

Devs Web Convertendo Paletas HEX Legadas para OKLCH

Um site mais antigo pode ter uma paleta de marca de 50 cores definida em propriedades customizadas CSS como códigos hex. Modernizar para OKLCH deixa o time de marca expressar as mesmas rampas em um espaço perceptualmente uniforme. Cole cada hex, copie a saída OKLCH, troque nas definições de variável. O painel Tints/Shades abaixo confirma que a rampa resultante é visualmente uniforme antes de embarcar.

Mantenedores Open-Source Documentando Design Tokens

A documentação de design token geralmente precisa mostrar a mesma cor em múltiplas sintaxes — hex para o bloco de código CSS, OKLCH para a tabela de spec, a cor nomeada para menções em prosa. A visão de campo simultâneo deixa um mantenedor copiar cada uma em uma passagem em vez de rodar três conversões separadas. O hash de URL compartilhável também deixa contribuidores linkar para a cor exata em discussão em uma issue do GitHub.

Matemática e Algoritmos de Conversão de Cor

OKLCH Como Fonte-de-Verdade Interna

A ferramenta mantém o valor canônico de cor como uma tripla OKLCH internamente. Todo campo editável deriva seu valor de exibição daquela tripla em cada tecla; toda edição do usuário atualiza a tripla primeiro, depois dispara re-render dos outros oito campos. Isso elimina a deriva de float por passo que assola conversores que roteiam por HSL ou sRGB como pivô. A escolha de OKLCH em vez de OKLAB é deliberada — a forma polar preserva o Matiz como eixo estável, então arrastar o slider de matiz não cruza acidentalmente pelo cinza. Segundo o paper de Björn Ottosson de 2020, a uniformidade perceptual do OKLAB é o argumento mais forte para tratá-lo como a língua franca da matemática de cor moderna.

Fontes das Matrizes (W3C CSS Color 4 + Ottosson 2020)

Toda matriz de conversão no código é citada à sua fonte primária. A função de gama por trechos sRGB ↔ sRGB linear é o W3C CSS Color 4 §11.2 (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). A matriz 3×3 sRGB linear ↔ CIE XYZ D65 é o CSS Color 4 §15.1. A matriz XYZ D65 ↔ LMS e o passo de raiz cúbica do OKLAB vêm da implementação de referência de Ottosson em `https://bottosson.github.io/posts/oklab/`, exatamente como publicada. Nenhuma matriz é recalculada ou re-derivada — copiar verbatim mantém a saída idêntica aos vetores de referência da spec.

Fórmula CMYK Ingênua e a Ressalva ICC

Nossa saída CMYK usa a fórmula padrão de livro-texto: `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)` operando em valores sRGB normalizados. Esta é uma aproximação deliberada. Precisão real de impressão exige conversão por perfil ICC contra a impressora, tinta (ex.: US Web Coated SWOP v2, Fogra39, Japan Color 2011) e papel específicos, o que pode deslocar canais em 5-15%. Mostramos o campo CMYK com um aviso visível para que usuários não enviem nossos valores direto para uma impressora. Trate a saída como conferência para orçamentos, não como entregável.

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 cai dentro de `[-ε, 1 + ε]` após conversão para os primários daquele espaço, onde `ε = 1e-7` absorve ruído de precisão de float em torno das fronteiras. A badge de gama de cada espaço fica vermelha quando algum canal excede a faixa. Isso pega o caso comum — uma cor OKLCH de gama ampla como `oklch(0.7 0.4 30)` reporta fora-do-sRGB mas dentro-do-P3, indicando quais telas vão renderizar com fidelidade. A verificação roda em cada tecla.

Algoritmo de Snap por Redução de Chroma

Snap to sRGB usa busca binária no eixo Chroma: mantém L e H fixos nos valores atuais, busca C ∈ [0, currentC] pelo maior C cuja conversão sRGB permanece dentro da gama. A busca roda no máximo 30 iterações (precisão ~10⁻⁹), o que é mais do que suficiente para fidelidade visual. Isso casa com o algoritmo informativo de mapeamento de gama descrito no CSS Color 4 §13 — preservar luminosidade e matiz enquanto reduz apenas chroma mantém a cor ajustada reconhecivelmente na mesma família de matiz. Não cortamos canais RGB diretamente porque isso distorce o matiz visivelmente (especialmente em azuis).

Matrizes Brettel + Machado para Daltonismo

A simulação de daltonismo usa duas famílias de matrizes publicadas. As três dicromacias — protanopia, deuteranopia, tritanopia — usam matrizes Brettel-Viénot-Mollon 1997 operando em RGB linear (gama decodifica primeiro, aplica matriz, gama codifica de volta). As três tricromacias anômalas — protanomalia, deuteranomalia, tritanomalia — usam matrizes Machado-Oliveira-Fernandes 2009 em severidade 0.66, que corresponde a um paciente típico de tricromacia anômala. Acromatopsia e acromatomalia parcial usam pesos de luminância rec601 (`0.299R + 0.587G + 0.114B`) para uma projeção em escala de cinza. As oito simulações renderizam em cada mudança de cor.

WCAG 2 vs APCA: Quando Usar Qual

O WCAG 2.x (padrão atual) computa uma razão de contraste simétrica a partir da luminância relativa: `(L1 + 0.05) / (L2 + 0.05)`, alvo 4.5:1 para corpo de texto normal e 7:1 para AAA. É o piso legal de conformidade para auditorias de acessibilidade em 2026. O APCA (Accessible Perceptual Contrast Algorithm) é o sucessor proposto para o WCAG 3 — sensível à polaridade (claro-sobre-escuro pontua diferente de escuro-sobre-claro), melhor correlacionado com legibilidade percebida, alvo `|Lc| ≥ 75` para corpo de texto. As duas métricas em uma linha deixam um designer atingir WCAG 2 para conformidade e APCA para legibilidade no mundo real sem pular entre duas calculadoras separadas.

Boas Práticas para Conversão de Cor

Prefira OKLCH para Tokens de Design System; HEX para Legado

Para qualquer design system novo entregando em 2025 ou depois, defina cores de marca e rampas de paleta em OKLCH. O eixo L dá rampas perceptualmente uniformes automaticamente; o eixo Chroma pode endereçar cores de gama ampla que o hex não consegue codificar. Mantenha um fallback hex para navegadores antigos via `@supports not (color: oklch(0 0 0))` ou PostCSS em tempo de build, mas faça do OKLCH o valor canônico no seu store de tokens. Sistemas legados com milhares de variáveis hex existentes podem ficar em hex até uma migração planejada — não troque por trocar.

Trate a Saída CMYK Como Aproximação, Confirme com a Gráfica

Os números CMYK que esta ferramenta mostra são uma fórmula ingênua baseada em sRGB, não uma conversão por perfil ICC. Use-os para orçamentos aproximados e comps internos. Antes de qualquer tiragem real, envie o hex original (não a aproximação CMYK) para a gráfica e deixe que ela rode a própria conversão ICC contra a impressora, tinta e papel específicos. O deslocamento de canal de 5-15% de uma conversão adequada pode facilmente transformar um vermelho vivo em um laranja barrento se a aproximação for enviada direto.

Use APCA Lc para Acessibilidade de Futuro

O WCAG 2.x vai continuar sendo o piso regulatório por mais alguns anos, mas o APCA é a direção para onde o padrão está indo. Para designs novos, atinja `|Lc| ≥ 75` para corpo de texto e `|Lc| ≥ 60` para texto grande ao lado dos pisos do WCAG 2.1. O APCA pega problemas de legibilidade que a razão simétrica do WCAG 2 deixa passar — particularmente texto de traço fino em fundos brilhantes, onde a razão WCAG parece OK mas o texto realmente some à distância normal de leitura.

Passe Cores de Gama Ampla pela Verificação de Gama Display P3

Se você está mirando em hardware Apple moderno (iPhone, iPad, MacBook de 2017+) ou entregando conteúdo consciente de HDR, defina cores de marca em OKLCH e use a badge Display P3 para confirmar que cabem no P3 mesmo se excedem o sRGB. As cores de gama mais ampla parecem visivelmente mais saturadas em telas P3 e degradam graciosamente via compressão de chroma aplicada pelo navegador em telas só sRGB. Não pré-ajuste para sRGB a menos que saiba que toda a audiência está em telas legadas.

Escolha Tons Perceptualmente Uniformes via Tones do OKLCH

Quando gerar uma rampa 50/100/200/.../900 para uma cor de marca, use o painel Tones: ele dá passos iguais em L enquanto C e H ficam fixos. O resultado é uma rampa perceptualmente uniforme onde o intervalo visual entre 400 e 500 parece idêntico ao intervalo entre 500 e 600. Calibrar rampas HSL à mão para a mesma uniformidade é um exercício de várias horas por cor; o OKLCH te dá de graça.

Use o Conta-Gotas com Parcimônia para Combinar Cores Entre Abas

A EyeDropper API (somente Chromium em 2026) te deixa clicar em qualquer lugar da tela — inclusive fora do navegador — para amostrar a cor daquele pixel. Útil para combinar uma cor de uma captura de tela, um frame de vídeo ou a UI de outro app. Trate o resultado como ponto de partida, não como valor final — a renderização de tela aplica gerenciamento de cor que pode diferir do arquivo original. Para cores de marca canônicas, sempre pegue o hex da fonte de design (Figma, Sketch, o PDF de guidelines de marca) em vez de conta-gotear uma captura de tela.

Salve URLs com `#hex=...` Para Decisões de Paleta Compartilháveis

A cor atual é codificada no hash da URL como `#hex=...` ou `#oklch=...` automaticamente. Copie a URL, cole em uma thread do Slack ou em uma issue do GitHub, e qualquer pessoa que abrir cai na mesma cor exata. Útil para threads de design review onde "o azul da marca" precisa significar uma tripla OKLCH específica. O hash atualiza em cada mudança, então a URL na sua barra de endereço sempre é a cor atual ao vivo — salve para voltar a uma paleta específica depois.

Perguntas Frequentes