CSS - Referências de Cores

Definindo a cor do texto usando valores RGB

p {
  color: rgb(255, 0 ,0); /* Vermelho */
}

Você pode misturar diferentes níveis de vermelho, verde e azul para criar cores diferentes:

Exemplos de valores de cor RGB em CSS

h1 {
    color: rgb(0 ,128 ,0); /* Verde */
}

.highlight {
    background-color: rgb(255 ,255 ,0); /* Amarelo */
}

a {
    color: rgb(128 ,0 ,128); /* Roxo */
}

O RGB permite criar muitas cores alterando o nível de cada componente. Isso oferece mais controle do que usar nomes predefinidos.

O CSS também suporta valores RGBA (Vermelho Verde Azul Alpha) que adicionam um componente de opacidade à cor. O valor de opacidade varia de zero (transparência total) a um (opacidade total).

Usando RGBA para transparência

div { 
    background-color: rgba(255 ,00 ,00 ,.5); /* Vermelho com cinquenta por cento de opacidade */ 
} 

O uso de RGBA permite criar cores com transparência sem afetar a opacidade de todo o elemento. Isso é útil para criar sobreposições e outros efeitos onde você precisa controlar a transparência de cores individuais.

RGB e RGBA são amplamente suportados em CSS e oferecem uma ampla gama de opções em comparação com os nomes comumente usados no design web.

Definindo a cor do texto usando valores HSL

p {
    color: hsl(0, 100%, 50%); /* Vermelho */
}

Exemplos de valores de cor HSL em CSS

h1 {
    color: hsl(120, 100%, 50%); /* Verde */
}

.highlight {
    background-color: hsl(60, 100%, 50%); /* Amarelo */
}

a {
    color: hsl(300, 100%, 50%); /* Roxo */
}

O modelo HSL permite criar muitas cores ajustando o matiz, a saturação e a luminosidade. Ele oferece uma maneira intuitiva em comparação com valores hexadecimais ou RGB.

Semelhante ao RGBA, o CSS também suporta valores HSLA (Matiz, Saturação, Luminosidade, Alfa) que adicionam um componente de opacidade. O valor de opacidade varia de zero (totalmente transparente) a um (totalmente opaco).

Usando HSLA para transparência

div {
    background-color: hsla(0, 100%, 50%, 0.5); /* Vermelho com cinquenta por cento de opacidade */
}

O uso de HSLA permite controlar a transparência de cores individuais sem afetar a opacidade de todo o elemento. Isso é útil para criar sobreposições translúcidas, gradientes e outros efeitos visuais.

HSL e HSLA oferecem uma maneira flexível de especificar cores. O CSS oferece uma abordagem intuitiva para seleção que permite ajustes fáceis para criar variações. HSL é uma boa escolha quando você deseja criar esquemas baseados em um único matiz ou precisa fazer ajustes sutis em um design.

Usando Palavras-chave de Cores no CSS

.overlay {
  background-color: transparent;
}

.button {
  color: blue;
  border: 2px solid currentColor;
}

.child-element {
  color: inherit;
}

.overlay tem um fundo transparente, permitindo que o conteúdo atrás dele seja visível. Isso é útil para criar sobreposições ou elementos semi-transparentes.

.button usa currentColor. O texto é azul e, ao usar currentColor para border-color, tanto o texto quanto a borda serão azuis. Se você mudar a cor do texto depois, a borda será atualizada automaticamente.

.child-element usa inherit. Ele assume a cor do texto do seu pai sem precisar de uma especificação explícita.

As palavras-chave de cores fornecem uma maneira de aplicar cores com base em significados específicos ou relações entre elementos. Elas podem ser usadas com outras notações como valores hexadecimais, RGB ou HSL para estilização flexível no seu CSS.

Definindo a Cor do Texto

A propriedade color define a cor do texto de um elemento. Ela pode ser aplicada a qualquer elemento que contenha texto, como parágrafos, títulos, links ou elementos span.

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

a {
  color: rgb(0, 128, 0);
}

Nestes exemplos, a propriedade color define a cor do texto dos parágrafos como azul, dos títulos como vermelho usando um valor hexadecimal, e dos links como verde usando um valor RGB.

Definindo a Cor de Fundo

A propriedade background-color define a cor de fundo de um elemento. Ela pode ser aplicada a qualquer elemento.

div {
  background-color: yellow;
}

.container {
  background-color: #f0f0f0;
}

button {
  background-color: hsla(240, 100%, 50%, 0.8);
}

Nestes exemplos, a propriedade background-color define a cor de fundo de um elemento div como amarelo, de uma classe container como cinza claro usando um valor hexadecimal, e de um botão como azul semi-transparente usando um valor HSLA.

Definindo a Cor da Borda

A propriedade border-color define a cor da borda de um elemento. Ela pode ser aplicada se o elemento tiver uma borda.

.box {
  border: 2px solid;
  border-color: red;
}

input[type="text"] {
  border:1px solid; 
  border-color:#ccc; 
} 

button { 
  border: 3px solid; 
  border-color: rgb(0, 0, 0); 
} 

Nestes exemplos, a propriedade border-color define a cor da borda para uma classe box como vermelha, para um campo de entrada como cinza claro usando um valor hexadecimal, e para um botão como preto usando um valor RGB. Essas propriedades de cor aceitam várias notações de cor, como nomes de cores, valores hexadecimais, RGB, RGBA, HSL e HSLA. Você pode usar essas notações de acordo com a cor que deseja aplicar. Ao usar essas propriedades de cor, você pode controlar a cor do texto, a cor de fundo e a cor da borda dos elementos em suas páginas web, criando designs visualmente atraentes e consistentes.

Usando RGBA para Transparência de Cor

Para aplicar transparência a uma cor usando RGBA, use a função rgba():

.overlay {
  background-color: rgba(255, 0, 0, 0.5); /* Vermelho com 50% de opacidade */
}

p {
  color: rgba(0, 0, 255, 0.8); /* Azul com 80% de opacidade */
}

• O elemento .overlay tem um fundo vermelho semi-transparente.
• O texto nos parágrafos é definido como azul com um valor alpha de .8.

Usando HSLA para Transparência de Cor

Similar ao RGBA:

.button {
  background-color: hsla(120%,100%,50%, .6); /* Verde com opacidade de .6 */
}

a {
  color: hsla(240%,100%,50%, .9); /* Azul com opacidade de .9 */
}

• O elemento .button tem um fundo verde semi-transparente.
• Os links têm uma cor azul definida com um valor alpha de .9.

Usando a Propriedade Opacity

O CSS também fornece a propriedade opacity:

img {
  opacity: .5; /* Torna a imagem metade opaca */
}

.container { 
  opacity: .8; /* Torna o container majoritariamente opaco */ 
}

• Uma imagem é tornada metade opaca ao definir sua opacity.
• Um elemento container é majoritariamente opaco ao definir sua opacity.

Observe que ao usar opacity, isso afeta tanto um elemento quanto seu conteúdo. Se você quiser transparência apenas em partes específicas ou cores dentro de um elemento sem afetar as opacidades dos elementos filhos, use RGBA ou HSLA.

Gradientes Lineares

Gradientes lineares criam uma transição em linha reta de uma cor para outra. Para criar um gradiente linear, use a função linear-gradient() como valor para a propriedade background-image.

.linear-gradient {
  background-image: linear-gradient(to right, red, blue);
}

.linear-gradient-multiple {
  background-image: linear-gradient(to bottom right, red, yellow, green);
}

Gradientes Radiais

Gradientes radiais criam uma transição circular ou elíptica entre cores. Para criar um gradiente radial, use a função radial-gradient() como valor para a propriedade background-image.

.radial-gradient {
  background-image: radial-gradient(circle, blue, green);
}

.radial-gradient-multiple {
  background-image: radial-gradient(circle at top left, red, yellow, green);
}

Exemplos de Criação de Gradientes em CSS

Aqui estão mais alguns exemplos:

.linear-gradient-transparent { 
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)); 
} 

.repeating-linear-gradient {   
  background-image: repeating-linear-gradient(45deg, red 10px, blue 20px);    
}  

.radial-gradient-custom {     
  background-image: radial-gradient(ellipse, yellow, green, blue);      
}    

Gradientes são recursos úteis em CSS que ajudam a criar fundos atraentes para botões, seções, fundos de página inteira e muito mais. Com a flexibilidade oferecida por ambos os tipos, junto com a capacidade de controlar propriedades como posições de cores e transparência, muitos efeitos criativos são possíveis em suas páginas web.

Monocromático

Um esquema de cores monocromático usa diferentes tons, matizes e variações de uma única cor. Ele cria um visual uniforme e agradável aos olhos. Para criar esse esquema, escolha uma cor base e use suas variações mais claras e escuras.

Complementar

Um esquema de cores complementar usa cores opostas na roda de cores. Essas cores criam alto contraste, mas devem ser usadas com cuidado para evitar tensão visual. Exemplos incluem azul e laranja, vermelho e verde, ou roxo e amarelo.

Análogo

Um esquema de cores análogo usa cores que estão próximas umas das outras na roda de cores. Essas cores criam uma combinação harmoniosa. Para criar esse esquema, escolha uma cor principal e use as cores diretamente à sua esquerda e direita.

Triádico

Um esquema de cores triádico usa três cores distribuídas uniformemente na roda de cores. Esse esquema cria um visual equilibrado. Para criá-lo, escolha uma cor principal e desenhe um triângulo equilátero na roda para encontrar as outras duas cores.

Ao criar uma paleta para seu site, algumas ferramentas podem ajudar a gerar esquemas com base em suas preferências:

• Adobe Color: Esta ferramenta permite criar esquemas baseados em diferentes regras, como monocromático ou complementar.
• Coolors: Coolors é rápido e fácil de usar para gerar paletas aleatórias ou ajustar cores individuais.
• Paletton: Paletton permite criar esquemas baseados em modelos como monocromático ou triádico, com opções de ajuste fino.

Usando essas ferramentas e entendendo os diferentes tipos de esquemas, você pode criar paletas atraentes para seus designs de sites, considerando a mensagem da marca e a experiência do usuário ao escolher suas cores, experimentando até encontrar a paleta perfeita para o site.