Nomes de Cores e Códigos Hex

Encontre os valores hex, RGB e HSL de qualquer nome de cor, ou a cor com nome mais próxima de um código. Com tons, matizes e contraste WCAG das 148 cores CSS.


Escreva o nome de uma cor ou cole um valor hex, RGB ou HSL. Os quatro formatos funcionam.
Limpar

Todas as cores com nome do CSS

Os 148 nomes de cor incorporados no CSS, com os respetivos valores hex e RGB. Clique em qualquer linha para a abrir acima.

Como funcionam os códigos hex

Um código hex são apenas três números escritos na base 16: quanto vermelho, quanto verde e quanto azul, cada um de 00 a FF. Assim, #FFD700 significa vermelho no máximo, verde a 215 em 255 e nenhum azul, o que o olho lê como dourado. Só os pares de dois dígitos importam, e é por isso que #FFF e #FFFFFF são ambos branco.

Hex, RGB e HSL comparados

Os três descrevem as mesmas cores, apenas transportam informação diferente. O hex é compacto e a escolha habitual em CSS. O RGB são os mesmos números em decimal, mais fáceis para cálculos. O HSL separa o matiz da saturação e da luminosidade, tornando bem mais simples construir uma paleta à mão: mantenha o matiz, altere a luminosidade e obtém um tom a condizer.

Porque é que o contraste importa

O texto tem de se destacar do fundo o suficiente para ser lido por pessoas com baixa visão ou num ecrã pouco luminoso. As diretrizes de acessibilidade fixam um rácio de 4,5 para 1 no texto normal (AA) e de 7 para 1 no nível mais exigente AAA. Ao texto grande é permitido 3 para 1. Esta ferramenta calcula o rácio face ao branco e ao preto para que veja de imediato qual usar por cima.

Útil saber

  • O CSS tem 148 cores com nome, e várias são duplicados: grey e gray, tal como aqua e cyan, são idênticas.
  • A forma abreviada do hex só funciona quando cada par se repete, por isso #FFCC00 pode escrever-se #FC0, mas #FFD700 não pode ser encurtado.
  • Acrescentar mais dois dígitos hex define a transparência, pelo que #FFD70080 é dourado a cerca de metade da opacidade.
  • Para construir uma paleta, mantenha o matiz em HSL e varie apenas a luminosidade. As cores parecerão sempre aparentadas.

Perguntas frequentes

A cor do CSS chamada gold é #FFD700, ou seja rgb(255, 215, 0). É um amarelo dourado luminoso e não um tom metálico, já que uma cor lisa não consegue reproduzir o brilho do ouro verdadeiro. Para um aspeto mais metálico, os designers costumam combiná-la com dourados mais escuros como #B8860B, a que o CSS chama darkgoldenrod.

Escreva o nome na caixa acima e obtém os valores hex, RGB e HSL em conjunto. Funciona para as 148 cores com nome do CSS e também ao contrário: cole um código hex e a ferramenta indica a cor com nome mais próxima, juntamente com a distância exata.

Contêm exatamente a mesma informação em notações diferentes. O hex escreve cada um dos três canais com dois dígitos na base 16, por isso #FF7F50 é vermelho 255, verde 127, azul 80. O RGB escreve esses mesmos números em decimal como rgb(255, 127, 80). Nenhum é mais rigoroso; o hex é apenas mais curto de escrever em CSS.

Matiz, saturação e luminosidade. O matiz é a posição na roda de cores de 0 a 360 graus, a saturação indica quão viva é a cor e a luminosidade vai do preto a 0% ao branco a 100%. É o formato mais prático para desenhar, porque manter o matiz e alterar apenas a luminosidade produz um conjunto de tons que claramente pertencem uns aos outros.

A especificação do CSS inclui 148 cores com nome, transparent incluída. Vários nomes remetem para valores idênticos, nomeadamente grey e gray, aqua e cyan, e magenta e fuchsia. A lista completa com valores hex e RGB está nesta página.

As diretrizes de acessibilidade pedem pelo menos 4,5 para 1 no texto corrente e 3 para 1 no texto grande, o que corresponde ao nível AA. O nível mais exigente AAA pede 7 para 1. Esta ferramenta calcula o rácio da sua cor face ao branco e ao preto e diz qual cumpre, para que escolha logo a opção legível.

Sim. Um código hex de oito dígitos acrescenta dois dígitos de alfa no fim, em que 00 é totalmente transparente e FF totalmente opaco. Assim, #FF000080 é vermelho a cerca de 50% de opacidade. Todos os navegadores atuais o suportam, embora a notação mais antiga rgba() continue muito comum.

Porque as 148 cores com nome são uma amostra minúscula dos cerca de 16,7 milhões que um ecrã consegue mostrar. Se o seu valor não for um desses pontos exatos, esta ferramenta procura a cor com nome mais próxima medindo a distância entre as duas no espaço RGB, e avisa que se trata de uma aproximação e não de uma correspondência.

Qual é o código hex de uma cor?

Escreva um nome de cor e obtenha de uma vez os valores hex, RGB e HSL, ou cole qualquer código para encontrar a cor com nome do CSS mais próxima. Gold é #FFD700, coral é #FF7F50 e teal é #008080. Cada resultado mostra ainda sombras, tons claros e o rácio de contraste face ao preto e ao branco.