Cegueira para o verde
Cegueira para o vermelho
Cegueira para o azul
148 Cores CSS Nomeadas
Clique em qualquer cor para carregá-la no seletor. Busque por nome ou valor hex.
| Amostra | Nome | Hex | RGB |
|---|
Todas as 148 cores CSS nomeadas padrão conforme a especificação CSS Color Level 4.
Como Funcionam os Códigos de Cor
Códigos Hex
Um código de cor hex como #FF5733 codifica a cor como três números hexadecimais de 2 dígitos: vermelho (FF = 255), verde (57 = 87), azul (33 = 51). O hex vai de #000000 (preto) a #FFFFFF (branco). A forma abreviada como #F60 se expande para #FF6600.
RGB
O RGB especifica a intensidade da luz Vermelha, Verde e Azul, cada uma de 0 a 255. rgb(255, 0, 0) é vermelho puro; rgb(0, 0, 255) é azul puro. Você também pode especificar o canal alfa: rgba(255, 87, 51, 0.5) representa 50% de transparência.
HSL
O HSL (Matiz, Saturação, Luminosidade) é mais intuitivo: o matiz é o ângulo da cor (0°=vermelho, 120°=verde, 240°=azul), a saturação é a intensidade da cor (0%=cinza, 100%=vívido) e a luminosidade é o brilho (0%=preto, 50%=normal, 100%=branco). Ótimo para variações de cor programáticas.
CMYK
Usado em design para impressão: Ciano, Magenta, Amarelo e Preto (Key). A conversão a partir do RGB é aproximada — fluxos profissionais de impressão usam perfis ICC para precisão. Os valores exibidos são apenas para referência; sempre verifique com sua gráfica.
Exemplo Prático
A cor CSS tomato é #FF6347. Decompondo: R=255 (FF), G=99 (63), B=71 (47). Em HSL: matiz≈9°, saturação=100%, luminosidade=64%. Contraste WCAG vs branco: ~3,0:1 (falha AA para texto pequeno). Vs preto: ~7,0:1 (aprovado AAA). Portanto, use texto tomato em fundos escuros para melhor legibilidade.
Perguntas Frequentes
O que é um código de cor hex?
Um código de cor hex é um número hexadecimal de 6 dígitos (como #FF5733) que representa uma cor misturando luz vermelha, verde e azul. Os dois primeiros dígitos são o vermelho, os dois seguintes o verde e os dois últimos o azul — cada um de 00 (nenhum) a FF (máximo). Códigos de 3 dígitos (#F60) são abreviações válidas em que cada dígito dobra.
Qual a diferença entre RGB e HSL?
O RGB mistura valores de luz vermelha, verde e azul (0–255 cada), correspondendo ao funcionamento das telas. O HSL descreve o Matiz (ângulo de cor 0–360°), a Saturação (vivacidade 0–100%) e a Luminosidade (brilho 0–100%), correspondendo à percepção humana das cores. O HSL facilita a criação de variantes mais claras ou mais escuras ajustando apenas o valor L.
Qual taxa de contraste WCAG eu preciso?
A WCAG 2.1 nível AA exige 4,5:1 para texto normal e 3:1 para texto grande (18 pt ou 14 pt em negrito). O nível AAA exige 7:1 e 4,5:1, respectivamente. Essas taxas se aplicam ao texto em relação ao seu fundo. Elementos gráficos decorativos e componentes de interface inativos estão isentos. Use o verificador de contraste acima para verificar suas combinações de cores.
O que são cores complementares, análogas e triádicas?
Cores complementares ficam opostas na roda de cores (180° de distância) e criam contraste forte. Cores análogas são adjacentes (±30°) e criam paletas harmoniosas e coesas. Cores triádicas são espaçadas uniformemente a 120° e oferecem equilíbrio vibrante. Os três tipos de harmonia são exibidos na seção "Harmonias de Cores" acima.
O conta-gotas funciona em todos os navegadores?
A API EyeDropper é compatível atualmente com Chrome 95+, Edge 95+ e Opera 81+. Não está disponível no Firefox ou no Safari. O botão do conta-gotas é ocultado automaticamente em navegadores sem suporte — o seletor de cores principal e todos os formatos de código funcionam em todos os navegadores modernos.
O que são cores CSS nomeadas?
O CSS define 148 cores nomeadas — de aliceblue a yellowgreen — que podem ser usadas diretamente no CSS sem valores hex ou rgb. Fazem parte da especificação CSS Color Level 4 e incluem as clássicas cores seguras para a web (como red, blue) além de muitos nomes descritivos (como cornflowerblue, mediumaquamarine). A tabela completa pode ser pesquisada acima.