CSS - Cores

Nomes de Cores

No CSS, você pode usar nomes de cores predefinidos para especificar cores. Esses nomes são fáceis de lembrar e oferecem uma maneira rápida de aplicar cores aos seus elementos web. Alguns nomes de cores comumente usados incluem:

• red: Um vermelho brilhante.
• blue: Um azul clássico.
• green: Um verde natural.
• yellow: Um amarelo ensolarado.
• purple: Um roxo real.
• black: Um preto sólido.
• white: Um branco puro.

Cores Hexadecimais

Valores de cor hexadecimais são uma forma popular de representar cores no CSS. Eles consistem em um símbolo de cerquilha (#) seguido por seis caracteres, onde cada par de caracteres representa a intensidade dos componentes vermelho, verde e azul (RGB).

O formato de um valor de cor hexadecimal é #RRGGBB, onde:

• RR representa o componente vermelho (00 a FF).
• GG representa o componente verde (00 a FF).
• BB representa o componente azul (00 a FF).

#FF0000 /* vermelho */
#00FF00 /* verde */
#0000FF /* azul */
#000000 /* preto */
#FFFFFF /* branco */

Cores RGB

O modelo de cor RGB é outra maneira de especificar cores no CSS. Ele usa uma combinação de valores de vermelho, verde e azul.

O formato de um valor de cor RGB é:

rgb(vermelho, verde, azul)

onde cada componente é um número inteiro entre 0 e 255.

rgb(255, 0, 0)   /* vermelho */
rgb(0, 255, 0)   /* verde */
rgb(0, 0 ,255)   /* azul */
rgb(0 , 0 , 0 )    /* preto */
rgb(255 ,255 ,255 )/* branco */

Cores RGBA

RGBA é uma extensão do modelo RGB que inclui um canal alfa para especificar a opacidade. O valor alfa varia de 0 (totalmente transparente) a 1 (totalmente opaco).

O formato de um valor de cor RGBA é:

rgba(vermelho, verde, azul, alfa)

onde os três primeiros componentes são números inteiros entre 0 e 255, e o valor alfa varia de 0 a 1.

 rgba(255, 0, 0, .5) /* vermelho com 50% de opacidade */  
 rgba(0, 255, 0, .8) /* verde com 80% de opacidade */  
 rgba(0, 0, 255, .3) /* azul com 30% de opacidade */

Cores HSL

O modelo HSL representa cores usando valores de matiz, saturação e luminosidade. Ele oferece uma maneira mais intuitiva de descrever cores em comparação com o RGB.

O formato de um valor de cor HSL é:

hsl(matiz, saturação, luminosidade)

onde:

• matiz é um ângulo entre 0 e 360 graus representando a roda de cores.
• saturação é um valor percentual entre 0% e 100%, onde 0% representa escala de cinza e 100% representa saturação total da cor.
• luminosidade é um valor percentual entre 0% e 100%, onde 0% representa preto, 50% representa a cor normal e 100% representa branco.

hsl(0, 100%, 50%) /* vermelho */
hsl(120, 100%, 50%) /* verde */
hsl(240, 100%, 50%) /* azul */
hsl(0, 0%, 0%) /* preto */
hsl(0, 0%, 100%) /* branco */

Cores HSLA

HSLA é uma extensão do modelo de cor HSL que inclui um canal alfa para especificar a opacidade, semelhante ao RGBA.

O formato de um valor de cor HSLA é:

hsla(matiz, saturação, luminosidade, alfa)

onde os três primeiros componentes seguem o mesmo formato do HSL, e o valor alfa é um decimal entre 0 e 1.

 hsla(0, 100%, 50%, .5) /* vermelho com 50% de opacidade */   
 hsla(120, 100%, 50%, .8) /* verde com 80% de opacidade */   
 hsla(240, 100%, 50%, .3) /* azul com 30% de opacidade */

Cor do Texto

A propriedade color no CSS define a cor do texto dentro de um elemento. Ela aceita qualquer valor de cor válido, como nomes de cores, cores hexadecimais, RGB, RGBA, HSL ou HSLA.

h1 {
  color: blue;
}

p {
  color: #FF0000;
}

span {
  color: rgb(0, 255, 0);
}

• O elemento <h1> terá texto azul.
• O elemento <p> terá texto vermelho usando um valor hexadecimal.
• O elemento <span> terá texto verde usando um valor RGB.

Cor de Fundo

A propriedade background-color define a cor de fundo de um elemento. Ela aceita os mesmos valores que a propriedade color.

div {
  background-color: yellow;
}

section {
  background-color: #00FF00;
}

article {
  background-color: rgba(255, 0, 0, 0.5);
}

• O elemento <div> terá um fundo amarelo.
• O elemento <section> terá um fundo verde usando um valor hexadecimal.
• O elemento <article> terá um fundo vermelho com 50% de opacidade usando um valor RGBA.

Cor da Borda

A propriedade border-color define a cor da borda de um elemento. Ela aceita os mesmos valores que as propriedades color e background-color.

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

.container { 
  border: 1px dashed; 
  border-color: #0000FF; 
} 

.card { 
  border: 3px dotted;  
  border-color: hsl(240, 100%, 50%);
}

• A classe .box tem uma borda sólida rosa.
• A classe .container tem uma borda tracejada azul com valores hexadecimais.
• A classe .card tem bordas pontilhadas azuis com valores HSL.

Opacidade

A opacidade controla a transparência entre zero e um, onde zero significa transparência total e um significa visibilidade total.

img {
  opacity: 0.5;
} 

.overlay {
  opacity: 0.8;
} 

.faded-text {
  opacity: 0.3;
}

• Elementos img são semitransparentes em cinquenta por cento.
• Classes .overlay aparecem oitenta por cento visíveis.
• Classes .faded-text parecem trinta por cento desbotadas.

Esquema de Cores Complementares

Cores complementares são opostas uma à outra na roda de cores. Elas criam alto contraste e podem fazer os elementos se destacarem. Exemplos incluem:

• Vermelho e verde
• Azul e laranja
• Roxo e amarelo

Esquema de Cores Análogas

Cores análogas são adjacentes na roda de cores. Elas criam um visual equilibrado. Exemplos incluem:

• Vermelho, laranja e amarelo
• Verde, verde-azulado e azul
• Roxo, roxo-azulado e azul

Esquema de Cores Triádicas

Cores triádicas são igualmente espaçadas na roda de cores, formando um triângulo. Elas oferecem uma combinação vibrante. Exemplos incluem:

• Vermelho, amarelo e azul
• Verde, laranja e roxo
• Azul-petróleo, magenta e amarelo-alaranjado

Ao criar combinações de cores, considere estas dicas:

• Use uma roda de cores para ajudar a selecionar cores que combinam.
• Escolha uma cor principal com outras como acentos para equilíbrio.
• Pense no clima que você quer transmitir com suas escolhas.
• Teste suas combinações em diferentes dispositivos para legibilidade.

Use ferramentas online para gerar paletas ou explorar diferentes esquemas.

Lembre-se que as preferências variam com base no gosto pessoal ou no contexto do projeto. Experimente diferentes esquemas para criar designs visualmente atraentes.