Seletor de cores/ HEX · RGB · HSL
Selecione, converta e explore cores. Suporta HEX, RGB, HSL, HSV com escalas de luminosidade e paletas harmonicas.
Valores de cor
Cores predefinidas
Escala de luminosidade
Harmonias de cores
Complementar
Análogo
Tríade
Esta ferramenta resolveu o seu problema?
Perguntas frequentes
Quais formatos de cor sao suportados?
A ferramenta suporta HEX (ex. #6366f1), RGB (ex. rgb(99, 102, 241)), HSL (ex. hsl(239, 84%, 67%)) e HSV/HSB. Digite qualquer um desses formatos no campo de entrada e ele sera automaticamente analisado e convertido.
O que e o conta-gotas (EyeDropper)?
O botao conta-gotas permite clicar em qualquer lugar da tela para selecionar a cor daquele pixel. Isso usa a API EyeDropper do navegador, disponivel no Chrome, Edge e Opera. Ainda nao e suportado no Firefox ou Safari.
O que e uma escala de luminosidade?
A escala de luminosidade mostra 9 tons da cor escolhida, do muito escuro (10% de luminosidade) ao muito claro (90%), todos com a mesma matiz e saturacao. E util para construir paletas de cores consistentes no design de UI.
O que sao harmonias de cor?
Harmonias de cor sao conjuntos de cores que combinam visualmente bem. Cores complementares ficam opostas na roda de cores (alto contraste). Cores analogas sao vizinhas (harmoniosas). Triadicas sao tres cores equidistantes (vibrantes e equilibradas).
Qual e a diferenca entre HSL e HSV?
Ambos usam matiz (H) e saturacao (S), mas o terceiro componente difere. HSL usa luminosidade L (0%=preto, 50%=cor pura, 100%=branco). HSV usa valor V (0%=preto, 100%=brilho maximo). HSV e frequentemente usado em ferramentas criativas como Photoshop; HSL e mais comum em CSS.
Como uso essas cores no CSS?
Copie o valor HEX (ex. #6366f1) para o uso mais comum. Use o valor RGB para rgba() com transparencia: rgba(99, 102, 241, 0.5). Use o valor HSL quando quiser ajustar programaticamente a luminosidade ou saturacao em propriedades CSS personalizadas.