Seletor de cores (HEX, RGB, HSL, OKLCH)
Escolha uma cor no quadrado de saturação e brilho ou escreva HEX, RGB, HSL ou OKLCH. Todos os formatos ficam sincronizados, com escala de tons, conta-gotas (Chromium) e paletas exportáveis em CSS e JSON.
Como escolher e exportar cores
1. Arraste no quadrado e no cursor de matiz, ou cole um valor HEX/RGB/HSL/OKLCH.
2. Leia HEX, RGB, HSL e OKLCH sincronizados na barra.
3. Clique numa sombra ou amostra de harmonia para explorar cores relacionadas.
4. Copie um valor, um link ?hex= ou exporte variáveis CSS / JSON.
Exemplos do seletor de cores
Terracota de marca #8F665E
O seletor HSV mantém o matiz ao escurecer para hover. Exporte --color e --shade-* como variáveis CSS.
Paleta análoga para dashboard
Escolha Análogos para matizes ±30° e ±60°. Copie a faixa como custom properties para cartões e gráficos.
OKLCH para passos uniformes
A rampa varia a claridade OKLCH, mais uniforme do que misturar HEX com branco. Use oklch() em CSS moderno.
Quando usar esta ferramenta
• Quando escolhe cores de UI e precisa de HEX, RGB, HSL e OKLCH ao mesmo tempo.
• Quando gera tons hover/muted a partir de um matiz de marca.
• Quando exporta uma paleta pequena (harmonia + rampa) para variáveis CSS.
Harmonias para paletas de UI
Complementares ficam a 180° — contraste forte, use com parcimónia em CTA. Análogos (±30–60°) unificam um dashboard. Tríades e tétrades dão mais variedade; baixe a saturação dos extras para o primary liderar. Verifique o texto no verificador de contraste WCAG.
Perguntas frequentes
HEX vs RGB vs HSL vs OKLCH?
HEX e RGB são a mesma cor sRGB. HSL serve para ajustar matiz e claridade. OKLCH é percetual: passos L semelhantes parecem mais uniformes, e oklch() é CSS moderno válido.
O conta-gotas funciona em todos os browsers?
A API EyeDropper existe no Chromium (Chrome, Edge). Nos outros, escreva um valor ou use o seletor visual.
Posso partilhar uma cor?
Sim. O URL atualiza-se com ?hex=RRGGBB. Copie o link para reabrir a mesma cor.
As cores passam por um servidor?
Não. Conversão, harmonias e exportação correm localmente no browser.