Selecionador de Cores
Escolha qualquer cor e obtenha valores HEX, RGB e HSL instantaneamente. Clique no espectro, ajuste o tom, copie o código.
Como usar o selecionador de cores
Escolher
Clique em qualquer lugar no espectro de cores para selecionar uma cor. Use o controle deslizante de tom abaixo para alterar o tom base.
Ler
Os valores HEX, RGB, HSL e CSS são atualizados instantaneamente. Você também pode digitar um código HEX diretamente no campo de entrada.
Copiar
Clique no botão copiar ao lado de qualquer valor para copiá-lo para a área de transferência. As cores recentes são salvas na faixa de histórico.
Referência de Formato de Cores
| Formato | Exemplo | Usado em | Vantagem |
|---|---|---|---|
| HEX | #FF5733 | CSS, HTML, ferramentas de design | Compacto, amplamente reconhecido |
| RGB | rgb(255, 87, 51) | CSS, JavaScript, Photoshop | Corresponde a como as telas exibem a cor |
| HSL | hsl(11, 100%, 60%) | CSS, sistemas de design modernos | Intuitivo para ajustar (tom, saturação, luminosidade) |
Casos de Uso Comuns
Desenvolvimento web
Escolha cores para folhas de estilo CSS, componentes React e tokens de design. Copie valores HEX ou HSL diretamente para o seu código.
Design gráfico
Encontre valores de cor exatos para Figma, Photoshop, Illustrator ou Canva. Corresponda às cores da marca inserindo um código HEX conhecido.
Apresentações
Escolha cores complementares para PowerPoint ou Google Slides. Use o espectro para encontrar cores que funcionem bem juntas.
Redes sociais
Corresponda às cores da marca para gráficos de redes sociais, banners e elementos de perfil. Copie valores CSS para ferramentas de design baseadas na web.