Cores em CSS

As cores desempenham um papel muito significativo na criação de uma página da web. Nas cores CSS são usadas com mais frequência para colorir o fundo, o texto e a borda. Aqui o ponto é como definir/definir a cor em CSS?

Bem! Nas cores CSS, pode ser definido através de vários métodos, como o uso de nomes de cores predefinidos, valores hexadecimais, etc. Este artigo discutirá os seguintes métodos para definir a cor do plano de fundo, a cor do texto e as cores da borda:

• Nomes de cores predefinidos, como vermelho, verde, laranja, etc.
• Valores de cores hexadecimais, como #rrggbb, #00ff00, etc.
• Valores de cor RGB, como RGB (255, 0, 0); RGB (0, 255, 255), etc.
• Valores de cores RGBA, como RGB (255, 255, 0, 0.7), RGB (255, 0, 0, 0.1), etc.
• Valores de cores HSL, como HSL (0, 100%, 50%), HSL (240, 100%, 50%), etc
• Valores de cores HSLA, como HSL (0, 100%, 50%, 0.5), HSL (240, 100%, 50%, 0.2), etc

Todas as convenções coloridas acima mencionadas serão discutidas com exemplos. Então, vamos começar esta jornada com os nomes de cores predefinidos.

Nomes de cores predefinidos CSS

CSS fornece numerosos nomes de cores predefinidos, por exemplo, vermelho, amarelo, verde, etc. Esses nomes de cores podem ser usados ​​para modelar o fundo, o texto etc.

Vamos entender o conceito de nomes de cores predefinidos usando o exemplo abaixo do rumo

Exemplo

Digamos que temos um

elemento e queremos estilizar sua cor de texto usando valores de cores predefinidos:

Html

Bem -vindo ao Linuxhint.com

CSS

P
cor azul;

Basta atribuir o nome de cor à propriedade colorida e, como resultado, você obterá a seguinte saída:

Cor hexadecimal CSS

As cores hexadecimais são definidas por um “#”Símbolo com código de seis dígitos. São necessários valores de 0 a 15, no entanto, o 10 será representado com A, 11 com B e assim por diante, até 15, que será especificado com f.

Como o hexadecimal é um código de seis dígitos i.e #e3e3e3, os dois primeiros slots para a cor vermelha, os próximos dois para verde e os dois últimos para a cor azul. A combinação desses seis dígitos especifica uma nova cor e.g. #Ffff00 representa a cor amarela.

Exemplo

As linhas abaixo dadas definirão a cor verde de fundo

Elemento usando valores hexadecimais:

Html

Bem -vindo ao Linuxhint.com

CSS

P
Background-Color: #00FF00;

O código acima fornece a seguinte saída:

Cor CSS RGB

A cor RGB é a combinação de vermelho, verde e azul. A função rgb () leva valores de 0 a 255. Especificando valores diferentes na função RGB () resulta em várias combinações de cores. Por exemplo, RGB (255, 0, 0) gerará a cor vermelha.

Exemplo

A seguinte parte do código especifica o valor RGB para definir a cor do texto cinza do parágrafo:

Html

Bem -vindo ao Linuxhint.com

CSS

P
Background-Color: RGB (128, 128, 128);

A saída define a cor de fundo cinza:

CSS RGBA Cor

O fator de transparência pode ser adicionado às cores RGB, adicionando o valor alfa. O parâmetro alfa leva os valores entre 0 e 1. O valor mais baixo torna a cor transparente, enquanto o valor mais alto torna a cor opaca. Por exemplo, adicionando 0.0 tornará a cor transparente, enquanto 1.0 tornará a cor totalmente opaca.

Exemplo

Vamos adicionar o parâmetro alfa no exemplo acima.

Html

Bem -vindo ao Linuxhint.com

CSS

P
Background-Color: RGBA (128, 128, 128, 0.2);

No código acima 0.2 é adicionado como o valor do parâmetro alfa, que torna a cor de fundo transparente:

Cor CSS HSL

HSL é um acrônimo de matiz, saturação e leveza.

• O termo tono define o anjo dentro da roda de cores.
• Saturação define a intensidade da cor.
• A leveza especifica os níveis de leveza.

Leveza e saturação serão representadas pelo % de sinal.

Exemplo

Vamos colorir o fundo de

elemento usando valores de cor HSL.

Html

Bem -vindo ao Linuxhint.com

CSS

P
Background-Color: HSL (334, 80%, 56%);

O código acima definirá o fundo rosa do

elemento.

Cor HSLA CSS

A convenção de cores HSL pode ser estendida ao HSLA. O A representa o parâmetro alfa que é usado para adicionar os efeitos da transparência na cor.

Exemplo

Vamos estender um pouco o exemplo anterior e adicionar o parâmetro alfa também:

Html

Bem -vindo ao Linuxhint.com

CSS

P
Background-Color: HSL (334, 80%, 56%, 0.3);

O código acima mostrará a seguinte saída:

Conclusão

Os CSs fornecem várias cores e métodos para definir a cor de um elemento como nomes de cores predefinidos, a combinação de valores entre 0 a 255 dentro do RGB () ou os valores para matiz, saturação e luz podem ser usados. Além disso, um parâmetro alfa pode ser usado com RGB e HSL para adicionar o efeito de transparência na cor. Esta redação apresentou uma visão geral abrangente e elaborada das cores CSS e métodos diferentes para definir as cores no CSS.