Seletor de Cores

Escolha qualquer cor e obtenha seu código na hora

Códigos de cor estão em todo lugar no design web, design gráfico e programação. Esta ferramenta fornece todos os três formatos ao mesmo tempo para qualquer cor que você escolher.

Os três formatos de código de cor

HEX (Hexadecimal): O formato mais amplamente usado no desenvolvimento web. Uma string de seis caracteres com dígitos 0-9 e letras A-F, prefixada com o símbolo de hash. Cada par de caracteres representa um canal de cor: #RRGGBB.

RGB (Vermelho, Verde, Azul): Especifica cada canal de cor como um inteiro de 0 (nenhum) a 255 (máximo). Este é o formato nativo para telas digitais.

HSL (Matiz, Saturação, Luminosidade): Um formato mais intuitivo para humanos. Matiz é a cor pura expressa como um ângulo de 0° a 360°. Saturação é quão vívida ou cinza é a cor. Luminosidade é quão clara ou escura.

Como usar a calculadora para acessibilidade

Copie os códigos gerados por esta ferramenta e cole-os em uma calculadora de contraste dedicada para conferir se a combinação de cores que você escolheu atende aos padrões de acessibilidade antes de usá-la em texto ou botões. Fazer isso cedo no processo de design evita ter que refazer o trabalho depois de descobrir que uma combinação bonita não é legível o suficiente para todos os usuários.

Teoria básica das cores

Cores complementares: Cores opostas na roda de matiz (180° separadas) criam contraste máximo.

Cores análogas: Cores adjacentes na roda de matiz (30-60° separadas) criam paletas harmoniosas.

Tints e sombras: Aumente a luminosidade HSL acima de 50% para criar tints. Diminua abaixo de 50% para sombras.

Como usar o seletor

Clique ou toque na amostra de cor para abrir o seletor de cor nativo do seu navegador, escolha uma cor visualmente ou digite um valor conhecido, e os códigos HEX, RGB e HSL se atualizam juntos imediatamente, prontos para copiar para qualquer ferramenta ou código em que você esteja trabalhando. Como o seletor usa a interface própria embutida do navegador em vez de uma personalizada, ele se comporta exatamente como esperado e funciona de forma confiável em diferentes dispositivos.

Qual formato usar

Para CSS e design web, HEX e RGB são ambos amplamente suportados, mas o HSL vem sendo cada vez mais preferido porque é muito intuitivo de ajustar — tornar uma cor 10% mais clara é fácil em HSL, enquanto em RGB exige calcular novos valores de canal. Para programação, o RGB é o formato nativo da maioria das bibliotecas gráficas, enquanto o HSL é útil quando você quer gerar paletas de cores programaticamente. Para impressão, o padrão é o CMYK (Ciano, Magenta, Amarelo, Preto), que esta ferramenta não cobre — para conversão de digital para impresso, use um software profissional como o Adobe Illustrator.

Fundamentos de teoria das cores

Cores em uma tela são produzidas combinando luz vermelha, verde e azul (mistura aditiva de cores). Diferente da mistura de tinta (subtrativa), combinar todos os canais RGB na intensidade máxima produz branco, enquanto combiná-los na intensidade zero produz preto. Entender essa diferença ajuda a explicar por que as regras de mistura de cores que você aprendeu com tintas na escola não se aplicam diretamente às cores de tela.

Harmonias de cores para design

Além dos pares complementares e análogos já mencionados, um esquema monocromático usa diferentes tons, matizes e sombras de uma única cor, criado variando a luminosidade HSL enquanto mantém o matiz e a saturação constantes — uma forma confiável de montar uma paleta coesa sem risco de as cores colidirem. Um esquema tríade usa três cores igualmente espaçadas (120° de distância), criando combinações vibrantes e equilibradas.

Acessibilidade e contraste web

As diretrizes WCAG (Web Content Accessibility Guidelines) definem requisitos de taxa de contraste para texto legível: o padrão AA exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande, enquanto o padrão mais rigoroso AAA exige 7:1 e 4,5:1 respectivamente. Alto contraste entre texto e fundo é essencial para usuários com baixa visão, incluindo os cerca de 8% dos homens e 0,5% das mulheres com algum tipo de daltonismo, para quem certos pares de cores que parecem distintos para a maioria das pessoas podem parecer quase idênticos.

Cores nomeadas do CSS

O CSS inclui 147 cores nomeadas, de nomes comuns como "red", "blue" e "black" a nomes mais incomuns como "rebeccapurple" (nomeada em homenagem a Rebecca Meyer, filha do desenvolvedor CSS Eric Meyer, em 2014), "cornflowerblue" e "papayawhip".

Programação e paletas geradas

Ferramentas e bibliotecas que geram paletas de cores automaticamente quase sempre trabalham em HSL internamente, porque é fácil pedir "a mesma cor, um pouco mais clara" ou "a mesma cor, girada 30 graus no matiz" com simples aritmética nesse espaço de cor, algo muito mais complicado de expressar diretamente em RGB, onde mudar apenas a luminosidade exige recalcular os três canais ao mesmo tempo.

Tints e sombras, em detalhe

Para criar uma versão mais clara de uma cor, mantenha o matiz e a saturação e aumente a luminosidade em direção a 100%. Para uma versão mais escura, diminua a luminosidade em direção a 0%. Essa técnica é a base de praticamente toda paleta de "50 a 900" usada em sistemas de design modernos.

Privado e instantâneo

O seletor de cores roda inteiramente no seu navegador usando a entrada de cor nativa do navegador, então os resultados aparecem na hora e nenhuma cor que você escolhe é enviada a um servidor, registrada ou compartilhada.