Fundamentos de CSS: Trabalhando com Cores

Existem muitos fatores a serem considerados ao projetar um site; fonte, fluxo de UX e muito mais. Um elemento de design muito importante é a cor. Até mesmo decisões simples, como cor da marca, cor da borda e cor de fundo fornecem um impacto definitivo e perceptível.

Neste artigo, cobriremos os fundamentos das cores CSS e aprenderemos como transformar um site HTML em um site de aparência impecável.

Primeiros passos com cores CSS

Existe uma maneira de descrever cores em CSS que um computador pode entender. Isso normalmente é feito dividindo a cor em vários componentes, calculando um conjunto misto de cores primárias para formar a cor desejada. Existem várias maneiras diferentes de descrever uma cor em CSS.

Usando nomes de cores como palavras-chave

Existem aproximadamente 140 nomes de cores CSS compatíveis com a maioria dos navegadores modernos. Pode ser tão simples quanto vermelho ou ciano para a palavra-chave de cores. Embora ajude com uma gama moderada de cores, você está limitado a algumas cores definidas com controle zero sobre tons e matizes. É aqui que você precisa pular para a gama mais ampla de opções de cores CSS.

/*Syntax*/
cor vermelha;
cor: carmesim;
cor: azul ardósia;

Usando valores RGB

Ao projetar um site ou aplicativo, o esquema de cores importa muito - definitivamente não deve ser a última coisa a ser considerada. Em CSS, você pode usar três métodos para representar uma cor RGB. Estas são notação de string hexadecimal, notação funcional RGB e notação funcional HSL. Aqui está uma visão mais detalhada de cada um deles.

Notação de string hexadecimal

A notação de string hexadecimal sempre começa com o caractere #. Seguindo esse caractere, você especifica as cores usando dígitos hexadecimais de um código de cor específico. A string não diferencia maiúsculas de minúsculas, mas é convencional usar letras minúsculas. Aqui estão alguns casos de uso:

#rrggbb

É a maneira mais comum de descrever uma cor numérica. É uma cor totalmente opaca com componentes vermelho, verde e azul como 0xrr, 0xgg, e 0xbb respectivamente.

#rrggbbaa

Ele segue os critérios RGB descritos acima com um canal alfa que controla a transparência da cor. Quanto mais baixo o 0xaa valor é, mais translúcida a cor se torna.

#rgb

Se você tem cor #556677, você pode simplesmente escrever como #567 uma vez que representa 0xrr, 0xgg, e 0xbb respectivamente. Por exemplo, #000 (ou #000000) é preto enquanto #fff (ou #ffffff) é branco.

#rgba

Ele segue os critérios acima com um canal alfa especificado por 0xaa para controlar a opacidade.

Notação Funcional RGB

A notação funcional RGB representa cores usando componentes vermelho, verde e azul. É definido usando o função rgb () que aceita parâmetros de entrada na forma de componentes vermelhos, verdes e azuis primários (e um canal alfa opcional). Os valores de vermelho, verde e azul devem ser um número inteiro entre 0 para 255 (inclusive), ou um percentual que varia de 0% a 100%. Por outro lado, o canal alfa aceita valores de 0,0 (completamente transparente) a 1,0 (completamente opaco). Também aceita valores percentuais de 0% (igual a 0,0) e 100% (igual a 1,0).

/*Syntax*/
cor: rgb (rr, gg, bb);
cor: rgba (rr, gg, bb, a);

Notação Funcional HSL

A notação funcional HSL representa a cor usando matiz, saturação e luminosidade. É muito semelhante ao rgb () função em termos de uso. Você pode facilmente encontre o valor hexadecimal de qualquer cor na tela do seu computador. Nesse método de cores, o matiz define a cor real de acordo com a posição na roda de cores. A saturação é a porcentagem de cinza com o matiz máximo possível. A luminosidade faz a transição da cor de sua aparência mais escura para a mais brilhante possível à medida que aumenta.

O valor de matiz (H) é especificado pela unidade de ângulo suportada em CSS. Inclui deg, rad, grad, e vez. Saturação (S) especifica a porcentagem da cor final composta por matiz. O componente de luminosidade (L) define o nível de cinza.

/*Syntax*/
cor: hsl (XXdeg, XX%, XX%);
cor: hsl (XXturn, XX%, XX%);

Aplicação de cores a elementos HTML

Em CSS, o cor propriedade define a cor de primeiro plano do conteúdo, e cor de fundo define a cor de fundo do conteúdo estruturado por HTML. Quando um elemento é renderizado, você pode usar as propriedades de cor para estilizá-lo.

Propriedade de cor para textos

o cor propriedade é usada ao desenhar texto e quando você precisa de qualquer tipo de decoração de texto. Você pode usar o texto-decoração-cor propriedade para renderizar sublinhados, sobrelinhados ou linhas riscadas de cores diferentes. Você pode alterar a cor de fundo do texto usando o cor de fundo propriedade. Você pode aplicar um efeito de sombra no texto usando o sombra de texto propriedade. Você pode selecionar texto-ênfase-cor enquanto desenha símbolos de ênfase em campos de texto.

Propriedade de cor para caixas

Como você sabe, tudo em uma página da web segue o modelo da caixa. Assim, cada elemento é uma caixa com algum tipo de conteúdo e preenchimento, borda e área de margem opcionais. Você pode usar o cor de fundo propriedade quando não há conteúdo em primeiro plano. Ao desenhar uma linha para separar as colunas de um texto, você pode usar o coluna-regra-cor propriedade para ele. Há uma cor de contorno propriedade para colorir o contorno. Observe que um contorno é diferente da borda - ele atua como um indicador de foco.

Propriedade de cor para bordas

Qualquer elemento HTML pode ter uma borda. Você pode definir o Cor da borda propriedade como border-top-color, border-right-color, border-bottom-color, e cor da borda esquerda para definir a cor da borda dos lados correspondentes. Usar a propriedade abreviada é uma boa prática, no entanto.

o border-inline-start-color propriedade permite colorir as bordas da borda que estão mais próximas do início. Por outro lado, o border-inline-end-color propriedade permite colorir o final do início das linhas de texto dentro de uma caixa. Embora varie dependendo do seu modo de escrita, orientação de texto, e direção.

Conclusão: cor e acessibilidade

Embora um site com um design bonito seja fortemente afetado pela cor usada, você deve sempre se certificar de que ele esteja acessível. O uso impróprio de cores pode resultar na perda de tráfego significativo em seu site.

O uso de notações de string hexadecimais, nomes de cores ou valores RGB depende totalmente de você. Apenas certifique-se de que está usando cores para fortalecer o texto existente e faça com que ele siga uma determinada hierarquia visual. Aprender mais sobre a teoria das cores e criar sua própria paleta é uma ideia excelente se você for um desenvolvedor web iniciante. Até então, codificação alegre e colorida!

Como usar a teoria das cores para elevar seus projetos criativos

Usando as cores certas da maneira certa, você pode levar seus projetos criativos a um nível totalmente novo.

Leia a seguir

Sobre o autor