Cores no CSS
Nesta documentação de CSS vamos falar do uso de duas propriedades: color e background-color.
Essas propriedades do CSS são utilizadas para modificar a cor de elementos HTML, e tem como objetivo melhorar a estética das páginas.
As cores no CSS podem ser definidas de várias maneiras e vamos conhecê-las durante este artigo.
Color e Background-color: na prática
Veja a seguir um exemplo de uso da propriedade color:
Entendendo as propriedades de cores do CSS
Como já vimos, o CSS possui duas propriedades ligadas a cores: color e background-color. Vamos conhecê-las.
color
A propriedade color é utilizada para definir a cor do texto de um elemento HTML. Quando aplicada a um elemento, o texto dentro dele terá a cor definida. Por exemplo:
Veja que o todo o texto dentro da tag p está em azul, mas os textos de fora da tag p continuam na sua cor original.
A propriedade color altera a cor do texto apenas nos elementos em que for aplicada.
background-color
A propriedade background-color é utilizada para definir a cor de fundo de um elemento HTML. Utilizando o mesmo exemplo do color, definiremos a cor de fundo da tag p para amarelo:
Veja que apenas a tag p está com fundo amarelo, o restante da página continua com o fundo branco padrão.
A propriedade background-color altera a cor de fundo apenas nos elementos em que for aplicada.
Definindo uma cor
As propriedades color e background-color aceitam diversos tipos de valores na hora de definir a cor de um elemento, e nesse tópico vamos conhecê-los.
Nominal
O valor nominal é quando indicamos a cor que queremos através do seu nome. No CSS, o nome das cores deve ser dado em inglês.
Por exemplo, se quisermos um texto vermelho, vamos definir a propriedade color com o valor red.
Veja alguns exemplos:
Note como para cada uma das três linhas definimos uma cor diferente usando apenas seus nomes em inglês.
RGB
Outra forma de definir cores no CSS é através do RGB.
A sigla RGB vem do inglês para RED (vermelho), GREEN (verde), BLUE (azul) e permite a criação de diversas cores através da mistura dessas três cores.
No CSS, esses valores vão de 0 até 255. Se quisermos definir a cor vermelha em RGB faríamos assim:
p {
color: rgb(255,0,0);
}
O primeiro parâmetro corresponde ao R (vermelho), o segundo ao G (verde) e o terceiro ao B (azul).
Com os valores 255,0,0 estamos dizendo que queremos 255 de vermelho, e 0 de verde e azul.
Veja outros exemplos de RGB:
RGBA
O RGBA tem o mesmo funcionamento do RGB, porém, ele ganha um parâmetro extra, o A (Alpha). O que esse parâmetro faz é definir o nível de transparência de uma cor.
O parâmetro A deve ser definido com um valor entre 0 e 1:
- 0 = 100% transparente / invisível
- 0.5 = semitransparente
- 1 = totalmente opaco / sem transparência
Veja nesse exemplo:
Hexadecimal
No CSS, as cores no formato hexadecimal são essencialmente uma forma diferente de escrever cores RGB.
Esse formato conta com seis caracteres que podem variar entre: 0 1 2 3 4 5 6 7 8 9 A B C D E F.
Esses valores são utilizados em pares, e se organizam de modo onde os dois primeiros valores representam o R, os dois próximos são o G e os dois últimos o B. Valores Hexadecimais são sempre precedidos pelo sinal #:
- 0 Equivale o valor mais baixo (preto)
- F equivale ao valor mais alto (branco)
Veja alguns exemplos:
- #000000 = Cor Preta
- #FFFFFF = Cor Branca
- #FF0000 = Cor Vermelha
- #00FF00 = Cor Verde
- #0000FF = Cor Azul
Veja o exemplo abaixo:
HSL
Também é possível definir cores no HTML através do uso de H(Hue), S(Saturation), L (Lightness).
O valor de H se baseia na roda de cores (apresentada na Figura 1), e vai de 0 a 360.
O valor de H determina a posição da roda. Por exemplo, ao definir H como 120, a cor será posicionada onde está o número 120 da imagem, ou seja, a cor verde.
O valor S determina a saturação da cor, ou seja, se a cor será mais viva ou mais fraca. O valor de S vai de 0 a 100%, onde:
- 0 = Preto e Branco
- 50% = Cor leve
- 100% = Cor forte
Por exemplo:
background-color: hsl(120, 50%, 50%);//Aqui será um verde mais fosco
background-color: hsl(120, 100%, 50%);//Enquanto aqui será um verde mais vivo e vibrante
Por fim, temos o parâmetro L (Lightness), que define a luminosidade. Seu valor também vai de 0% a 100%, sendo seu valor padrão 50%.
Quanto mais forte for o valor de L, mais iluminado, e quanto menor mais iluminado. Veja:
- 0% = Totalmente escuro (preto)
- 50% = Iluminação normal
- 100% = Totalmente iluminado (branco)
Veja a seguir alguns exemplos de HSL>
HSLA
Assim como o RGB, o HSL também possui uma variação que permite modificar a transparência.
Todas as regras do HSL são idênticas para o HSLA, a diferença está apenas na definição do parâmetro A.
Assim como no RGBA, o parâmetro A do HSLA recebe valores entre 0 e 1, funcionando da seguinte maneira:
- 0 = 100% transparente / invisível
- 0.5 = semitransparente
- 1 = totalmente opaco / sem transparência
Veja nesse exemplo:
Exemplo prático de cores no CSS
Veja no exemplo prático a seguir como utilizamos a propriedade color para definir as cores de texto e de fundo da página:
Você pode notar o uso de cores de fundo e texto por toda a página, como no topo, no título, no botão e no rodapé.
Através do uso de cores podemos melhorar a estética das nossas páginas HTML, dando mais vida a elas.
Boas Práticas no Uso de Propriedades de Cor em CSS
1. Escolha de Cores Consistentes e Acessíveis
-
Utilize paletas harmoniosas: Adote esquemas de cores que ofereçam contraste adequado, facilitando a leitura e a navegação.
-
Atenção ao contraste: Certifique-se de que o contraste entre o texto e o fundo seja adaptado para usuários com deficiência visual.
-
Considere Deficiências Visuais: Evite combinações de cores que possam causar dificuldade de distinção para pessoas com daltonismo, como vermelho e verde.
2. Organização e Manutenção do Código
-
Comentários Claros: Adicione comentários explicativos para facilitar a leitura do código.
-
Consistência na Nomenclatura: Mantenha uma convenção consistente para nomes de classes e IDs, facilitando a leitura e manutenção do código.
-
Estruturação Lógica: Organize o código CSS de forma lógica, agrupando propriedades relacionadas e utilizando indentação adequada.
4. Testes e Validação
-
Ferramentas de Validação: Utilize ferramentas para verificar a conformidade do código com os padrões da web.
-
Testes Cruzados: Verifique a aparência do site em diferentes navegadores e dispositivos para garantir consistência visual.
Aprimorar a estilização com IA
1. Automação Inteligente de Estilos
A possibilidade permitida pela IA é a de analisar o conteúdo da página e o contexto visual para sugerir estilos que harmonizam a interface, otimizam o design e melhoram a legibilidade.
Benefícios:
Reduz tempo gasto com testes e ajustes manuais de estilos.
Facilita a criação de designs consistentes e visualmente agradáveis mesmo por desenvolvedores iniciantes.
2. Análise Dinâmica de Usabilidade e Feedback Visual
A IA pode monitorar o comportamento dos usuários em tempo real para identificar dificuldades na navegação e sugerir ou aplicar mudanças de estilo que melhoram a experiência.
Benefícios:
Experiência do usuário aprimorada com ajustes contínuos e personalizados.
Melhora a acessibilidade e engajamento.
3. Personalização Automática
Com base nas preferências do usuário, histórico, a IA pode ajustar dinamicamente propriedades CSS para entregar uma interface personalizada.
Benefícios:
Interfaces mais inclusivas e adaptadas a diferentes perfis.
Maior satisfação e retenção dos usuários.
4. Acessibilidade Automatizada
É verificado automaticamente o contraste entre texto e fundo, tamanho da fonte, espaçamento e outras propriedades para garantir conformidade com normas de acessibilidade (WCAG).
Benefícios:
Garante que sites estejam acessíveis a todos os usuários, evitando problemas legais e aumentando a audiência.
Simplifica o processo de auditoria de acessibilidade.
5. Otimização de Performance
Análise dos arquivos por meio da IA para identificar estilos redundantes, não usados ou ineficientes, sugerindo e aplicando otimizações automáticas para melhorar o carregamento e desempenho da página.
Benefícios:
Melhora a velocidade de carregamento das páginas, fundamental para SEO e experiência do usuário.
Facilita a manutenção e escalabilidade do código CSS.
