Color Picker Online
Escolha uma cor na roda, ajuste-a no quadro de saturação e brilho e leia o resultado em todos os formatos que o seu projeto usa, de #RRGGBB a oklch(). A ferramenta também cobre o que outros seletores de cor deixam de fora: três geometrias de roda, incluindo a roda RYB tradicional dos pintores, harmonias que montam uma paleta sozinhas, canal alfa e exportação da paleta inteira em um clique como variáveis CSS, SCSS ou JSON. Tudo calculado no seu navegador.
RYB ou RGB? Três rodas de cores em vez de uma
O seletor Modo da Roda muda como os matizes ficam distribuídos na roda:
- HSV e HSL são rodas digitais. Os matizes ficam onde a luz os mistura na tela. Elas diferem no quadro: no HSV o canto mais claro é o matiz puro, enquanto no HSL os matizes puros ficam na luminosidade média, com o branco acima.
- RYB (pintores) organiza os matizes como os pintores aprendem: vermelho, amarelo e azul como primárias, com laranja, verde e roxo entre elas (veja o modelo RYB na Wikipédia). A diferença aparece principalmente nas harmonias. Na roda RYB o complementar do vermelho é o verde e o complementar do azul é o laranja, os pares clássicos de pigmento. Uma roda digital combina o vermelho com o ciano. Se uma paleta “complementar” de um seletor comum já pareceu errada para você, é por isso.
Harmonias de cores que montam a paleta para você
Escolha uma regra em Harmonia de Cores. A roda marca as cores companheiras e uma paleta pronta aparece abaixo dela:
- Complementar: uma cor oposta. O contraste mais forte, bom para um único destaque ao lado da cor principal da marca.
- Complementar Dividida: os dois vizinhos do complementar. Quase tanto contraste, mas muito mais fácil de equilibrar.
- Triádica: três matizes espaçados igualmente. Vibrante e estável quando um deles domina e os outros dois são usados com moderação.
- Tetrádica (quadrado): quatro matizes. Esquemas ricos para ilustrações e gráficos, difíceis de equilibrar em uma interface de aplicativo.
- Análoga: os vizinhos mais próximos. Combinação tranquila para fundos e transições.
- Monocromática: um matiz em vários níveis de luminosidade. A escolha mais segura para estados de botão (hover, ativo, desativado).
Copie a paleta inteira em um clique no formato que você escolher: HEX puro, RGB, HSL, OKLCH, variáveis CSS (--color-1: …) prontas para colar, variáveis SCSS ou JSON para o código. Para conferir se as cores da paleta mantêm contraste para pessoas que distinguem matizes com mais dificuldade, tire um print e converta em tons de cinza.
Converta HEX, RGB, HSL, OKLCH e CMYK: cole qualquer coisa, leia tudo
Os campos de entrada aceitam quase qualquer notação de cor: #f80, #ff8800, hex de oito dígitos com alfa, rgb() e rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 e cores CSS nomeadas como rebeccapurple. Seja o que for que você digitar, você recebe sete saídas sincronizadas: HEX, RGB, HSL, HSV, LCH, OKLCH e CMYK, cada uma com o seu próprio botão de copiar.
O controle Opacidade (alfa) abaixo da pré-visualização muda as saídas para suas formas transparentes #RRGGBBAA, rgba() e hsla(). A pré-visualização é desenhada sobre um fundo quadriculado, então você vê a transparência na hora.
Encontre o token Tailwind CSS mais próximo
Dois rótulos abaixo da pré-visualização dão nome à cor: a cor CSS nomeada mais próxima (útil para protótipos rápidos) e o token Tailwind mais próximo, por exemplo orange-500. Assim você continua dentro do seu design system em vez de inventar valores avulsos. Clique em um rótulo para copiá-lo.
Isso resolve a pergunta que surge em toda entrega de design: o designer mandou um código hex, qual classe Tailwind corresponde a ele? A correspondência é calculada contra a paleta padrão do Tailwind CSS 4 (veja a documentação do Tailwind, em inglês), então você pode usar o token direto no nome da classe.
Qual formato de cor usar?
| Formato | Nome completo | Quando usar |
|---|---|---|
| HEX | Hexadecimal | Padrão da web. Curto, suportado em todo lugar, fácil de copiar. Oito dígitos adicionam alfa. |
| RGB | Red, Green, Blue | Como as telas pensam. Três canais de luz de 0 a 255. O formato que a maioria das APIs e do código canvas espera. |
| HSL | Hue, Saturation, Lightness | Para ajustar a olho. “Um pouco mais claro” ou “menos saturado” é só mudar um número. |
| HSV | Hue, Saturation, Value | Programas gráficos. O modelo por trás do seletor de cores do Photoshop e do GIMP. |
| LCH | Lightness, Chroma, Hue | Uniformidade perceptual. Os mesmos passos numéricos parecem os mesmos passos visuais, o que o HSL só finge fazer. |
| OKLCH | OK Lightness, Chroma, Hue | A escolha moderna para CSS. Corrige os desvios de matiz nos tons de azul que afetam o LCH. Suportado por todos os navegadores atuais e ideal para tokens de design. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientação para impressão. Conversão aproximada para conversar com a gráfica, os valores finais dependem do perfil de cor dela. |
Por que o OKLCH é perceptualmente mais uniforme que os modelos mais antigos é explicado por Björn Ottosson, que projetou o espaço Oklab, no artigo original (em inglês). A sintaxe e o suporte nos navegadores estão resumidos no MDN (em inglês). Como funciona o modelo de impressão é descrito no artigo CMYK da Wikipédia.
Pequenos detalhes que economizam tempo
- O histórico se guarda sozinho. As últimas 24 cores sobrevivem a uma atualização da página. Ficam só no armazenamento do seu navegador e nunca são enviadas.
- Conta-gotas. Em navegadores com a API EyeDropper (Chrome e Edge) você escolhe uma cor em qualquer lugar da tela, até fora da janela do navegador. Precisa da cor de uma foto ou de um arquivo de logo? Use o Conta-gotas online.
- Controle pelo teclado. A roda e o quadro de saturação e brilho respondem às setas, então você ajusta a cor em passos pequenos.
- Predefinições trazem as cores básicas mais comuns quando você só precisa de um ponto de partida rápido.
Perguntas frequentes
Como converter OKLCH para HEX?
Cole o valoroklch() no campo OKLCH e as outras saídas, incluindo o HEX, são recalculadas na hora. Funciona ao contrário também: digite o HEX e leia o oklch() correspondente. Uma ressalva: o OKLCH consegue descrever cores fora do gamut sRGB, e essas são recortadas para o que o sRGB consegue exibir. Por isso um oklch() muito saturado não vai ficar igual à sua versão em HEX em uma tela de gamut amplo.
Posso usar oklch() em CSS de produção?
Sim. Todas as versões atuais do Chrome, Edge, Firefox e Safari suportamoklch(), e ele se tornou uma notação popular para tokens de design (o Tailwind CSS 4 define toda a sua paleta nele). Para navegadores muito antigos, coloque um HEX de fallback na linha anterior. Esta ferramenta te dá os dois valores.