últimas postagens
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. Essas propriedades incluem a cor óbvia e a cor de fundo, mas também a cor da borda, a cor do contorno e a sombra do texto, entre outras.
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 color_name pela cor específica que deseja usar. Por exemplo, se você deseja definir a cor do texto de um parágrafo para vermelho, escreva:
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. Você pode se aprofundar 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, estão disponíveis ferramentas para encontrar os códigos hexadecimais de cores que você encontra, 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 cor, 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);
Substitua red_value, green_value e blue_value pelos 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 seu 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 para seu valor máximo de 255, enquanto mantém os outros canais em 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, red_value, green_value e blue_value representam os canais de cores como em RGB, e alpha_value 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, tornando mais fácil escolher tons precisos e criar 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 ajudá-lo a garantir 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 os valores HSL dos 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 a seleção de 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).
Luminosidade: A luminosidade representa o quão clara ou escura a cor parece. 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 hue_value, saturation_percentage e lightness_percentage pelos valores específicos desejados para cada componente. Por exemplo:
div {
background-color: hsl(120, 100%, 50%);
}
Neste exemplo, a cor de fundo de um elemento div é definida 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 compreender a ciência das cores, como matizes e saturações, o que pode ser mais desafiador 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.