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 , , e de uma cor e até mesmo misturar duas ou mais cores. matiz a saturação a luminosidade a opacidade Existem várias funções CSS disponíveis, vamos ver algumas: - Leva três valores, representando vermelho, verde e azul, respectivamente, e retorna uma cor. Os valores podem variar de 0 a 255. Exemplo: resulta em uma cor vermelha. rgb() color: rgb(255, 0, 0) - É semelhante a , mas também permite definir a opacidade da cor. O quarto valor, alpha, pode variar de 0 a 1. Exemplo: resulta em uma cor vermelha semitransparente. rgba() rgb() color: rgba(255, 0, 0, 0.5) - Leva três valores, representando matiz, saturação e luminosidade, e retorna uma cor. Exemplo: resulta em uma cor vermelha. hsl() color: hsl(0, 100%, 50%) - É semelhante a , mas também permite definir a opacidade da cor. Exemplo: resulta em uma cor vermelha semitransparente. hsla() hsl() color: hsla(0, 100%, 50%, 0.5) - Permite misturar duas cores, com um parâmetro de peso opcional. Exemplo: resulta em um tom de roxo. mix() color: mix(red, blue) 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 , com valores que variam de 0 a 360. própria cor O 0 representa o vermelho, um valor de matiz de 120 representa o verde e um valor de matiz de 240 representa o azul. valor de matiz 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. valor de saturação O na função HSL representa o brilho da cor, com valores que variam de 0% a 100%. Um valor de luminosidade de significa que a cor é um , enquanto um valor de significa que a cor é e um valor de significa que a cor é . valor de luminosidade 50% cinza neutro 100% totalmente clara 0% 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 de uma cor. opacidade Isso pode ser útil quando você deseja criar um para seus elementos, como quando deseja que uma cor de fundo seja parcialmente transparente. efeito translúcido 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 , que representa a opacidade da cor e varia de 0 a 1. valor alfa 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 para seus elementos, como quando deseja que uma cor de fundo seja parcialmente transparente. efeito translúcido 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 e flexível. modular 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 com o valor de . --primary-color blue Agora, para usar essa propriedade personalizada, você pode usar a função em seus seletores CSS. var() button { background-color: var(--primary-color); } O código acima define a cor de fundo de todos os elementos como azul porque estamos usando a propriedade personalizada . <button> --primary-color Se quisermos alterar o valor de , basta alterá-lo em um local e ele será atualizado automaticamente ao longo do . --primary-color folha de estilo As vantagens de usar propriedades personalizadas incluem: : em vez de repetir valores em toda a folha de estilo, você pode armazenar valores em propriedades personalizadas e reutilizá-los conforme necessário. Reutilização de código : as propriedades personalizadas facilitam a manutenção de seus estilos porque você só precisa atualizar os valores em um só lugar. Capacidade de manutenção : 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. Flexibilidade 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 para o seu site, além de garantir que suas cores sejam legíveis e acessíveis a todos os usuários. paleta de cores 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 e . h1 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 ( e adicionamos uma transição para fazer a cor mudar suavemente quando o botão passa o mouse. hsl(120, 100%, 50%) Mudamos a cor para um tom azul ( ) para o estado de foco. hsl(240, 100%, 50%) 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!
