* Seu conteúdo não é transferido para o servidor. Todos os cálculos são realizados diretamente no 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);
}

Sobre conversão de cores

Um conversor de cores traduz a mesma cor entre os formatos usados na web, impressão e design — HEX para CSS, RGB/HSL para ajustes em tempo real, CMYK para impressão, LAB/OKLCH para uniformidade perceptual.

Espaços de cor
HEX — notação RGB compacta de 6/8 dígitos. O padrão para CSS.
RGB — primárias aditivas 0–255. Mapeia diretamente para os pixels da tela.
HSL — matiz/saturação/luminosidade. Mais intuitivo que RGB para humanos.
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 limites para AA/AAA. É amplamente suportado, mas não considera totalmente a percepção de textos pequenos ou modo escuro.

APCA é um candidato para WCAG 3 com uma pontuação Lc que considera polaridade. Correlaciona-se melhor com legibilidade para textos finos ou pequenos.

Dicas

  • Use o conta-gotas para pegar a 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.