4 maneiras de definir cores em CSS

Principais conclusões

• Usando nomes de cores: CSS fornece 145 nomes de cores para uma seleção de cores fácil e amigável para iniciantes, mas as opções são limitadas e podem não atender às necessidades precisas de design.
• Códigos de cores hexadecimais: os códigos hexadecimais oferecem uma ampla gama de opções de cores e personalização precisa, embora possam ser menos intuitivos de usar e lembrar.
• Valores de cores RGB e RGBA: RGB permite controle preciso de cores com valores numéricos, enquanto RGBA adiciona transparência. Garantir combinações de cores acessíveis é importante.

As cores estão entre os atributos CSS mais comumente usados, desempenhando um papel vital na formação da identidade visual, do humor e da experiência do usuário de um site. CSS oferece uma variedade de opções de uso de cores, cada uma adaptada às necessidades e preferências específicas de design.

Embora seja fácil ignorar a importância da definição de cores, suas escolhas podem afetar significativamente a aparência do seu site. Explorar as diferenças entre os vários métodos e como aplicá-los e combiná-los na prática aumentará sua capacidade de criar sites visualmente atraentes.

1. Usando nomes de cores

CSS fornece uma maneira prática de definir cores usando nomes e há 145 opções disponíveis. Esses nomes de cores variam de simples “vermelho”, “verde” e “azul” a tons mais específicos como “coral” ou “lavanda”.

Usar cores nomeadas é simples: você seleciona um nome de cor como “vermelho” e o usa em uma propriedade CSS que suporta valores de cores. Tal propriedades incluem o óbvio cor e cor de fundo, mas também Cor da borda, cor de contorno, e sombra de texto, entre outros.

Os nomes das cores são úteis quando você precisa de uma cor temporária para prototipagem ou deseja manter seu código fácil de ler. Aqui está a sintaxe:

color_property: color_name;

Neste caso, basta substituir nome_cor com a cor específica que você deseja usar. Por exemplo, se você quiser definir o texto cor de um parágrafo para vermelho, escrever:

p {
color: red;
}

Isso dará aos seus parágrafos uma cor de texto vermelha:

Prós: Eles são fáceis de ler e entender em seu código CSS. Eles são adequados para iniciantes, funcionam bem em vários navegadores e são úteis para ideias rápidas de design.

Contras: eles têm opções limitadas e podem não oferecer os tons exatos que você precisa, limitando a criatividade do design. Além disso, eles nem sempre atendem a requisitos rígidos de acessibilidade e o suporte em sistemas mais antigos pode variar.

2. Códigos de cores hexadecimais

Códigos de cores hexadecimais, geralmente chamados de “códigos hexadecimais”, são os métodos mais comuns de especificação de cores em web design. Esses códigos consistem em combinações de números e letras de seis caracteres (0-9, AF), representando a mistura de componentes vermelhos, verdes e azuis (RGB) em uma cor.

Embora sejam fáceis de usar, entender como funcionam pode ser um desafio. Tu podes levar um mergulho profundo nos códigos hexadecimais para entender melhor. Aqui está um exemplo básico de como você pode usar códigos hexadecimais em CSS:

color: #RRGGBB;

Neste formato, RR, GG e BB representam os componentes vermelho, verde e azul, respectivamente. Cada componente pode variar de 00 (sem intensidade) a FF (intensidade máxima). Por exemplo, se quiser definir a cor de fundo do cabeçalho de um site para um tom específico de azul, você pode usar um código hexadecimal como este:

header {
background-color: #336699;
}

Isso produzirá uma cor azul profunda:

​​​​​

Você também pode usar uma abreviação se cada um dos três componentes repetir o mesmo caractere duas vezes. Você pode escrever o exemplo acima como:

header {
background-color: #369;
}

Prós: Os códigos de cores hexadecimais oferecem uma ampla gama de opções de cores, permitindo gerar tonalidades detalhadas e personalizadas. Eles oferecem controle suave sobre as opções de cores, tornando-os ideais para requisitos de design complexos.

Contras: embora os códigos hexadecimais sejam poderosos, eles podem ser menos intuitivos do que as cores nomeadas. Você também pode enfrentar o desafio de lembrar valores de cores específicos. Felizmente, ferramentas para encontrar os códigos hexadecimais de cores que você encontra estão disponíveis, tornando o processo mais gerenciável.

3. Valores de cores RGB e RGBA

Assim como os códigos hexadecimais, esse formato permite especificar cores pelos componentes vermelho, verde e azul. Desta vez, porém, você pode usar números inteiros mais amigáveis.

Valores de cores RGB

Os valores de cores RGB são o segundo método mais comumente usado para definir cores em CSS. “RGB” representa vermelho, verde e azul, expresso como uma função CSS com parênteses a seguir. Dentro dos parênteses você atribui valores a cada canal de cores, variando de 0 a 255. Isso permite controlar a intensidade do vermelho, verde e azul na cor que deseja usar.

Aqui está a sintaxe:

rgb(red_value, green_value, blue_value);

Substituir valor_vermelho, valor_verde, e valor_azul com seus respectivos valores numéricos. Por exemplo, você pode obter cores brancas, pretas e vermelhas como as mostradas nesta imagem:

Quando você define todos os três canais de cores (vermelho, verde e azul) para o valor máximo de 255, resulta na intensidade mais alta para cada canal, criando a cor branca:

.white-box {
 color: rgb(255, 255, 255);
}

Quando você define todos os três canais de cores com o valor mínimo de 0, isso representa a ausência de cor em cada canal, resultando em preto.

.black-box {
color: rgb(0, 0, 0);
}

Definir o canal vermelho com seu valor máximo de 255, enquanto mantém os outros canais com seu valor mínimo de 0, produz a cor vermelha:

.red-box {
color: rgb(255, 0, 0); 
}

Valores de cores RGBA

RGBA funciona da mesma forma que RGB, a única diferença é a inclusão de um valor alfa. O “A” em RGBA significa alfa, que determina o nível de transparência ou opacidade da cor escolhida. O valor 0 representa transparência total, tornando a cor totalmente invisível, enquanto o valor 1 representa opacidade total, tornando a cor totalmente visível.

RGBA é especialmente útil quando você deseja criar elementos com vários níveis de transparência, como fundos translúcidos ou texto desbotado. A sintaxe completa é:

color: rgba(red_value, green_value, blue_value, alpha_value);

Aqui, valor_vermelho, valor_verde, e valor_azul representar os canais de cores como em RGB, e valor_alfa especifica o nível de transparência.

div {
background-color: rgba(0, 128, 0, 0.5);
}

Neste exemplo, o valor alfa de 0,5 atribui 50% de transparência à cor verde, permitindo que o conteúdo abaixo dela seja exibido:

Prós: RGB e RGBA permitem controlar as cores com precisão, facilitando a escolha de tons precisos e a criação de designs visualmente atraentes. Eles são compatíveis com vários navegadores da web, garantindo que as cores escolhidas tenham uma aparência consistente.

Contras: O desafio reside em garantir combinações de cores acessíveis. É fundamental prestar atenção às taxas de contraste, principalmente ao trabalhar com transparência em RGBA. As diretrizes WCAG podem ajudar você garante que seu design seja acessível.

4. Valores de cores HSL e HSLA

HSL – abreviação de Hue, Saturation, and Lightness – é outra função CSS que define cores. Assim como o RGB, o HSL usa valores numéricos para representar cores, mas faz isso de maneira diferente. Você pode estar familiarizado com Valores HSL de componentes de UI em aplicativos de design e em outros lugares.

Matiz: representa a própria cor usando graus em uma roda de cores, variando de 0 a 360. Imagine isso como selecionar um ponto em um círculo, onde cada grau corresponde a uma cor diferente. Por exemplo, 0 e 360 ​​graus para vermelho, 120 graus para verde e 240 graus para azul.

Saturação: A saturação determina a vivacidade ou intensidade da cor. Define a relação da cor com o cinza, sendo 0% totalmente em tons de cinza (dessaturados) e 100% totalmente saturado (vibrante e puro).

Leveza: A luminosidade representa o quão clara ou escura a cor aparece. Está relacionado à posição da cor no espectro entre preto (0%) e branco (100%). Um valor de 50% representa a cor normal, enquanto valores abaixo de 50% escurecem a cor e valores acima de 50% a iluminam.

Além do HSL, existe o HSLA, onde “A” significa “alfa”. Isto é semelhante ao “A” em RGBA e significa transparência.

Aqui está a sintaxe:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Usando esta sintaxe, substitua matiz_valor, porcentagem_saturação, e leveza_percentagem com os valores específicos desejados para cada componente. Por exemplo:

div {
background-color: hsl(120, 100%, 50%);
}

Neste exemplo, a cor de fundo de um divisão O elemento é definido como um verde vibrante usando valores HSL. O 120 representa a tonalidade (verde), 100% é para saturação total e 50% define a luminosidade para um nível equilibrado.

Prós: HSL e HSLA oferecem cálculos versáteis de cores usando propriedades personalizadas CSS. Eles são altamente compatíveis com navegadores modernos e permitem ajustes fáceis na luminosidade das cores.

Contras: Aprender HSL envolve entendendo a ciência das cores, como matizes e saturações, que podem ser mais desafiadoras do que as cores RGB familiares.

Abraçando o poder das cores CSS

Existem mais métodos que você pode verificar e enquanto explora os diferentes formatos para definir cores em CSS, lembre-se de que você tem o poder de moldar a aparência, o humor e a experiência do usuário do seu site.

Sua escolha de formato de cor – sejam nomes de cores simples, códigos hexadecimais, RGB ou HSL – pode afetar a forma como o público percebe seu site. Portanto, experimente, aprenda e encontre as definições de cores que melhor atendem aos seus objetivos de design.