Imagem e design
Seletor de cores
Escolha uma cor e copie os valores HEX, RGB e HSL, com tons e sombras.
Privacidade e responsabilidade— nenhum dado é salvo · sem garantias · uso por conta e risco do usuárioexpandir
Esta ferramenta é executada integralmente no seu navegador. Os dados inseridos ou arquivos enviados não são transmitidos, armazenados nem retidos por este site — nenhuma informação sai do seu dispositivo.
A ferramenta é disponibilizada tal como está, sem garantias de qualquer natureza, expressas ou implícitas, incluindo exatidão, adequação a uma finalidade específica ou disponibilidade. Os resultados têm caráter informativo e não substituem aconselhamento profissional (jurídico, contábil, médico ou de engenharia). A conferência dos resultados e o uso que se faz deles são de exclusiva responsabilidade do usuário. Em nenhuma hipótese o autor será responsável por danos decorrentes do uso ou da impossibilidade de uso desta ferramenta.
Para que serve
O seletor de cores mostra uma cor nos três formatos usados em CSS e em programas de design (HEX, RGB e HSL), com botão de copiar em cada um, e gera uma paleta de quatro tons mais claros e quatro sombras mais escuras da mesma cor. Serve para pegar o código exato de uma cor, converter entre formatos ou montar variações de uma cor de marca para botões, fundos e estados de hover.
Você escolhe a cor no seletor do navegador ou digita o HEX. Os tons são misturas da cor com branco (80%, 60%, 40% e 20% da cor) e as sombras, misturas com preto nas mesmas proporções; clicar num deles o torna a cor atual, para ler os códigos e derivar mais variações.
HEX é a forma mais comum na web (#3B82F6); RGB separa vermelho, verde e azul de 0 a 255; HSL descreve matiz (0 a 360°), saturação e luminosidade em porcentagem, o que facilita criar variações só mudando a luminosidade. Os três representam a mesma cor.
Tudo acontece no navegador. A ferramenta não calcula contraste de acessibilidade; para texto sobre fundo, confira a relação de contraste (4,5:1 para texto normal, pela WCAG) num verificador próprio.
Como usar
- Clique no quadrado de cor para abrir o seletor do navegador, ou digite o código HEX.
- Copie o valor no formato que precisar: HEX, RGB ou HSL.
- Clique num tom ou numa sombra para usá-lo como cor atual e copiar os códigos dele.
Exemplo
O azul #3B82F6 é rgb(59, 130, 246) e hsl(217, 91%, 60%). Entre os tons, a mistura com 80% de branco dá um azul-claro bom para fundo de aviso; entre as sombras, a de 20% de preto serve para o estado de hover de um botão com a cor original.
Perguntas frequentes
Qual formato usar no CSS?
Qualquer um; o navegador entende os três. HEX é o mais curto; HSL é o mais fácil de ajustar à mão, porque mudar só a luminosidade gera um tom mais claro ou mais escuro da mesma cor.
Como faço uma cor mais clara sem perder o tom?
Use os tons da paleta (mistura com branco) ou, em HSL, aumente a luminosidade mantendo matiz e saturação.
A ferramenta mede o contraste?
Não. Para texto, a WCAG pede contraste de pelo menos 4,5:1 com o fundo (3:1 para texto grande); use um verificador de contraste com os códigos copiados daqui.
