Escolha uma cor e obtenha seus valores HEX, RGB, CMYK, HSV e HSL na hora

Um seletor de cores é uma ferramenta online gratuita que permite escolher uma cor e ler na hora seu valor em cinco formatos: HEX, RGB, CMYK, HSV e HSL. Escolha uma cor na paleta ou cole um valor HEX ou RGB e copie o formato que precisar com um clique. Ele também inclui um verificador de contraste WCAG para testar uma cor de texto sobre uma cor de fundo e confirmar que é acessível. Tudo funciona no seu navegador, grátis e sem cadastro.

HEX

RGB

CMYK

HSV

HSL

Color

WCAG contrast checker

Check that a text color is readable on a background color. WCAG 2.1 requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.

Text color (HEX)

Background color (HEX)

Contrast ratio

Sample text: check how readable this is

AA normal text (4.5:1)
AA large text (3:1)
AAA normal text (7:1)
AAA large text (4.5:1)

Como usar o seletor de cores

Escolha uma cor na paleta ou digite um valor HEX ou RGB para ver a cor que ele representa.
Copie qualquer um dos cinco formatos com o botão de copiar ao lado.
Desça até o verificador de contraste para testar uma cor de texto sobre uma cor de fundo e ver quais níveis WCAG ela atende.

Qual formato de cor você deve usar?

Formato	Ideal para	Exemplo
HEX	Sites, CSS, ferramentas de design	#f4ae00
RGB	Telas, CSS com transparência (rgba)	rgb(244, 174, 0)
CMYK	Impressão: folhetos, embalagens, cartões de visita	0%, 29%, 100%, 4%
HSV	Seletores de cor em softwares gráficos	hsv(43°, 100%, 96%)
HSL	Paletas CSS: tons mais claros e mais escuros do mesmo matiz	hsl(43°, 100%, 45%)

Usos comuns

Reproduzir a cor de uma marca quando você só tem um código HEX do designer.
Converter uma cor da web para CMYK antes de enviar os arquivos para a gráfica.
Verificar se o texto dos botões e do corpo atende ao requisito de contraste de 4.5:1 do WCAG 2.1.
Montar uma paleta CSS: mantenha o matiz e a saturação e mude só a luminosidade HSL.

Perguntas frequentes sobre o seletor de cores

O seletor de cores é grátis?

Sim, o seletor de cores e o verificador de contraste são totalmente gratuitos, sem cadastro e sem limites de uso.

Qual é a diferença entre HEX, RGB, CMYK, HSV e HSL?

HEX e RGB descrevem as mesmas cores de tela em notações diferentes: HEX é a forma compacta usada em CSS e nas ferramentas de design, e RGB lista os valores de vermelho, verde e azul. CMYK descreve a cobertura de tinta para impressão. HSV e HSL descrevem uma cor pelo matiz, o que os torna práticos para montar paletas e ajustar o brilho.

Como converto HEX para RGB?

Cole o valor HEX no campo HEX e o valor RGB aparece imediatamente no campo RGB. A conversão também funciona ao contrário: digite um valor RGB e você recebe o código HEX.

Qual relação de contraste eu preciso para acessibilidade?

O nível AA do WCAG 2.1 exige uma relação de pelo menos 4.5:1 para texto normal e 3:1 para texto grande (18pt ou mais, ou 14pt em negrito). O nível AAA exige 7:1 para texto normal. O verificador de contraste desta página mostra quais desses níveis o seu par de cores atende.

Posso converter uma cor de tela em uma cor de impressão?

Sim, a ferramenta mostra o valor CMYK de qualquer cor que você escolher. Lembre que a conversão para CMYK é uma aproximação: a cor impressa final também depende do perfil da impressora e do papel, então sempre peça uma prova impressa para cores críticas de marca.

Seletor de cores