HTML de cor branco pérola. Tutorial de HTML. Cores RGB. Cores da paleta segura. Noções básicas de harmonia de cores

Esta página contém uma tabela com palavras-chave que podem ser usadas para denotar cores em linguagens de desenvolvedor Web como: HTML, CSS, JavaScript, Flash, etc.

Nas antigas especificações do WC3, eram especificadas apenas 16 palavras-chave, com a ajuda das quais eram definidas cores em HTML e CSS. Em especificações ainda mais modernas, foram adicionadas mais 130 palavras-chave para indicar nomes de cores. A tabela a seguir contém os nomes das cores e os códigos hexadecimais e RGB aos quais correspondem.

De acordo com as regras CSS, os nomes das cores não diferenciam maiúsculas de minúsculas. As entradas de cores IndianRed e indianred são equivalentes.

Também é importante notar que das 146 palavras-chave na tabela, há na verdade menos cores nela. Isso ocorre porque algumas palavras-chave referem-se à mesma cor. Assim, os nomes Gray e Gray representam o código de cor 50% cinza #808080, e a palavra Magenta é sinônimo da cor HTML Fúcsia, correspondente ao código hexadecimal #FF00FF. Também são sinônimas as palavras Aqua e Cyan, elas correspondem ao código #00FFFF.

As cores HTML são indicadas por seis caracteres após a barra - por exemplo, #000000. Estes seis símbolos representam as proporções das diferentes cores (Vermelho, Verde, Azul) na cor final. No monitor do seu computador, a imagem é formada por um grande número de pontos chamados pixels. Cada pixel é uma pequena fonte de luz, vamos chamá-la de “lanterna”, que por sua vez consiste em três lanternas – vermelha, verde e azul. Ao diminuir ou aumentar a intensidade do brilho das lanternas coloridas individuais, obtemos a cor desejada.

Códigos de cores HTML

As cores em HTML são representadas por uma notação hexadecimal (HEX) de vermelho, azul e verde (RGB).

O menor valor de cor é 0 (hexadecimal 00). O valor de cor mais alto é 255 (hex FF).

O valor hexadecimal da cor tem três dígitos começando com o sinal #.

Códigos de cores (significados)

16 milhões de tons

A combinação de vermelho, azul e verde com valores que variam de 0 a 255 para a porcentagem de cada cor resulta em um total de mais de 16 milhões de tons (256 x 256 x 256).

A maioria dos monitores modernos são capazes de exibir pelo menos 16.384 tonalidades diferentes (os monitores LCD geralmente são capazes de exibir 262 mil 16 milhões (atualizado em outubro de 2013) cores e os monitores CRT podem exibir um número virtualmente ilimitado de cores).

A tabela de cores abaixo mostra a mudança na proporção do vermelho de 0 a 255 com valores zero para azul e verde:

Tons de cinza

Para obter tons de cinza, são utilizadas proporções iguais de todas as cores. Para facilitar a escolha da cor certa, fornecemos códigos de tons de cinza

Nomes de cores HTML entre navegadores (todos os navegadores)

Uma coleção de 150 nomes de cores em HTML, compatível com todos os navegadores.

Nomes de cores padronizados

O W3C lista 16 nomes de cores válidos para HTML e CSS: aqua, preto, azul, fúcsia, cinza, verde, limão, marrom (castanho), marinho (ultramarino), oliva (oliva), roxo (roxo), vermelho (vermelho) , prata (prata), verde-azulado (cinza), branco (branco) e amarelo (amarelo).

Ao utilizar cores não incluídas nesta lista, é mais correto utilizar seu código hexadecimal (HEX) ou código RGB.

Cores seguras

Vários anos atrás, quando os computadores podiam suportar no máximo 256 cores diferentes, foi proposta uma lista de 216 "Cores Seguras para a Web", com 40 cores reservadas para o sistema.

Esta paleta de 216 cores foi criada para exibir cores corretamente no modo de paleta de 256 cores.

Agora, isso não importa porque a maioria dos computadores ao redor do mundo suporta milhões de tons de cores. De qualquer forma, aqui está uma lista dessas cores:

Vlad Merzhevich

Em HTML, a cor é especificada de duas maneiras: usando código hexadecimal e pelo nome de certas cores. O método baseado no sistema numérico hexadecimal é predominantemente utilizado, por ser o mais universal.

Cores hexadecimais

HTML usa números hexadecimais para especificar cores. O sistema hexadecimal, ao contrário do sistema decimal, é baseado, como o próprio nome sugere, no número 16. Os números serão os seguintes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Os números de 10 a 15 são substituídos por letras latinas. Na tabela 6.1 mostra a correspondência entre números decimais e hexadecimais.

Números maiores que 15 no sistema hexadecimal são formados pela combinação de dois números em um (Tabela 6.2). Por exemplo, o número 255 em decimal corresponde ao número FF em hexadecimal.

Para evitar confusão na definição do sistema numérico, um número hexadecimal é precedido por um símbolo de hash #, por exemplo #aa69cc. Neste caso, o caso não importa, portanto é permitido escrever #F0F0F0 ou #f0f0f0.

Uma cor típica usada em HTML é semelhante a esta.

Aqui a cor de fundo da página web é definida como #FA8E47. O símbolo de hash # na frente de um número significa que ele é hexadecimal. Os primeiros dois dígitos (FA) definem o componente vermelho da cor, o terceiro ao quarto dígito (8E) definem o componente verde e os dois últimos dígitos (47) definem o componente azul. O resultado final será esta cor.

Cada uma das três cores – vermelho, verde e azul – pode assumir valores de 00 a FF, resultando em um total de 256 tonalidades. Assim, o número total de cores pode ser 256x256x256 = 16.777.216 combinações. Um modelo de cores baseado em componentes vermelho, verde e azul é denominado RGB (vermelho, verde, azul; vermelho, verde, azul). Este modelo é aditivo (de add - add), em que a adição dos três componentes forma a cor branca.

Para facilitar a navegação pelas cores hexadecimais, leve em consideração algumas regras.

• Se os valores dos componentes de cor forem iguais (por exemplo: #D6D6D6), o resultado será uma tonalidade cinza. Quanto maior o número, mais clara é a cor, com valores variando de #000000 (preto) a #FFFFFF (branco).
• Uma cor vermelha brilhante é formada se o componente vermelho for máximo (FF) e os componentes restantes forem definidos como zero. Uma cor com valor #FF0000 é o tom de vermelho mais vermelho possível. O mesmo se aplica ao verde (#00FF00) e ao azul (#0000FF).
• Amarelo (#FFFF00) é feito misturando vermelho e verde. Isso é claramente visível na roda de cores (Fig. 6.1), que apresenta as cores primárias (vermelho, verde, azul) e complementares ou adicionais. Estes incluem amarelo, ciano e violeta (também chamado magenta). Em geral, qualquer cor pode ser obtida misturando cores próximas a ela. Assim, o ciano (#00FFFF) é obtido pela combinação do azul e do verde.

Arroz. 6.1. Círculo de cores

As cores baseadas em valores hexadecimais não precisam ser selecionadas empiricamente. Para tanto, é adequado um editor gráfico que possa trabalhar com diferentes modelos de cores, por exemplo, Adobe Photoshop. Na Fig. A Figura 6.2 mostra a janela de seleção de cor neste programa, o valor hexadecimal resultante da cor atual é contornado por uma linha. Você pode copiá-lo e colá-lo em seu código.

Arroz. 6.2. Janela para escolha de cores no Photoshop

Cores da web

Se você definir a qualidade de reprodução de cores do monitor para 8 bits (256 cores), a mesma cor poderá ser exibida de forma diferente em navegadores diferentes. Isso se deve à forma como os gráficos são exibidos, quando o navegador trabalha com uma paleta própria e não consegue mostrar uma cor que não esteja em sua paleta. Nesse caso, a cor é substituída por uma combinação de pixels de outras cores próximas a ela que imitam aquela. Para garantir que a cor permaneça a mesma em diferentes navegadores, foi introduzida uma paleta das chamadas cores da web. As cores da web são aquelas cores para as quais cada componente - vermelho, verde e azul - é definido com um dos seis valores - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). O valor hexadecimal deste componente é indicado entre colchetes. O número total de cores de todas as combinações possíveis dá 6x6x6 - 216 cores. Um exemplo de cor da web é #33FF66.

A principal característica da cor da web é que ela aparece igual em todos os navegadores. No momento, a relevância das cores da web é muito pequena devido à melhoria na qualidade dos monitores e à ampliação de suas capacidades.

Cores por nome

Para evitar ter que lembrar um conjunto de números, você pode usar os nomes das cores comumente usadas. Na tabela 6.3 mostra os nomes de cores populares.

Não importa se você especifica uma cor pelo nome ou usando números hexadecimais. Esses métodos são iguais em seus efeitos. O Exemplo 6.1 mostra como definir as cores de fundo e de texto de uma página web.

Exemplo 6.1. Cor de fundo e texto

Texto de exemplo

Neste exemplo, a cor de fundo é definida usando o atributo bgcolor da tag e a cor do texto por meio do atributo text. Para variar, o atributo text é definido como um número hexadecimal e o atributo bgcolor é definido como a palavra-chave reservada teal .

Como você sabe, a cor pode afetar o estado de uma pessoa: tanto mental quanto físico. Todos os dias, ao navegar em sites na Internet, os olhos avaliam milhões de cores e tonalidades. Um web designer familiarizado com a psicologia das cores pode manipular o humor do visitante para atingir determinados objetivos.

Isso se deve ao fato de que alguns tons acalmam e outros, ao contrário, excitam. A seguir falaremos sobre como as cores são sintetizadas e exibidas usando tecnologia de computador.

RGB é um modelo de cores que representa um método de obtenção de todas as cores e suas tonalidades misturando em várias proporções três componentes principais, que são:

• Cor vermelha ( Vermelho);
• cor verde ( Verde);
• Cor azul ( Azul).

É daí que vem o nome abreviado RGB. Essas cores foram escolhidas como principais por um motivo: o motivo é a fisiologia da retina do olho humano e como ele as percebe:

O modelo RGB continua sendo o mais popular atualmente e é usado para reproduzir cores em telas de TV e monitores de computador. Como os fabricantes dotam seus produtos de características diferentes, em 1996 foi criado um sistema unificado de síntese de cores baseado em RGB chamado sRGB, no qual Microsoft e HP trabalharam juntas.

Representação numérica da cor

Conforme mencionado anteriormente, as cores RGB são formadas pela mistura de cores primárias. Para descrever a intensidade de cada um deles, foi adotado um esquema em que a cor é representada pelo intervalo 0-255 (8 bits), que em notação hexadecimal corresponde a 00-FF.

Ou seja, as cores primárias ficarão assim:

• Vermelho – RGB (255,0,0);
• Verde – RGB (0,255,0);
• Azul – RGB (0,0,255);

Se a intensidade da cor assumir valores inferiores a 255, serão obtidos diferentes tons de vermelho, verde e azul. A seguir está uma tabela de suas gradações, bem como os valores hexadecimais de cada uma das tonalidades:

Tabelas de cores RGB

Naturalmente, além das gradações de cores primárias, existem as mistas, e seu número é bastante grande. Para tanto, foi criada uma tabela de cores RGB, que apresenta todas as tonalidades existentes, bem como seus nomes e representações numéricas ( na forma decimal e hexadecimal).

Você pode ver aqui. Esta tabela facilita muito a vida dos web designers, pois em poucos segundos você poderá encontrar a tonalidade desejada e descobrir sua representação numérica.

Paleta de cores RGB segura

Porém, em algum momento houve um problema de exibição de cores em diferentes navegadores e, para resolvê-lo, foi compilada a chamada paleta “segura” de cores RGB, derivada de cálculos matemáticos.

Quando o navegador não consegue exibir uma cor corretamente, ele tentará obter algo próximo do que precisa misturando cores adjacentes, e muito provavelmente o resultado será completamente inaceitável:

Ao utilizar os códigos de cores RGB desta paleta, um desenvolvedor web pode ter tranquilidade quanto à exibição das cores nas páginas de seu site quando visualizadas em diferentes navegadores, plataformas e monitores. Embora neste momento a tabela de cores seguras esteja perdendo relevância ( o progresso tecnológico ainda não pára), ao usá-lo você pode, como dizem, dormir tranquilo.

Cor dourada no modelo RGB

A palavra “ouro” foi usada pela primeira vez no início do século XIV para descrever a cor de um elemento químico chamado Aurum - ouro. No modelo RGB, a cor dourada é representada pelos seguintes valores numéricos:

• RGB (255, 215, 0) – sistema decimal;
• HEX #FFD700 – sistema hexadecimal.

Cor bege no modelo RGB

A cor bege ocupa um lugar bastante significativo na história, mesmo que não seja a mais expressiva. Muitos monumentos culturais, especialmente esculturas antigas, foram feitos de pedra-sabão e pedra-sabão, que apresentam uma tonalidade bege. No modelo RGB, a cor bege possui as seguintes representações numéricas.

Em HTML, a cor pode ser especificada de três maneiras:

Definir uma cor em HTML pelo seu nome

Algumas cores podem ser especificadas pelo seu nome, usando o nome da cor em inglês como valor. As palavras-chave mais comuns: preto, branco, vermelho, verde, azul, etc.:

Cor do texto – vermelho

As cores mais populares do padrão World Wide Web Consortium (W3C):

Exemplo de uso de nomes de cores diferentes:

Exemplo: especificando uma cor pelo seu nome

• Tente você mesmo "

Cabeçalho em fundo vermelho

Cabeçalho em fundo laranja

Indo em fundo de limão

Texto branco sobre fundo azul

Cabeçalho em fundo vermelho

Cabeçalho em fundo laranja

Indo em fundo de limão

Texto branco sobre fundo azul

Especificando cores usando RGB

Ao exibir cores diferentes em um monitor, a paleta RGB é usada como base. Qualquer cor é obtida misturando três cores básicas: R-vermelho, G - verde, B- azul. O brilho de cada cor é dado por um byte e pode, portanto, assumir valores de 0 a 255. Por exemplo, RGB(255,0,0) é exibido como vermelho, pois o vermelho está definido para seu valor mais alto (255) e o rest são definidos como 0. Você também pode definir a cor como uma porcentagem. Cada parâmetro indica o nível de brilho da cor correspondente. Por exemplo: os valores rgb(127, 255, 127) e rgb(50%, 100%, 50%) definirão a mesma cor verde médio:

Exemplo: Especificação de cores usando RGB

• Tente você mesmo "

rgb(127, 255, 127)

RGB(50%, 100%, 50%)

rgb(127, 255, 127)

RGB(50%, 100%, 50%)

Definir cor por valor hexadecimal

Valores R G B também pode ser especificado usando valores de cores hexadecimais (HEX) no formato: #RRGGBB onde RR (vermelho), GG (verde) e BB (azul) são valores hexadecimais de 00 a FF (o mesmo que decimal 0-255 ). O sistema hexadecimal, ao contrário do sistema decimal, baseia-se, como o próprio nome sugere, no número 16. O sistema hexadecimal utiliza os seguintes sinais: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Aqui os números de 10 a 15 são substituídos por letras latinas. Números maiores que 15 no sistema hexadecimal são representados pela combinação de dois caracteres em um valor. Por exemplo, o número mais alto 255 em decimal corresponde ao valor FF mais alto em hexadecimal. Ao contrário do sistema decimal, um número hexadecimal é precedido por um símbolo de hash. # , por exemplo, #FF0000 é mostrado como vermelho porque o vermelho está definido com seu valor mais alto (FF) e o restante das cores está definido com seu valor mínimo (00). Sinais após o símbolo hash # Você pode digitar letras maiúsculas e minúsculas. O sistema hexadecimal permite usar a forma abreviada #rgb, onde cada caractere equivale a double. Assim, a entrada #f7O deve ser considerada como #ff7700.

Exemplo: Cor HEX

• Tente você mesmo "

vermelho: #FF0000

verde: #00FF00

azul: #0000FF

vermelho: #FF0000

verde: #00FF00

azul: #0000FF

vermelho+verde=amarelo: #FFFF00

vermelho+azul=roxo: #FF00FF

verde+azul=ciano: #00FFFF

Lista de cores comuns (nome, HEX e RGB):

Códigos de cores (fundo) por saturação e matiz.