Como usar o seletor de cores
Use este seletor para escolher uma cor visualmente, digitar um valor direto, coletar cores de uma imagem ou explorar paletas pela roda de cores. A cor atual é convertida para Hex, RGB, HSL, HSV e OKLCH para uso em CSS, ferramentas de design e código exportado.
Como usar o seletor Hex
O seletor permite percorrer o campo de cor arrastando o ponto de seleção, editando valores de canal ou digitando um código Hex. Quando a cor muda, amostras, harmonias, variações, prévias de contraste e painéis de exportação são atualizados a partir do mesmo valor.
Quantas cores Hex existem?
Uma cor Hex usa seis caracteres hexadecimais no formato #RRGGBB. Cada par controla vermelho, verde ou azul de 00 a FF, oferecendo 16,777,216 cores RGB possíveis.
Seletor de cor de imagem
O seletor de imagem coleta cores diretamente de uma imagem enviada. Mova qualquer ponto de amostra sobre a imagem para capturar uma cor, comparar valores e exportar as cores selecionadas sem sair da página.
Roda de cores
A roda de cores é útil quando você quer trabalhar por matiz. Arraste o anel externo para mudar o matiz e ajuste a área interna para refinar saturação e brilho mantendo a interface sincronizada.
Sombras, matizes claros e tons
Sombras misturam a cor selecionada com preto, matizes claros com branco e tons aproximam a cor do cinza. Essas variações servem para hover, bordas, fundos, estados desativados e superfícies de interface.
Harmonias de cor
Paletas harmônicas são construídas a partir de relações na roda de cores. Combinações análogas, complementares, complementares divididas, triádicas, tetrádicas e quadradas dão pontos de partida para marcas, acentos de UI, dados e ilustrações.
Espaços de cor
RGB descreve cores de tela com luz vermelha, verde e azul. HSL separa matiz, saturação e luminosidade para ajustes mais intuitivos. HSV é comum em seletores visuais e OKLCH busca uma percepção mais uniforme para paletas CSS modernas.
Códigos Hex
Códigos Hex são compactos, fáceis de copiar e amplamente aceitos por navegadores e ferramentas de design. Como Hex e RGB descrevem os mesmos canais, é possível converter sem alterar a aparência da cor.
Exportação de códigos de cor
Os painéis de exportação reúnem a paleta visível em formatos para Tailwind, Figma, variáveis CSS, funções com prefixo e listas simples. Clique em uma amostra para copiar uma cor ou exporte quando precisar do grupo completo.
WCAG e acessibilidade
Combinações legíveis dependem de contraste. O verificador compara a cor selecionada em fundos claros e escuros para ajudar na escolha de textos, bordas e superfícies com acessibilidade em mente.
Simulador de daltonismo
O simulador mostra como a cor atual pode mudar em condições comuns de visão cromática. Ele ajuda a evitar paletas que dependem apenas do matiz e incentiva contraste, rótulos e pistas visuais secundárias.
Temas claros e escuros
Sombras, matizes claros, tons e harmonias podem formar a base de temas claros e escuros. Comece com uma cor, revise as variações e exporte os valores adequados para fundos, primeiro plano, botões e estados de destaque.
Como usar a roda de cores
A roda de cores é uma forma visual de entender como as cores se relacionam. Ela organiza matizes em um círculo, facilitando escolher uma cor base, comparar cores próximas e criar paletas equilibradas a partir de relações previsíveis.
O que é uma roda de cores?
Uma roda de cores coloca vermelho, laranja, amarelo, verde, azul e violeta em um espectro circular. Cores próximas costumam parecer relacionadas e suaves, enquanto cores opostas criam mais contraste e energia.
Como usar esta roda de cores
Arraste pela roda para escolher um matiz e ajuste a cor no seletor para refinar saturação e brilho. A cor atual atualiza Hex, RGB, HSL, HSV, OKLCH, a paleta superior, as amostras harmônicas e os painéis de exportação.
Cores primárias
Cores primárias são pontos de partida de muitos sistemas. Na teoria artística tradicional são vermelho, amarelo e azul. Em telas, RGB usa luz vermelha, verde e azul para criar cores em sites, apps e ferramentas digitais.
Cores secundárias
Cores secundárias são criadas pela mistura de duas primárias. Em uma roda tradicional, laranja, verde e violeta ficam entre as primárias e ajudam a conectar paletas quentes, frias e neutras.
Cores terciárias
Cores terciárias ficam entre primárias e secundárias. Incluem amarelo-laranja, vermelho-laranja, vermelho-violeta, azul-violeta, azul-verde e amarelo-verde, dando mais nuance que a roda básica de seis cores.
Cores quentes e frias
Cores quentes como vermelho, laranja e amarelo costumam parecer ativas, brilhantes e chamativas. Cores frias como azul, verde e violeta podem parecer mais calmas e espaçosas. Uma paleta forte costuma usar uma temperatura como base e a outra como acento.
Cores complementares
Cores complementares ficam opostas na roda. Elas criam alto contraste e são úteis para botões, destaques, selos e áreas onde um elemento precisa se sobressair.
Cores análogas
Paletas análogas usam cores vizinhas na roda. Como os matizes são próximos, o resultado costuma ser suave, natural e mais fácil de controlar em fundos, cartões, gráficos e ilustrações.
Cores triádicas
Paletas triádicas usam três matizes espaçados de forma uniforme. Elas podem criar um esquema vivo e equilibrado quando uma cor lidera e as outras duas entram como acentos.
Cores complementares divididas
Uma paleta complementar dividida começa com uma cor base e usa as duas cores ao lado do complemento direto. Ela oferece contraste forte como uma complementar, mas com uma faixa mais suave e flexível.
Cores tetrádicas e quadradas
Paletas tetrádicas e quadradas usam quatro cores ao redor da roda. São úteis quando o design precisa de vários acentos, mas funcionam melhor quando uma cor domina e as outras são equilibradas com tons claros ou escuros.
Sombras, matizes claros e tons
Depois de escolher uma relação de matiz, use sombras, matizes claros e tons para tornar a paleta prática. Matizes claros podem virar fundos, sombras escuras podem virar texto ou bordas, e tons suaves podem apoiar estados secundários.
Construindo um esquema de cores
Comece com a cor principal, escolha um tipo de harmonia e teste o resultado em necessidades reais de interface. Um esquema completo geralmente inclui cor primária, acentos, superfícies neutras, texto legível e estados seguros de contraste.
Exportando cores da roda
Quando a paleta parecer correta, exporte as cores como variáveis CSS, valores Tailwind, objetos para Figma, funções com prefixo ou listas de código. A mesma cor selecionada também pode ser copiada de qualquer amostra visível.
Acessibilidade e contraste
Harmonia de cor não garante legibilidade. Verifique contraste para textos e controles importantes, evite depender apenas da cor e use o simulador para prever mudanças em condições comuns de visão cromática.