Skip to content
user@convertitive:~$convertitive

Seletor de Cor

Escolha uma vez, obtenha todos os formatos. Mais uma leitura ao vivo do contraste WCAG em relação ao branco e ao preto.

O seletor abaixo exibe a cor escolhida e calcula suas representações em três formatos: hex, rgb() e hsl(). Ao lado de cada formato, um botão de cópia com um toque. Abaixo, a razão de contraste WCAG ao vivo em relação ao branco puro e ao preto puro — útil para verificar combinações de texto e fundo. Isso tudo roda inteiramente no seu navegador; nada é enviado a um servidor.

rgb(59 130 246)
hsl(217 91% 60%)

WCAG contrast vs:

White: 3.68:1

AA large only

Black: 5.71:1

AA body

How to use

  1. Escolha uma cor

    Clique na pré-visualização da cor para usar o seletor de cores do sistema, ou digite diretamente um valor hex ou RGB.

  2. Copie o formato de que precisa

    Hex para armazenamento e arquivos de design. rgb() para código que processa canais. hsl() para rotações de matiz em design tokens.

  3. Verifique o contraste

    As duas badges de contraste mostram a razão WCAG em relação ao branco puro e ao preto puro. Use-as para verificar combinações de cores de texto.

Frequently asked questions

Por que três formatos?
Cada um tem seu uso. Hex é o formato de armazenamento universal que copia limpo em qualquer ferramenta. rgb() é o que o código programático gera e consome. hsl() permite que um designer ajuste brilho ou saturação de forma independente — exatamente o que se quer para variantes de design token (estados de hover, ajustes de tema).
O que a verificação de contraste WCAG mede?
A razão entre a luminância relativa de duas cores, numa escala de 1:1 (idênticas) a 21:1 (preto sobre branco). O WCAG 2.1 AA exige 4,5:1 para texto de corpo e 3:1 para texto grande e componentes de interface. A fórmula está no WCAG 2.1 §1.4.3.
O seletor suporta OKLCH?
Ainda não — hex, RGB e HSL cobrem 95% dos casos de uso práticos. Para OKLCH e a discussão mais ampla sobre cores perceptuais, consulte nosso guia de formatos de cor CSS. Você também pode colar um valor OKLCH em um pré-processador CSS; os navegadores modernos convertem internamente.
Por que o hex às vezes tem 4 dígitos em vez de 6?
O hex de três ou quatro dígitos (ex.: #F60, #F60A) é uma abreviação onde cada dígito é duplicado. #F60 = #FF6600. A forma de 4 dígitos inclui o canal alfa. A maioria do código moderno usa a forma completa de 6/8 dígitos para maior clareza; ambas são CSS válido.
O seletor salva meu histórico?
Não. Tudo roda no seu navegador; nada é enviado a um servidor ou armazenado entre páginas.

Ferramentas relacionadas