O que é Seletor de Cores?

Escolha qualquer cor visualmente e obtenha os valores hex, RGB e HSL. Clique ou arraste para encontrar o tom certo e copie o código que precisar.

Arraste dentro do quadrado de saturação/brilho para mudar o tom, mova a barra de matiz para trocar de família de cor, e a ferramenta cospe valores hex, RGB e HSL prontos para copiar com um clique. Se digitar um hex no campo, o quadrado pula para aquele ponto, ótimo para refinar uma cor de marca sem começar de um tom aleatório.

Como usar

1. Clique na área de cores ou arraste o seletor para encontrar sua cor
2. Ajuste com o controle de matiz e o controle de opacidade opcional
3. Copie o valor hex, RGB ou HSL com um clique

Quando usar

• Escolher cores de destaque para o CSS de um site sem abrir programas de design.
• Transformar um hex do manual de marca em HSL para o design system.
• Montar uma paleta enxuta de tons vizinhos deslizando o seletor de matiz.

Resultado

Selecione um laranja quente: #E67E22, rgb(230, 126, 34), hsl(28, 80%, 52%).

Perguntas frequentes

Qual a diferença entre HSL e HSB (HSV)?

HSL vai do preto ao branco passando pela cor pura em luminosidade 50%, ótimo para tintas e sombras simétricas. O HSB (do Photoshop) vai do preto à cor pura em brilho 100%, mais próximo do raciocínio de quem mistura tinta.

Por que as cores na tela ficam diferentes do impresso?

A tela usa RGB (luz aditiva), a impressão usa CMYK (tinta subtrativa). Verdes vibrantes e azuis elétricos, principalmente, não têm equivalente exato em CMYK. Sempre tire uma prova no meio final antes de aprovar.

Os hex já vêm seguros para WCAG?

Não — acessibilidade depende do par de cores, não de uma só. Combine o hex do texto com o do fundo e verifique a razão de contraste (mínimo 4,5:1 para texto corrido e 3:1 para texto grande).

Como pego uma cor que já existe na tela?

Clique em Capturar da tela e o conta-gotas deixa você amostrar qualquer pixel da sua tela: o hex exato entra direto no seletor para ajustar saturação, brilho ou transparência. (O botão do conta-gotas só aparece onde há suporte; caso contrário, leia o hex com o medidor de cor do seu sistema — Digital Color Meter no macOS, PowerToys no Windows, DevTools do Chrome — e cole no campo de entrada.)

Esse seletor aceita transparência?

Sim. Abaixo da barra de matiz há um controle de Opacidade que ajusta qualquer alfa de 0 a 100%. A pré-visualização mostra um xadrez por trás da cor para você ver o nível de transparência de relance, e os botões de copiar RGB e HSL passam automaticamente para rgba() e hsla() quando o alfa cai abaixo de 100%.

Ferramentas relacionadas