Color Picker Online
Escolha uma cor na roda, afine-a na tela de saturação e leia-a de volta em todos os formatos que o seu projeto fala — de #RRGGBB a oklch(). Este seletor também trata das partes que outras ferramentas ignoram: três geometrias de roda, incluindo a roda RYB dos pintores, sobreposições de harmonia que constroem uma paleta por si, um canal alfa, e exportação num clique de toda a paleta como variáveis CSS, SCSS ou JSON. Tudo calculado localmente no seu navegador.
Três rodas, não uma
O seletor Modo da Roda altera a geometria da própria roda:
- HSV e HSL são as rodas digitais — matizes distribuídos da forma como os ecrãs RGB misturam luz. Diferem na forma como a tela quadrada se comporta: no HSV o canto mais luminoso é o matiz puro, no HSL os matizes puros ficam a 50% de luminosidade, com branco acima.
- RYB (pintores) organiza os matizes da forma como os artistas aprenderam: vermelho, amarelo e azul como primárias, com laranja, verde e roxo entre elas. O seu valor prático nota-se nas harmonias — na roda RYB, o complementar do vermelho é o verde e o complementar do azul é o laranja, os pares clássicos de pigmento, enquanto uma roda digital emparelha o vermelho com o ciano. Se alguma vez uma paleta “complementar” de um seletor comum lhe pareceu errada, é por causa disto.
Harmonias que constroem a paleta por si
Escolha uma regra em Harmonia de Cores e a roda marca as cores complementares, que surgem como uma paleta pronta a usar:
- Complementar — uma cor oposta. O contraste mais forte; use-a para um único destaque contra uma cor de marca dominante.
- Complementar Dividida — os dois vizinhos do complementar. Quase tanto contraste, muito mais fácil de equilibrar.
- Triádica — três matizes uniformemente espaçados. Vivo mas estável; deixe um dominar e use os outros dois com moderação.
- Tetrádica (quadrado) — quatro matizes. Esquemas ricos para ilustrações e visualização de dados; difícil de equilibrar em interfaces.
- Análoga — os vizinhos imediatos. Baixa tensão, boa para fundos e gradientes.
- Monocromática — um único matiz em luminosidades escalonadas. A escolha mais segura para estados de interface (hover, ativo, desativado).
O painel da paleta copia todo o conjunto num clique, no formato que escolher: HEX simples, RGB, HSL, OKLCH, propriedades personalizadas CSS prontas a colar (--color-1: …), variáveis SCSS ou JSON para entregar ao código.
Cole o que for, leia tudo
Os campos de entrada aceitam praticamente qualquer notação de cor que lhes dê: #f80, #ff8800, hex de 8 dígitos com alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, ou nomes de cores CSS como rebeccapurple. Seja o que for que introduza, sete saídas sincronizadas são devolvidas: HEX, RGB, HSL, HSV, LCH, OKLCH e CMYK, cada uma com o seu próprio botão de copiar.
Duas etiquetas auxiliares por baixo da pré-visualização nomeiam a cor por si: a cor CSS com nome mais próxima (útil para protótipos rápidos e para falar sobre cores) e o token Tailwind mais próximo (por exemplo, orange-500), para que se mantenha dentro do seu sistema de design em vez de inventar valores avulsos.
Arraste o cursor de opacidade (alfa) por baixo da pré-visualização e as saídas mudam para as suas formas transparentes — #RRGGBBAA, rgba(), hsla() — com a pré-visualização mostrada sobre um padrão axadrezado para que possa avaliar a transparência.
Que formato deve usar?
| Formato | Nome Completo | Quando usar? |
|---|---|---|
| HEX | Hexadecimal | A norma da web. Compacto, universalmente suportado, fácil de copiar. 8 dígitos acrescentam alfa. |
| RGB | Red, Green, Blue | Como os ecrãs pensam. Três canais de luz, 0–255. O formato que a maioria das APIs e do código canvas espera. |
| HSL | Hue, Saturation, Lightness | Para humanos a editar à mão. “Um pouco mais claro” ou “menos saturado” é apenas mudar um número. |
| HSV | Hue, Saturation, Value | Software gráfico. O modelo por trás dos seletores do Photoshop e do GIMP. |
| LCH | Lightness, Chroma, Hue | Perceptualmente uniforme. Passos numéricos iguais parecem passos visuais iguais — o que o HSL finge ser. |
| OKLCH | OK Lightness, Chroma, Hue | A escolha moderna do CSS. Corrige os desvios de matiz do LCH nos azuis; suportado em todos os navegadores atuais e ideal para sistemas de tokens de design. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientação para impressão. Uma conversão aproximada para falar com designers de impressão — os valores finais vêm sempre do perfil de cor da impressora. |
Pequenos detalhes que poupam tempo
- O histórico mantém-se sozinho. As últimas 24 cores com que trabalhou sobrevivem a uma atualização da página — guardadas apenas no armazenamento local do seu navegador, nunca enviadas para lado nenhum.
- Conta-gotas. Em navegadores com a API EyeDropper (Chrome e Edge) pode escolher uma cor em qualquer ponto do ecrã, mesmo fora da janela do navegador.
- Controlo por teclado. A roda e a tela de saturação respondem às setas do teclado para ajustes precisos ao pixel.
- Predefinições cobrem as cores base comuns quando só precisa de um ponto de partida rápido.
Perguntas Frequentes (FAQ)
É seguro usar oklch() em CSS de produção?
Sim. Todas as versões atuais do Chrome, Edge, Firefox e Safari suportamoklch(), e tornou-se a notação preferida para tokens de design (o Tailwind CSS 4 define toda a sua paleta nesse formato). Para navegadores muito antigos, sirva um fallback em HEX na linha anterior — esta ferramenta dá-lhe ambos os valores.