Nenhum dado é enviado a servidores — Todo o processamento ocorre no seu navegador
HEX
RGB
HSL
HSV
CMYK
LAB
OKLCH
HSV é apenas para referência. CSS não possui função hsv() — use HSL.
Variável CSS
--color-primary: #06d6a0;
Utilitário Tailwind
bg-[#06d6a0]
Tailwind v4 @theme
@theme {
  --color-primary: oklch(78% 0.16 167);
}

O Conversor de Cores é uma ferramenta online gratuita para converter entre HEX, RGB, HSL, OKLCH e outros espaços de cor. Inclui seletor visual, extração de paleta de imagens, verificador de contraste WCAG e pré-visualização de daltonismo. Roda inteiramente no seu navegador.

Sobre Conversão de Cores

Esta ferramenta de cores converte entre 7 espaços de cor, gera harmonias, verifica taxas de contraste (WCAG e APCA), simula daltonismo e extrai paletas de imagens. Veja o [Conversor de Base Numérica](/numbase) para cálculos hexadecimais, ou o [Compressor de imagens](/image) para processamento de imagens.

Espaços de Cor
HEX — notação RGB compacta de 6/8 dígitos. O padrão para CSS.
RGB — primárias aditivas de 0–255. Mapeia diretamente para pixels de exibição.
HSL — matiz/saturação/luminosidade. Mais intuitivo para humanos que RGB.
HSV — matiz/saturação/valor. Comum em ferramentas de design, mas não é uma função CSS.
CMYK — primárias subtrativas usadas em impressão. Aproximado quando convertido de RGB.
LAB — perceptualmente uniforme; distância numérica igual ≈ distância visual igual.
OKLCH — espaço perceptual moderno; preferido pelo Tailwind v4 e CSS Color Module Level 4.
Contraste (WCAG vs APCA)

WCAG 2.1 usa uma razão de luminância (1:1 a 21:1) com limiares para AA/AAA. É amplamente suportado, mas não considera completamente a percepção de texto pequeno ou modo escuro.

APCA é um candidato para WCAG 3 com uma pontuação Lc ciente de polaridade. Correlaciona-se melhor com legibilidade para texto fino ou pequeno.

Dicas

  • Use o conta-gotas para selecionar uma cor de qualquer pixel na sua tela (navegadores Chromium).
  • Solte uma imagem na aba Paleta para extrair suas 6 cores dominantes via quantização median-cut.
  • O Tailwind v4 emite cores em OKLCH para suavidade perceptual — copie o bloco @theme para alinhar com esse fluxo de trabalho.

Posso extrair cores de uma imagem?

Sim. Arraste e solte qualquer imagem na área de extração de paleta para obter as cores dominantes. Você também pode simular deficiências de visão de cores (protanopia, deuteranopia, tritanopia).

Ferramentas relacionadas

Compressor de ImagensConversor de Base Numérica