Funções de cores CSS em 2023 - tudo o que você precisa saber para começar

Olá, colegas desenvolvedores! Hoje vamos mergulhar no mundo das funções de cores CSS.

Você pode ter usado CSS para alterar a cor de um elemento em uma página da Web, mas já ouviu falar das funções de cores CSS? Se não, aperte os cintos porque você está prestes a aprender algo novo e super útil!

Vamos começar com uma citação que li ontem sobre GoodReads .

A cor é o teclado, os olhos são as harmonias, a alma é o piano com muitas cordas. O artista é a mão que toca, tocando uma tecla ou outra, para provocar vibrações na alma.

O que exatamente são as funções de cores CSS?

As funções de cores CSS são uma maneira de especificar cores em CSS usando funções matemáticas em vez de apenas um código de cores simples.

As funções fornecem mais controle e flexibilidade sobre as cores usadas em sua folha de estilo.

Com as funções de cores, você pode ajustar o matiz , a saturação , a luminosidade e a opacidade de uma cor e até mesmo misturar duas ou mais cores.

Existem várias funções CSS disponíveis, vamos ver algumas:

1. rgb() - Leva três valores, representando vermelho, verde e azul, respectivamente, e retorna uma cor. Os valores podem variar de 0 a 255. Exemplo: color: rgb(255, 0, 0) resulta em uma cor vermelha.

   
   

2. rgba() - É semelhante a rgb() , mas também permite definir a opacidade da cor. O quarto valor, alpha, pode variar de 0 a 1. Exemplo: color: rgba(255, 0, 0, 0.5) resulta em uma cor vermelha semitransparente.

   
   

3. hsl() - Leva três valores, representando matiz, saturação e luminosidade, e retorna uma cor. Exemplo: color: hsl(0, 100%, 50%) resulta em uma cor vermelha.

   
   

4. hsla() - É semelhante a hsl() , mas também permite definir a opacidade da cor. Exemplo: color: hsla(0, 100%, 50%, 0.5) resulta em uma cor vermelha semitransparente.

   
   

5. mix() - Permite misturar duas cores, com um parâmetro de peso opcional. Exemplo: color: mix(red, blue) resulta em um tom de roxo.

Vamos aprender sobre eles em detalhes.

RGB()

Tudo bem, vamos continuar nossa jornada no mundo das funções de cores CSS e mergulhar na função RGB. A função RGB é uma das funções de cores mais usadas em CSS, e por um bom motivo!

É fácil de entender e oferece muito controle sobre as cores que você usa em seu site.

A função RGB assume três valores, cada um representando a intensidade de

• vermelho,

• verde, e

• azul respectivamente.

Esses valores podem variar de 0 a 255. Ao misturar diferentes intensidades de vermelho, verde e azul, você pode criar qualquer cor que desejar.

Exemplo:

• Para a cor vermelha - rgb(255, 0, 0)

• Para cor verde - rgb(0, 255, 0)

• Para a cor azul - rgb(0, 0, 255)

  
  

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

HSL()

Tudo bem, vamos passar para outra função de cor útil em CSS - a função HSL!

A função HSL é semelhante à função RGB, mas em vez de usar valores para vermelho, verde e azul, ela usa valores para:

• matiz,

• saturação, e

• leveza.

  
  

  Isso torna um pouco mais fácil de entender e usar, especialmente para aqueles que são novos no teoria das cores .

  
  

O valor de matiz na função HSL representa a própria cor , com valores que variam de 0 a 360.

• O valor de matiz 0 representa o vermelho, um valor de matiz de 120 representa o verde e um valor de matiz de 240 representa o azul.

  
  

• O valor de saturação na função HSL representa a intensidade da cor, com valores que variam de 0% a 100%. Um valor de saturação de 100% significa que a cor está totalmente saturada, enquanto um valor de 0% significa que a cor é cinza.

  
  

• O valor de luminosidade na função HSL representa o brilho da cor, com valores que variam de 0% a 100%. Um valor de luminosidade de 50% significa que a cor é um cinza neutro , enquanto um valor de 100% significa que a cor é totalmente clara e um valor de 0% significa que a cor é totalmente escura .

  
  

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RGBA()

Muito bem pessoal, vamos falar sobre a função RGBA!

A função RGBA é exatamente como a função RGB, mas com um bônus adicional:

• permite especificar a opacidade de uma cor.

Isso pode ser útil quando você deseja criar um efeito translúcido para seus elementos, como quando deseja que uma cor de fundo seja parcialmente transparente.

A função RGBA assume quatro valores, sendo os três primeiros os valores vermelho, verde e azul, assim como a função RGB.

O quarto valor é o valor alfa , que representa a opacidade da cor e varia de 0 a 1.

Um valor de 0 significa que a cor é totalmente transparente, enquanto um valor de 1 significa que a cor é totalmente opaca.

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

HSLA()

Certo pessoal, vamos falar sobre a função HSLA!

A função HSLA é exatamente como a função HSL, mas com um bônus adicional: ela permite que você especifique a opacidade de uma cor.

Isso pode ser útil quando você deseja criar um efeito translúcido para seus elementos, como quando deseja que uma cor de fundo seja parcialmente transparente.

A função HSLA assume quatro valores, sendo os três primeiros os valores de matiz, saturação e luminosidade, assim como a função HSL.

O quarto valor é o valor alfa, que representa a opacidade da cor e varia de 0 a 1.

Um valor de 0 significa que a cor é totalmente transparente, enquanto um valor de 1 significa que a cor é totalmente opaca.

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

É tudo o mesmo A significa Alpha que é us (valor alfa de 0,75) para o efeito translúcido em ambas as funções, simples.

Propriedades personalizadas ou variáveis CSS

Agora, vamos falar sobre propriedades personalizadas em CSS, também conhecidas como variáveis CSS. As propriedades personalizadas permitem que você armazene valores que podem ser reutilizados em toda a sua folha de estilo, facilitando a manutenção de seus estilos e tornando seu código mais modular e flexível.

Para criar uma propriedade personalizada, basta usar a sintaxe -- seguida do nome da propriedade, seguido de um valor

 :root { --primary-color: blue; }

Aqui, criamos uma propriedade personalizada chamada --primary-color com o valor de blue .

Agora, para usar essa propriedade personalizada, você pode usar a função var() em seus seletores CSS.

 button { background-color: var(--primary-color); }

O código acima define a cor de fundo de todos os elementos <button> como azul porque estamos usando a propriedade personalizada --primary-color .

Se quisermos alterar o valor de --primary-color , basta alterá-lo em um local e ele será atualizado automaticamente ao longo do folha de estilo .

As vantagens de usar propriedades personalizadas incluem:

• Reutilização de código : em vez de repetir valores em toda a folha de estilo, você pode armazenar valores em propriedades personalizadas e reutilizá-los conforme necessário.

• Capacidade de manutenção : as propriedades personalizadas facilitam a manutenção de seus estilos porque você só precisa atualizar os valores em um só lugar.

• Flexibilidade : as propriedades personalizadas permitem que você altere a aparência do seu site alterando os valores em um local, em vez de fazer alterações em vários seletores.

Práticas recomendadas de funções de cores CSS

Tudo bem, vamos falar sobre as práticas recomendadas para usar funções de cores CSS em seus projetos.

Essas dicas ajudarão você a criar um site consistente e visualmente atraente paleta de cores para o seu site, além de garantir que suas cores sejam legíveis e acessíveis a todos os usuários.

Criando uma paleta de cores para o seu site:

Uma das primeiras coisas que você deve fazer ao trabalhar com cores CSS é criar uma paleta de cores para o seu site. Isso pode ser tão simples quanto escolher algumas cores que você goste e que funcionem bem juntas.

Você pode usar as funções RGB, HSL, RGBA ou HSLA para definir suas cores.

Um bom lugar para começar é escolher uma cor principal e, em seguida, escolher 2-3 cores de destaque para complementá-la.

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

Usando funções de cores CSS para contraste e hierarquia:

É importante usar cores para criar contraste e hierarquia em seus designs. Por exemplo, você pode usar uma cor mais clara para o plano de fundo e uma cor mais escura para o texto para facilitar a leitura.

Você também pode usar cores para chamar a atenção para elementos específicos, como botões ou links.

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

Testando funções de cores para legibilidade e acessibilidade:

Finalmente, é importante testar suas cores quanto à legibilidade e acessibilidade. Certifique-se de que suas cores tenham contraste suficiente para serem facilmente legíveis, especialmente para usuários com deficiências de visão de cores.

Você pode usar ferramentas online para verificar o contraste de suas cores e garantir que elas atendam aos padrões de acessibilidade.

• Verificador de contraste WebAIM

• Gerador de Paleta de Cores Muzli

• Especialista - Verificador de contraste

• coolors - Gerador de paletas

• Gerador de Paletas Canva

Técnicas Avançadas de Funções de Cores CSS

Nesta seção, vamos mergulhar em algumas técnicas avançadas com funções de cores CSS.

Usando variáveis CSS para esquemas de cores dinâmicos

Você já quis mudar o esquema de cores do seu site com apenas algumas linhas de código? Com variáveis CSS, também conhecidas como propriedades personalizadas, você pode!

Você pode criar um conjunto de variáveis para armazenar sua paleta de cores e usá-las em toda a sua folha de estilo.

Dessa forma, se você quiser alterar seu esquema de cores, basta atualizar os valores em suas variáveis.

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

Neste exemplo, criamos duas propriedades personalizadas para nossas cores primárias e secundárias. Em seguida, os usamos para estilizar nossos elementos h1 e button .

Criando animações com funções de cores CSS

Uma das coisas legais que você pode fazer com funções de cores CSS é animá-las! Você pode criar transições suaves entre as cores para adicionar algum dinamismo ao seu site. Por exemplo, você pode fazer um botão mudar de cor quando um usuário passa o mouse sobre ele.

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

Aqui, definimos a cor de fundo padrão do nosso botão para um tom verde ( hsl(120, 100%, 50%) e adicionamos uma transição para fazer a cor mudar suavemente quando o botão passa o mouse.

Mudamos a cor para um tom azul ( hsl(240, 100%, 50%) ) para o estado de foco.

Usando funções de cores CSS para gradientes e transparência

Outra coisa divertida que você pode fazer com as funções de cores CSS é criar gradientes e transparências. Você pode usar as funções de cores RGBA e HSLA para criar cores semitransparentes e depois combiná-las para criar gradientes.

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

Aqui, criamos um gradiente linear que vai de uma cor vermelha RGBA a uma cor verde HSLA. Ambas as cores têm um valor alfa de 0,5, tornando-as semitransparentes.

E aí está!

Algumas técnicas avançadas com funções de cores CSS. Divirta-se experimentando essas técnicas e deixe sua criatividade correr solta!

Recursos

• caniuse.com [Tabelas de suporte para HTML5, CSS3]

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Conclusão

Concluindo, espero que esta introdução tenha sido útil para você começar a usar as funções de cores CSS e propriedades personalizadas.

Essas são ferramentas poderosas que podem tornar seu código CSS mais flexível, fácil de manter e fácil de trabalhar. Codificação feliz!