Seletor e Conversor de Cor
Escolha uma cor com o seletor, arraste a barra de tonalidade ou escreva o seu valor HEX/RGB/HSL e obtenha instantaneamente a sua representação em todos os formatos, com pré-visualização ao vivo.
Selecione uma cor
Cor selecionada
#3B82F6
HEX
#3B82F6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)CMYK
cmyk(76%, 47%, 0%, 4%)Complementar#F6AF3C
Consultas populares
Como usar: Seletor de cor
- 1Escolha uma cor com o seletor ou escreva o código HEX.
- 2Consulte os valores HEX, RGB e HSL.
- 3Copie o formato de que precisa ou a cor complementar.
Para que serve?
- Passar cores de um design para CSS.
- Converter entre HEX, RGB e HSL.
- Encontrar a complementar de uma cor de marca.
Formatos de cor: HEX, RGB e HSL
Três formas de escrever
O HEX (#1d4ed8) é a notação mais compacta em CSS; o RGB exprime a mistura de vermelho, verde e azul de 0 a 255; o HSL descreve tom (0–360°), saturação e luminosidade e é mais intuitivo para ajustar.
Porquê HSL
Para uma variante mais clara ou escura basta mudar a luminosidade sem alterar o tom, o que é difícil em HEX. É a base de muitos sistemas de design.
Transparência
Com canal alfa (rgba ou HEX de 8 dígitos) a cor ganha opacidade. O contraste real depende do fundo.
Ferramentas relacionadas
Perguntas frequentes
Que formato devo usar em CSS?+
HEX e RGB são os mais usados. HSL é mais fácil de ler e ajustar. CMYK é específico para impressão.