Seletor de Cores
Escolha qualquer cor e copie instantaneamente seu valor nos formatos HEX, RGB ou HSL.
O que é um Seletor de Cores?
Um seletor de cores é uma ferramenta digital que permite escolher visualmente qualquer matiz e convertê-lo instantaneamente em códigos numéricos e sintaxes de desenvolvimento. Usado diariamente por designers UI/UX e desenvolvedores frontend para garantir coerência visual.
Recursos da Ferramenta
- Seleção Visual Dinâmica: Arraste o cursor sobre a tela para calibrar matiz, saturação e luz com precisão.
- Cópia Imediata: Códigos HEX, RGB e HSL pré-formatados prontos para aplicação direta em arquivos CSS e Tailwind.
- Privacidade Absoluta: Todo o processamento ocorre no navegador do cliente sem transmissão de informações para servidores externos.
Ferramentas Relacionadas
Para extrair paletas de fotos e capturas de tela, use nosso Seletor de Imagem. Para garantir a acessibilidade de textos, confira o Verificador de Contraste WCAG.
Base de Conhecimento & FAQ
Perguntas Frequentes
Respostas e soluções diretas para dúvidas frequentes, desafios técnicos e padrões da indústria.
Como calcular a cor complementar, análoga ou triádica exata a partir do meu código HEX?expand_more
Os cálculos de harmonia cromática baseiam-se em rotações angulares no círculo cromático de 360 graus:
- Complementar: Rotacionar o matiz em 180° (ex:
(hue + 180) % 360). Um azul a 240° combina com um laranja vibrante a 60°. - Análoga: Rotacionar em ±30°. Um verde a 120° harmoniza com verde-limão (90°) e verde-água (150°).
- Triádica: Rotacionar em +120° e +240° formando um triângulo de alto contraste equilibrado.
O que é um código HEX de 8 caracteres (#RRGGBBAA) e como interpretá-lo?expand_more
Um código hexadecimal de 8 dígitos (como
#4F46E580) inclui um canal alfa (transparência). Os primeiros 6 caracteres definem Vermelho, Verde e Azul (#RRGGBB), enquanto os 2 últimos determinam a opacidade de 00 (0% / totalmente transparente) a FF (100% / totalmente opaco). O valor 80 em base 16 corresponde a 128 em decimal, representando 50% de opacidade.Qual a diferença entre HSV (HSB) e HSL nos seletores de cores?expand_more
Ambos são modelos cilíndricos derivados do RGB:
- HSV / HSB (Matiz, Saturação, Valor/Brilho): Define o brilho baseado no canal de cor mais intenso. É o padrão nas telas 2D de ferramentas como Photoshop e Figma.
- HSL (Matiz, Saturação, Luminosidade): Distribui a luz simetricamente onde 0% é preto, 50% é a cor pura e 100% é branco puro, integrando-se nativamente ao CSS com
hsl().
Como criar escalas suaves de tons claros (tints) e escuros (shades)?expand_more
Para gerar uma paleta sem tons cinzentos indesejados:
- Tons claros (Tints): Mantenha o matiz constante, eleve a luminosidade até 100% e reduza sutilmente a saturação para evitar superexposição.
- Tons escuros (Shades): Reduza a luminosidade até 0% rotacionando suavemente o matiz para tons mais frios (índigo ou azul marinho), evitando a adição simples de preto fosco.