Color Picker & Converter

Seletor e Conversor de Cores

Escolha visualmente ou cole qualquer valor — HEX, RGB, HSL, OKLCH e OKLAB ficam sincronizados. Inclui verificador de contraste WCAG 2.2 e gerador de paleta baseado em OKLCH. Roda inteiramente no seu navegador.

Seletor e Conversor de Cores — TL;DR

Escolha visualmente ou cole qualquer valor — HEX, RGB, HSL, OKLCH e OKLAB ficam sincronizados. Inclui verificador de contraste WCAG 2.2 e gerador de paleta baseado em OKLCH. Roda inteiramente no seu navegador.

Cole o valor hex (ex.: #ff5722) no campo HEX — a linha RGB será atualizada instantaneamente. Da mesma forma, cole rgb(255 87 34) no campo RGB e HEX, HSL, OKLCH e OKLAB serão sincronizados. A conversão é bidirecional em todos os formatos suportados.

OKLCH é um espaço de cor do CSS Color Module Level 4 que usa luminosidade perceptual (L), croma (C) e matiz (h) — como o HSL, mas perceptualmente uniforme. Duas cores OKLCH com o mesmo valor de L parecem igualmente claras, mesmo em matizes diferentes. Isso torna tokens de design, paletas geradas e rampas acessíveis muito mais previsíveis do que o HSL. Todos os navegadores evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) o suportam.

Os valores de cor nunca saem do seu dispositivo. Abra DevTools → Network e verá zero requisições externas durante a conversão, escolha, geração de paleta ou verificação de contraste.

HEX
RGB
HSL
OKLCH
OKLAB
Nomeada

Paleta

Contraste WCAG 2.2

Texto
Fundo
—
Pré-visualização
Amostra de título grande
Amostra de texto corrido — a rápida raposa marrom salta sobre o cão preguiçoso.

Projetado para fluxos de trabalho reais

De design systems a auditorias de acessibilidade — todos os formatos e verificações de que você precisa, em um só lugar.

Seis espaços de cor

Conversão bidirecional entre HEX (3 / 4 / 6 / 8 dígitos), RGB(A), HSL(A), OKLCH, OKLAB e cores nomeadas do CSS. As strings de saída seguem a sintaxe do CSS Color Module Level 4 — cole-as direto nas suas folhas de estilo.

Verificador de contraste WCAG 2.2

Veja a razão de contraste entre duas cores quaisquer com selos de aprovação/reprovação em um clique para AA (4.5 : 1) e AAA (7 : 1), em tamanhos de texto normal e grande. O cálculo segue a referência da W3C: linearização sRGB, luminância relativa e (L1+0.05)/(L2+0.05).

EyeDropper — capture qualquer pixel

Clique no conta-gotas para capturar qualquer cor da sua tela — designs, capturas, fotos e até outras abas do navegador. Usa a API EyeDropper nativa em navegadores Chromium.

Paleta baseada em OKLCH

Gere 9 passos de tons claros e escuros mais harmonias complementar, triádica e análoga — derivadas em OKLCH para que cada passo fique perceptualmente bem espaçado (ao contrário do HSL, em que a luminosidade varia muito).

Privacidade por design

Toda conversão roda em JavaScript no seu dispositivo. Nada é enviado, registrado ou compartilhado com terceiros — abra DevTools → Network se quiser verificar você mesmo.

Feito para velocidade

JavaScript puro, sem runtime de framework. Carregamento inicial abaixo de 50 KB gzip; conversões e geração de paleta terminam em menos de um milissegundo num laptop de cinco anos.

Como usar o seletor de cores

Quatro formas de começar, todos os formatos sincronizados.

  1. 1

    Escolha visualmente

    Arraste dentro do quadrado de saturação/valor para escolher a tonalidade, deslize a barra de matiz abaixo para alterar a cor base e use o controle de alfa para a transparência. Todos os formatos à direita são atualizados instantaneamente.

  2. 2

    Cole qualquer valor

    Cole um HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) ou até uma cor nomeada do CSS (tomato) no campo correspondente — o seletor e os outros formatos sincronizam.

  3. 3

    Capture com o conta-gotas

    Clique no botão do conta-gotas para capturar qualquer pixel da tela — outra aba, uma captura, uma foto, um ícone. Usa a API EyeDropper nativa em Chrome, Edge e Opera.

  4. 4

    Copie ou verifique o contraste

    Clique no ícone de copiar ao lado de qualquer formato para enviá-lo para a área de transferência. Ou role até a seção de contraste WCAG 2.2 para conferir se a sua combinação de primeiro plano / fundo passa em AA ou AAA, em tamanhos de texto normal e grande.

Feito para designers, desenvolvedores e auditores de acessibilidade

Uma ferramenta de cor que se encaixa em quatro fluxos de trabalho comuns.

Criação de tokens de design system

Converta valores HEX da marca para OKLCH para que cada passo da sua rampa de tokens tenha o mesmo incremento de luminosidade perceptual. Cole a saída OKLCH direto no seu CSS — sem necessidade de pré-processador.

Auditorias de acessibilidade WCAG

Insira pares de primeiro plano / fundo e leia a razão de contraste e os selos AA / AAA. Identifique combinações reprovadas antes do deploy — atende aos limites obrigatórios da W3C de 4.5 : 1 normal / 7 : 1 aprimorado.

Conversão CSS no front-end

Tem um HEX de um mockup de designer mas precisa de um HSL para uma config Tailwind ou um OKLCH para uma folha de estilo moderna? Cole uma vez, copie em qualquer formato. As strings de saída são sintaxe válida do CSS Color Module Level 4.

Exploração de paletas

Escolha uma cor base e veja instantaneamente nove tons claros e escuros perceptualmente espaçados, mais harmonias complementar, triádica e análoga — geradas em OKLCH para que cada passo pareça igualmente claro.

100% privado — roda no seu navegador

Os valores de cor nunca saem do seu dispositivo. Abra DevTools → Network e verá zero requisições externas durante a conversão, escolha, geração de paleta ou verificação de contraste.

  • Toda conversão (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) roda como JavaScript na sua máquina — as fórmulas estão visíveis no código-fonte da página.
  • A API EyeDropper só retorna cores que você clica explicitamente; o navegador gerencia a permissão e nunca permite que a página veja pixels arbitrários.
  • Sem login, sem telemetria sobre valores de cor, sem API de cor de terceiros. O site é compatível com o GDPR de fábrica.

Guias relacionados

Tutoriais selecionados para designers, desenvolvedores e equipes de acessibilidade.

Perguntas frequentes

Como converter HEX para RGB?

Cole o valor hex (ex.: #ff5722) no campo HEX — a linha RGB será atualizada instantaneamente. Da mesma forma, cole rgb(255 87 34) no campo RGB e HEX, HSL, OKLCH e OKLAB serão sincronizados. A conversão é bidirecional em todos os formatos suportados.

O que é OKLCH e por que devo usá-lo?

OKLCH é um espaço de cor do CSS Color Module Level 4 que usa luminosidade perceptual (L), croma (C) e matiz (h) — como o HSL, mas perceptualmente uniforme. Duas cores OKLCH com o mesmo valor de L parecem igualmente claras, mesmo em matizes diferentes. Isso torna tokens de design, paletas geradas e rampas acessíveis muito mais previsíveis do que o HSL. Todos os navegadores evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) o suportam.

O resultado de contraste WCAG é confiável?

Sim. Usamos o algoritmo do WCAG 2.2 §1.4.3: linearizamos cada canal sRGB, calculamos a luminância relativa (0.2126·R + 0.7152·G + 0.0722·B) e então (L_mais_clara + 0.05) / (L_mais_escura + 0.05). AA passa em 4.5 : 1 para texto normal e 3 : 1 para texto grande (18 pt+ ou 14 pt+ em negrito). AAA passa em 7 : 1 e 4.5 : 1, respectivamente.

Posso capturar cores de imagens ou outros aplicativos?

Sim — clique no botão Conta-gotas para acionar a API EyeDropper integrada do navegador. Você pode capturar qualquer pixel em qualquer parte da tela: outra aba, um design no Figma, um quadro de vídeo, até uma captura de tela. Atualmente suportado em Chrome, Edge e Opera; Firefox e Safari fazem fallback gracioso (o botão fica desativado).

Algo é enviado ao seu servidor?

Não. O seletor, todas as conversões, o gerador de paleta e o verificador de contraste rodam no seu navegador. Nenhum valor de cor, amostra de imagem ou texto é transmitido. Você pode abrir DevTools → Network e verificar que não há requisições externas durante o uso.