Seletor de cor
Escolha uma cor num campo visual e obtenha o código HEX, RGB e HSL.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Uma cor, todos os seus códigos
Escolha visualmente uma cor, ajuste matiz e opacidade, e obtenha os códigos HEX, RGB e HSL prontos a colar no seu CSS. Clique num valor para o copiar.
-
Ajuste o matiz
O cursor arco-íris escolhe a cor base.
-
Afine no campo
Saturação na horizontal, brilho na vertical.
-
Copie o código
HEX, RGB ou HSL, com opacidade se preciso.
Exemplo: um laranja vivo
| Formato | Valor |
|---|---|
| HEX | #FF8800 |
| RGB | rgb(255, 136, 0) |
| HSL | hsl(32, 100%, 50%) |
Conversões sRGB padrão, valores arredondados a inteiros. Tudo é calculado no seu navegador.
Perguntas frequentes
Como funciona o campo de cor?
O quadrado grande mostra a saturação (esquerda para direita) e o brilho (de baixo para cima) para o matiz escolhido com o cursor. Clique ou arraste para selecionar; o valor HEX/RGB/HSL atualiza ao vivo.
Qual a diferença entre HEX, RGB e HSL?
HEX é um código hexadecimal compacto (#FF8800). RGB descreve a cor pelas componentes vermelho, verde, azul (rgb(255, 136, 0)). HSL descreve-a por matiz, saturação, luminosidade (hsl(32, 100%, 50%)) — mais intuitivo para ajustar um tom.
Para que serve a opacidade?
Controla a transparência (canal alfa). Abaixo de 100 %, os códigos passam a rgba()/hsla() e o HEX ganha dois caracteres (ex. #FF8800CC). Útil para sobreposições e sombras.
A cor é exata para a web?
Sim: os valores são calculados com as conversões padrão sRGB e arredondados a inteiros. Copie o formato adequado ao seu CSS. Tudo é calculado localmente, nada é enviado.