Seletor de cores
Verifique o contraste WCAG, crie gradientes CSS e gere paletas de cores.
Só precisa escolher uma cor ou converter HEX ↔ RGB ↔ HSL (com conta-gotas)? Use o Conversor HEX RGB.
Exemplos
Verificação de contraste
Entrada
#1A1A1A sobre #F5F5F5
Saída
≈ 16:1 — passa AA & AAA
Gradiente CSS
Entrada
#3B82F6 → #9333EA, 90°
Saída
background: linear-gradient(90deg, #3B82F6, #9333EA);
Paleta
Entrada
#3B82F6
Saída
Tons + cores complementares, análogas, triádicas
Sobre esta ferramenta
Este estúdio de cor online e gratuito reúne três essenciais: um verificador de contraste WCAG com aprovado/reprovado AA/AAA e prévia de texto ao vivo; um gerador de gradientes CSS com declaração pronta para copiar; e um gerador de paletas para tons e cores complementares, análogas e triádicas. Cada aba tem um seletor de cor integrado, e tudo roda no seu navegador sem upload. Para a conversão pura HEX ↔ RGB ↔ HSL e um conta-gotas na tela, use o {link}.
Como usar
- Contraste: defina cores de texto e fundo para verificar a acessibilidade WCAG.
- Gradiente: escolha duas cores e um ângulo, depois copie o CSS.
- Paleta: digite uma cor base e clique em qualquer amostra para copiá-la.
Para quem é
Designers e desenvolvedores que verificam conformidade de acessibilidade, constroem fundos CSS e criam paletas coesas — sem malabarismo entre ferramentas separadas.
Perguntas frequentes
O que esta ferramenta de cor faz?
Três coisas em um só lugar: verificar o contraste WCAG entre duas cores, criar um gradiente CSS e gerar paletas de tons e harmonias a partir de uma cor base. Cada aba tem um seletor de cor integrado.
É grátis?
Sim — completamente grátis, sem cadastro, e tudo roda no seu navegador sem upload.
Como funciona o verificador de contraste?
Digite uma cor de texto e uma de fundo e ele mostra a razão de contraste WCAG mais aprovado/reprovado para AA e AAA em texto normal e grande, com prévia ao vivo.
De que razão de contraste eu preciso?
WCAG AA precisa de pelo menos 4,5:1 para texto normal e 3:1 para texto grande; AAA precisa de 7:1 e 4,5:1 respectivamente. O verificador sinaliza cada nível para você.
Posso copiar o gradiente CSS e as cores da paleta?
Sim. A aba de gradiente dá uma declaração background: pronta para copiar, e cada amostra da paleta copia seu hex ao clicar.
Onde escolho uma cor ou converto HEX/RGB/HSL?
Use o Conversor HEX RGB dedicado — ele escolhe uma cor (com conta-gotas na tela no Chrome/Edge) e mostra HEX, RGB e HSL. Este estúdio foca no que você faz com as cores: contraste, gradientes e paletas.
Posso capturar uma cor de uma página web ou imagem?
Sim — use o conta-gotas do Conversor HEX RGB (e seu bookmarklet) para capturar uma cor de qualquer lugar da tela no Chrome e Edge, e traga o hex para cá.
Ferramentas relacionadas