nomes de cores css. A cor nos estilos pode ser definida de diferentes maneiras: por valor hexadecimal, por nome, nos formatos RGB, RGBA, HSL, HSLA. Cores e códigos de formatação

Como você sabe, a cor pode afetar o estado de uma pessoa: tanto mental quanto físico. Todos os dias, navegando na internet, os olhos avaliam milhões de cores e tonalidades. Um web designer familiarizado com a psicologia das cores pode controlar o humor do visitante para atingir qualquer objetivo.

Isso se deve ao fato de que alguns tons acalmam e outros, ao contrário, excitam. A seguir, falaremos sobre como a cor é sintetizada e exibida usando a tecnologia do 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 os 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 são escolhidas como as principais por um motivo: o motivo é a fisiologia da retina do olho humano e como ela as percebe:

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

Representação numérica de cores

Como 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 corresponde a 00-FF em hexadecimal.

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, são obtidos vários tons de vermelho, verde e azul. A seguir, uma tabela de sua gradação, 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 misturas e seu número é bastante grande. Para tanto, foi criada uma tabela de cores RGB, na qual são apresentadas todas as tonalidades existentes, bem como seus nomes e representações numéricas ( na forma decimal e hexadecimal).

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

Paleta de cores RGB segura

No entanto, 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, que foram derivadas por cálculos matemáticos.

Quando o navegador não consegue exibir uma cor corretamente, ele tenta se aproximar do que precisa misturando cores vizinhas, e muito provavelmente o resultado será completamente inaceitável:

Ao usar os códigos de cores RGB dessa paleta, um desenvolvedor da Web pode ficar tranquilo ao exibir cores nas páginas de seu site quando visualizadas em diferentes navegadores, plataformas e monitores. Embora no momento a tabela de cores seguras esteja perdendo sua relevância ( o progresso tecnológico não fica parado), ao usá-lo, você pode, como dizem, dormir tranquilamente.

Cor dourada no modelo RGB

Pela primeira vez a palavra "ouro" foi usada 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

O bege tem um lugar bastante significativo na história, mesmo que não seja o mais expressivo. Muitos monumentos culturais, especialmente esculturas antigas, eram feitos de esteatita e pedra-sabão, que têm um tom bege. No modelo RGB, o bege tem as seguintes representações numéricas.

Para páginas html, as cores são indicadas principalmente no sistema hexadecimal. Para isso, são utilizados dois tipos de gravação de código - completo ou abreviado. Para indicar corretamente a cor html com um registro completo, você deve escrever seis caracteres (números e/ou letras inglesas) após a treliça, por exemplo, preto é escrito assim: #000000. Uma notação abreviada para especificar cores html consiste em uma grade e três números e/ou letras atrás dela. Ao mesmo tempo, esse tipo de reserva só pode ser usado se o registro completo dessa cor consistir nos mesmos caracteres após a grade. Por exemplo, a mesma cor preta pode ser escrita assim: #000. Você pode especificar cores html com caracteres grandes e pequenos, pois não diferenciam maiúsculas de minúsculas.

Cada caractere escrito após "#" corresponde a uma certa proporção de cores vermelho, verde e azul. Por sua vez, todos os monitores consistem em um grande número de pixels (pontos microscópicos), cada um dos quais inclui 3 chamadas "lanternas" (fontes de luz): vermelho, verde e azul. Então, ao ajustar a intensidade da luz emitida por essas "lanternas", o monitor exibe a cor que precisamos.

Ao combinar a intensidade da luz vermelha, azul e verde (0 a 256), os monitores podem exibir 16.000.000 cores diferentes.

Além disso, as cores dos sites podem ser especificadas verbalmente ou em código RGB.

Até hoje, verbalmente, você pode prescrever 147 cores. No entanto, é importante saber que alguns nomes diferentes podem se referir às mesmas cores, por exemplo, Cinza e Cinza são cinza (#808080).

Cores seguras para sites.

Nem todos os monitores e navegadores podem exibir todas as 16 milhões de cores html corretamente.

Se, por exemplo, encontrar uma cor que o navegador não pode exibir corretamente, então:

1. O navegador o substitui pelo que é mais semelhante a ele e pode ser reproduzido com sucesso;
2. Para exibir corretamente, o navegador pode misturar várias cores e reproduzir o resultado.

Para garantir que a saída em qualquer navegador e em qualquer monitor seja a cor especificada no código, é recomendável usar "Cores seguras". Eles não foram determinados à mão ou pela vontade de alguém, mas matematicamente. Existem 216 cores 100% seguras para documentos html e, embora as tecnologias atuais tenham chegado ao ponto de os monitores e navegadores modernos reconhecerem milhões de tons, recomendamos o uso dessas cores seguras para garantir a reprodução das cores.

Esta tabela inclui 216 códigos de cores html seguros. Cada cor tem um valor em RGB para especificar a cor em editores gráficos e HEX para especificar a cor em páginas html.

Existem várias maneiras de representar cores em web design.

HEX é um sistema hexadecimal para representar cores na base 16. Para este sistema, dígitos decimais árabes de 0 a 9 e letras latinas de A a F são usados ​​para complementar o número digital para 16. Para web design, 16 cores primárias (chave) , o chamado código de cor hexadecimal #RRGGBB, onde cada par é responsável por sua parcela de cor: RR - vermelho, GG - verde e BB - azul. Cada fração de cor varia de 00 a FF.

Duas outras representações de cores em web design são: na forma de RGB(*,*,*), onde cada parte "*" da cor é representada por dígitos decimais de 0 a 255 e por nomes de cores em inglês.

Ao criar uma imagem colorida, o principal problema é a reprodução correta das cores em diferentes tipos de computadores, monitores e navegadores. Se o navegador não conseguir renderizar uma cor corretamente, ele corresponde ou mistura várias cores. E às vezes pode ser substituído por alguma cor completamente diferente.

Tabela 16 cores primárias, que são usados ​​em todos os navegadores

Tabela roxa cores e tons

Tabela cinzento cores e tons

Os códigos de cores em CSS são usados ​​para especificar cores. Normalmente, códigos de cores ou valores de cores são usados ​​para definir uma cor para o primeiro plano de um elemento (por exemplo, texto, cor do link) ou para o plano de fundo do elemento (fundo, cor do bloco). Eles também podem ser usados ​​para alterar a cor do botão, bordas, marcador, foco e outros efeitos decorativos.

Você pode definir seus valores de cor em vários formatos. A tabela a seguir lista todos os formatos possíveis:

Esses formatos são descritos em mais detalhes abaixo.

Cores CSS - Códigos hexadecimais

Código de cor hexadecimalé uma representação de cores de seis dígitos. Os dois primeiros dígitos (RR) são o valor vermelho, os próximos dois são o valor verde (GG) e os dois últimos são o valor azul (BB).

Cores CSS - Códigos hexadecimais curtos

Código de cor hexadecimal curtoé uma forma mais curta de notação de seis caracteres. Nesse formato, cada dígito é repetido para produzir o valor de cor de seis dígitos equivalente. Por exemplo: #0F0 torna-se #00FF00.

O valor hexadecimal pode ser obtido de qualquer software gráfico, como Adobe Photoshop, Core Draw, etc.

Cada código de cor hexadecimal em CSS será precedido por um sinal de hash "#". A seguir estão exemplos do uso da notação hexadecimal.

Cores CSS - Valores RGB

Valor RGBé um código de cor que é definido usando a propriedade rgb(). Essa propriedade aceita três valores: um para vermelho, verde e azul. O valor pode ser um número inteiro, de 0 a 255, ou uma porcentagem.

Observação: Nem todos os navegadores suportam a propriedade de cor rgb(), então não é recomendado usá-la.

Abaixo está um exemplo mostrando várias cores usando valores RGB.

Gerador de código de cores

Você pode criar milhões de códigos de cores com nosso serviço.

Cores do navegador seguro

Abaixo está uma tabela de 216 cores que são as mais seguras e independentes do computador. Essas cores em CSS variam de 000000 a código hexadecimal FFFFFF. Eles são seguros de usar, pois garantem que todos os computadores exibirão as cores corretamente ao trabalhar com a paleta de 256 cores.

Tabela (paleta) de cores html dá-lhe a oportunidade de escolher independentemente o tom que você precisa. O valor da cor é exibido em três formatos: Hex, RGB e HSV.

• Hex consiste em três valores de dois caracteres em notação hexadecimal. Por exemplo: #ff00b3, onde o primeiro par de números é vermelho, o segundo é verde e o terceiro é azul.
• RGB (RedGreenBlue) tem a forma "200.100.255" indicando a quantidade do tom correspondente (vermelho, verde, azul) na cor resultante.
• HSV (Hue, Saturation, Value - tom, saturação, valor) - um modelo de cores em que as coordenadas são:
  • Matiz - tom de cor, pode variar de 0° a 360°.
  • Saturação - saturação, varia entre 0-100 ou 0-1. Quanto maior essa configuração, mais "pura" é a cor, e é por isso que essa configuração às vezes é chamada de pureza da cor. E quanto mais próximo esse parâmetro estiver de zero, mais próxima a cor estará do cinza neutro.
  • Valor (valor da cor) - define o brilho, o valor também pode variar entre 0-100 ou 0-1.

Digite o código da cor: VAI

Lista de cores com nomes

A tabela lista os nomes de cores em inglês (que podem ser usados ​​como valores) suportados por todos os navegadores e seus valores hexadecimais. Todas as cores listadas são "seguras", o que significa que serão exibidas da mesma forma em todos os navegadores.