Glossário de Cores

Código de uma cor na tela com seis caracteres depois do #: dois para o vermelho, dois para o verde e dois para o azul, de 00 (nada) a FF (o máximo, 255). É o formato mais usado em CSS e em programas de design.

Em Rose (#FF007F), FF é o vermelho no máximo, 00 é o verde zerado e 7F (127) é o azul pela metade.

Modelo de cor da luz: cada cor é a soma de vermelho (R), verde (G) e azul (B), cada um de 0 a 255. É como as telas formam as cores: RGB(0, 0, 0) é o preto e RGB(255, 255, 255) é o branco.

Rose (#FF007F) é RGB(255, 0, 127).

Modelo da impressão, com quatro tintas: ciano (C), magenta (M), amarelo (Y) e preto (K), em porcentagem. A conversão a partir do RGB é uma aproximação: na gráfica, a cor também depende do papel, da tinta e do perfil de cor.

Rose (#FF007F) é C 0%, M 100%, Y 50% e K 0%.

Descreve a cor pelo matiz (H, em graus na roda de cores), pela saturação (S) e pela luminosidade (L), em porcentagem. Facilita criar variações: mudando só a luminosidade, a cor clareia ou escurece sem trocar de matiz.

Rose (#FF007F) é HSL(330°, 100%, 50%).

Parecido com o HSL, mas o terceiro valor é o brilho (B, de brightness, ou V, de value): 100% é a cor no máximo de intensidade, e não o branco. É o modelo dos seletores de cor de muitos programas de edição de imagem.

Rose (#FF007F) é HSB(330°, 100%, 100%).

Espaço de cor feito para se aproximar da percepção humana: L é a luminosidade (de 0 a 100), a vai do verde ao vermelho e b vai do azul ao amarelo. Diferenças iguais nos números correspondem, de forma aproximada, a diferenças iguais para o olho, por isso o LAB é usado para comparar cores.

Rose (#FF007F) é L 54,87, a 84,47, b 4,65.

O LAB escrito em coordenadas polares: L é a luminosidade, C é o croma (a intensidade da cor) e H é o matiz em graus. Em misturas e gradientes, o LCH tende a evitar o tom acinzentado que aparece no meio de algumas misturas em RGB.

Descreve a cor pelo matiz (H) e pela quantidade de branco (W) e de preto (B) misturada a ele. É intuitivo para quem pensa em tinta: matiz com branco clareia, com preto escurece. Os navegadores atuais aceitam HWB no CSS.

Uma das 216 cores formadas só pelos valores 00, 33, 66, 99, CC e FF em cada canal. Elas surgiram na época dos monitores de 256 cores; hoje servem mais como referência. Cada ficha do site indica a cor segura mais próxima.

A cor segura mais próxima de Rose (#FF007F) é a #FF0066.

Espaço de cor de referência da CIE, de 1931, base para o LAB e o LUV. Os valores X, Y e Z vêm da resposta média do olho humano à luz; o Y corresponde à luminância.

Rose (#FF007F) é X 45,08, Y 22,80, Z 22,10.

Espaço de cor da CIE parecido com o LAB, com os eixos u e v no lugar de a e b. É usado sobretudo em estudos de telas e de iluminação.

Rose (#FF007F) é L 54,87, u 142,57, v -11,22.

Sistema de cores padronizado na Alemanha e muito usado em tintas industriais, plásticos e fachadas. Cada cor tem um código, como o RAL 3020 (vermelho de trânsito). Na ficha de cada cor aparece a RAL mais próxima, como referência.

Sistema de cores de impressão usado principalmente na Alemanha, com cores numeradas em catálogos para cada tipo de papel. Também aparece nas fichas, pelo código mais próximo.

Mistura de luz: somar vermelho, verde e azul deixa a cor mais clara, e as três no máximo dão o branco. É o modelo das telas (RGB).

Vermelho (#FF0000) + Limão (#00FF00) + Azul (#0000FF), em luz, dão Branco (#FFFFFF).

Mistura de tinta ou pigmento: cada tinta absorve parte da luz, e quanto mais tinta, mais escura fica a mistura. É o modelo da impressão (CMYK) e da pintura (RYB).

Modelo tradicional da pintura, com as primárias vermelho (R), amarelo (Y) e azul (B). É o que se aprende na escola e nas artes; não serve para calcular cores de tela, mas explica a mistura de tintas.

Organização das cores em volta de um círculo, na ordem do arco-íris. A posição de cada cor é o matiz, em graus, e as harmonias são posições fixas na roda.

Cores que não se obtêm misturando outras e que, misturadas, geram as demais. Na luz (RGB), são vermelho, verde e azul; na pintura tradicional (RYB), vermelho, amarelo e azul; na impressão (CMYK), ciano, magenta e amarelo.

Resultado da mistura de duas primárias. Na pintura (RYB), são laranja, verde e violeta; na luz (RGB), ciano, magenta e amarelo.

Na luz, vermelho com verde dá Amarelo (#FFFF00).

Resultado da mistura de uma primária com uma secundária vizinha na roda, como o vermelho-alaranjado e o azul-esverdeado. A roda tradicional tem seis.

O espaço de cor padrão da web e da maioria das telas. Todas as conversões do site partem do sRGB, por isso os valores conferem com outras ferramentas que usam o mesmo padrão.

A luz de referência que representa a luz do dia média, de cerca de 6.500 K. Os valores em LAB, LCH, XYZ e LUV do site usam o D65, o mesmo das ferramentas profissionais de design.

Divisão da roda pela sensação que as cores passam: vermelhos, laranjas e amarelos são quentes; verdes-azulados, azuis e violetas são frios. As fichas do site indicam a temperatura de cada cor pelo matiz.

Laranja (#FFA500) é quente; Turquesa (#40E0D0) é fria.

A cor propriamente dita, independente de ser clara ou escura: vermelho, laranja, azul. É medido em graus na roda de cores, de 0° a 360°: 0° é o vermelho, 120° é o verde e 240° é o azul.

O matiz de Rose (#FF007F) é 330°.

A pureza da cor. Em 100%, a cor está no máximo de intensidade; perto de 0%, fica acinzentada, até virar cinza.

Cinza (#808080) tem saturação de 0%.

Quanto a cor é clara ou escura no HSL: 0% é sempre preto, 100% é sempre branco e 50% é a cor mais intensa daquele matiz.

No HSB, quanta luz a cor tem: 0% é preto e 100% é a cor no máximo de intensidade. O branco só aparece com brilho de 100% e saturação zero.

A intensidade da cor no LCH, comparada a um cinza da mesma luminosidade. Parece a saturação, mas é medida de um jeito mais próximo da percepção humana.

Variação de uma cor com preto: o matiz continua o mesmo e a cor escurece. Na ficha de cada cor, as sombras vão do tom original ao preto em dez passos.

Vermelho-Escuro (#8B0000) é uma sombra do vermelho.

Variação de uma cor com branco: ela clareia e fica mais suave. Os tons claros da ficha vão até o branco, também em dez passos.

Rosa (Pink) (#FFC0CB) é um tom claro do vermelho.

Variação de uma cor com cinza: ela perde saturação e fica mais sóbria. Na ficha, os tons acinzentados param no cinza médio.

Cores vizinhas na roda, a 30° para cada lado. Combinam de forma natural, porque têm o matiz parecido.

As análogas de Rose (#FF007F) são #FF00FF e #FF0000.

A cor do lado oposto da roda, a 180°. O par tem o maior contraste de matiz e chama atenção, por isso costuma ser usado em destaques.

A complementar de Rose (#FF007F) é #00FF80.

Em vez da complementar, usa as duas vizinhas dela, a 150° e a 210° da cor base. Mantém o contraste, com menos tensão.

No caso de Rose (#FF007F), as duas cores são #00FF00 e #00FFFF.

Três cores igualmente espaçadas na roda, a 120° uma da outra. Dá paletas vivas e equilibradas.

Rose (#FF007F) forma uma tríade com #80FF00 e #0080FF.

Quatro cores que formam um retângulo na roda: a cor base, outra a 60° e as complementares das duas (a 180° e a 240°).

Com Rose (#FF007F), o retângulo se fecha com #FF8000, #00FF80 e #0080FF.

Quatro cores igualmente espaçadas na roda, a 90° uma da outra.

O quadrado de Rose (#FF007F) inclui #FFFF00, #00FF80 e #0000FF.

Paleta feita com um só matiz, variando a luminosidade e a saturação. É discreta e coesa.

Medida de quanto um texto se destaca do fundo, de 1:1 (nenhuma diferença) a 21:1 (preto no branco). É calculada pela luminância relativa das duas cores, como define a WCAG.

Rose (#FF007F) sobre branco tem contraste de 3,78:1.

As Diretrizes de Acessibilidade para Conteúdo Web, do W3C. Entre outras regras, definem o contraste mínimo entre texto e fundo para que pessoas com baixa visão consigam ler.

Os níveis de conformidade da WCAG. Para contraste, o AA pede 4,5:1 em texto normal e 3:1 em texto grande; o AAA pede 7:1 e 4,5:1.

A claridade de uma cor como o olho percebe, de 0 (preto) a 1 (branco). O verde pesa mais que o vermelho, e o vermelho mais que o azul.

Por isso Amarelo (#FFFF00) parece muito mais claro que Azul (#0000FF).

Quanto da luz uma cor devolve, de 0 (preto) a 100 (branco). Na tela, é a luminância relativa vezes 100. Os fabricantes de tinta informam o LRV para ajudar a escolher a cor da parede: acima de 50, o ambiente fica mais claro; abaixo de 20, a parede absorve a maior parte da luz.

Rose (#FF007F) tem LRV 22,8.

Número que mede o quanto duas cores parecem diferentes ao olho, calculado no espaço LAB pela fórmula CIEDE2000. Abaixo de 1 a diferença não se vê; entre 2 e 10 ela aparece quando as cores estão lado a lado; acima de 10 já são cores distintas. As cores relacionadas de cada ficha são ordenadas por ele.

Nome popular das deficiências na percepção das cores. As formas mais comuns afetam a distinção entre vermelho e verde. Cada ficha do site simula como a cor é vista em sete tipos: protanopia, deuteranopia, tritanopia, protanomalia, deuteranomalia, tritanomalia e acromatopsia.

Falta dos cones sensíveis ao vermelho. Vermelhos parecem escuros e se confundem com verdes e marrons. Na protanomalia, esses cones existem, mas funcionam de forma alterada.

Falta dos cones sensíveis ao verde. Vermelhos e verdes se confundem. Na deuteranomalia, esses cones funcionam de forma alterada.

Falta dos cones sensíveis ao azul. Azuis se confundem com verdes, e amarelos com tons rosados ou cinza. É rara.

Ausência quase total da visão de cores: tudo é visto em tons de cinza. É muito rara; a ficha mostra a cor convertida em cinza.

Conjunto de cores escolhidas para serem usadas juntas, num site, numa marca ou numa obra. No As Cores, as paletas têm de 2 a 10 cores e podem ser filtradas por cor e por estilo.

A paleta Dia Ensolarado na Praia tem 5 cores.

Transição suave entre duas ou mais cores, linear (numa direção) ou radial (a partir de um ponto). Em CSS, é criado com linear-gradient() e radial-gradient().