As cores no CSS são uma parte fundamental da criação de designs e a escolha das cores certas é fundamental para transmitir a mensagem correta para seu público. Assim no CSS (Cascading Style Sheets), as cores podem ser especificadas de várias maneiras, incluindo nomes de cores, hexadecimais, RGB ou RGBA.
Além disso, o CSS também fornece ferramentas para manipular e alterar as cores, incluindo funções de cor como lighten() e darken(), bem como escalas de cores, como monocromático, complementar, análogo e acromático.
Certamente, ao compreender como usar as cores no CSS, você poderá criar designs atraentes e eficazes que ajudem a transmitir sua mensagem de forma clara e impactante.
Nesse artigo vamos falar de alguns tópicos sobre esse assunto tão importante, já adianto eles:
- Entendendo as cores no CSS: como funciona a representação de cores no CSS.
- Cores hexadecimais: como utilizar as cores hexadecimais para especificar cores no CSS.
- RGB e RGBA: como utilizar as cores RGB e RGBA para especificar cores no CSS.
- HSL e HSLA: como utilizar as cores HSL e HSLA para especificar cores no CSS.
- Nomes pré-definidos de cores: lista de nomes pré-definidos de cores que podem ser usados no CSS.
- Gradientes de cores: como utilizar gradientes de cores para especificar cores no CSS.
- Manipulação de cores: como utilizar funções de manipulação de cores, como lighten() e darken(), para ajustar as cores do CSS.
- Escala de cores
Entendendo as cores no CSS
O CSS permite que você especifique cores para elementos HTML usando diferentes formatos, como hexadecimal, RGB, RGBA, HSL e HSLA. Dessa forma, o formato padrão é o hexadecimal, que consiste em seis dígitos hexadecimais que representam a mistura de vermelho, verde e azul (RGB) para formar uma cor.
Exemplo:
body {
background-color: #ffffff;
}Veja também:
Estrutura Básica Do HTML
Introdução rápida sobre Python
Introdução rápida sobre JavaScript
Passo a passo de como funciona a internet
JavaScript: acelere seu site Usando a Tag script
Cores hexadecimais
Pois bem, seis dígitos hexadecimais representam as cores hexadecimais que misturam o vermelho, verde e azul (RGB). Assim cada par de dígitos hexadecimais representa a intensidade de um canal (vermelho, verde ou azul).
Exemplo:
p {
color: #ff0000;
}RGB e RGBA
Inegavelmente o formato RGB permite que você especifique as intensidades de vermelho, verde e azul usando valores numéricos (0 a 255). O RGBA adiciona ao RGB a capacidade de especificar a opacidade da cor (0 a 1).
Exemplo:
h1 {
color: rgb(255, 0, 0);
}
button {
background-color: rgba(0, 0, 255, 0.5);
}HSL e HSLA
O HSL (hue, saturation, lightness) permite que você especifique as cores usando valores de matiz, saturação e luminosidade. Assim o HSLA adiciona ao HSL a capacidade de especificar a opacidade da cor (0 a 1).
Exemplo:
div {
background-color: hsl(120, 100%, 50%);
}
a {
color: hsla(0, 100%, 50%, 0.5);
}Nomes pré-definidos de cores
O CSS inclui uma lista de nomes pré-definidos de cores que você pode usar diretamente no seu código. Alguns exemplos incluem “red”, “blue”, “green”, “yellow”, entre outros.
Exemplo:
nav {
background-color: blue;
}
strong {
color: red;
}Obs.: CSS/HTML suporta 140 nomes de cores padrão.
Exemplo de nome da cores:
Gradientes de cores
Os gradientes de cores permitem que você crie uma transição suave entre duas ou mais cores. Eles são especificados usando a função linear-gradient() ou radial-gradient().
Exemplo:
header {
background-image: linear-gradient(to right, blue, green);
}
footer {
background-image: radial-gradient(circle, yellow, red);
}Manipulação de cores
As funções de manipulação de cores permitem que você altere as propriedades de uma cor, como luminosidade, saturação e matiz, sem ter que escrever valores específicos manualmente. Por exemplo, a função lighten() tem como função aumentar a luminosidade de uma cor, enquanto a função darken() tem função de diminuir a luminosidade de uma cor.
Exemplo:
section {
background-color: lighten(blue, 20%);
}
aside {
background-color: darken(yellow, 10%);
}Escala de cores
A escala de cores é uma série de cores relacionadas entre si que são usadas para criar harmonia visual em designs. Dessa forma, algumas das escalas de cores mais comuns incluem o esquema de cores monocromático, o esquema de cores complementar, o esquema de cores análogo e o esquema de cores acromático. É importante escolher uma escala de cores apropriada para garantir que seu design seja coerente e harmonioso.
Exemplo
/* Esquema de cores monocromático*/
.monochromatic {
background-color: lightblue;
color: darkblue;
}
/* Esquema de cores complementares */
.complementary {
background-color: orange;
color: blue;
}
/* Esquema de cores análogas */
.analogous {
background-color: green;
color: yellowgreen;
}
/* Esquema de cores acromáticas */
.achromatic {
background-color: white;
color: gray;
}Mapa mental para fixar o assunto
Veja o primeiro artigo do Tutorial: Introdução rápida sobre CSS
Conclusão
Em conclusão, as cores são uma parte vital da personalização de designs e a escolha das cores certas pode ter um impacto significativo na forma como seu projeto é percebido pelo público.
O CSS fornece uma ampla gama de opções para especificar cores, incluindo nomes de cores, hexadecimais, RGB ou RGBA, bem como funções para manipular e alterar as cores.
Além disso, o entendimento de escalas de cores, como monocromático, complementar, análogo e acromático, pode ajudá-lo a criar combinações de cores coerentes e harmoniosas. Ao usar as cores de forma eficaz no CSS, você poderá dar vida a seus projetos e transmitir sua mensagem de forma impactante.
Então é isso, bons estudo e até o próximo artigo do tutorial
Perguntas frequentes
As cores podem ser especificadas de várias maneiras no CSS, incluindo nomes de cores, hexadecimais, RGB ou RGBA. Por exemplo, você pode usar a propriedade “color” para definir a cor do texto como vermelho usando o nome da cor: “color: red;”. Alternativamente, você pode especificar a cor em formato hexadecimal, como “#ff0000”.
RGB significa Red Green Blue e é usado para especificar cores com base nas intensidades desses três componentes de cor. Já o RGBA adiciona um quarto componente, alpha, que controla a transparência da cor.
No CSS, você pode manipular as cores usando funções de cor, como lighten() e darken(). Além disso, é possível usar operações matemáticas como adição e subtração de cores para criar novas cores.
Escalas de cores são conjuntos de cores que trabalham juntas para criar combinações harmoniosas. Algumas escalas de cores comuns incluem monocromático, complementar, análogo e acromático. Ao entender como usar escalas de cores, você pode criar designs coerentes e atraentes.
Para garantir que as cores de seu projeto sejam coerentes e harmoniosas, você pode seguir uma escala de cores específica, usar uma paleta de cores pré-definida ou criar sua própria paleta de cores com base em regras de harmonia de cor. Além disso, é importante testar suas combinações de cores em diferentes tamanhos de tela e dispositivos para garantir a consistência visual. Certifique-se também de considerar a acessibilidade ao escolher as cores de seu projeto.
