Hello, there! Você gosta de programar em CSS? E tem o hábito de usar muitas cores quando está programando?
Se esse é o seu caso, conhecer as diferentes maneiras para definir cores é essencial, e aprender o que significam as siglas em inglês pode ajudar muito para facilitar o trabalho e o entendimento do seu código.
Então dê uma olhada abaixo para aprender as quatro maneiras possíveis que podemos usar para definir as cores em CSS e o que elas significam em inglês. Check it out!
Saiba como definir CORES em inglês em CSS
Existem quatro maneiras diferentes para definir as cores de uma propriedade em CSS. Take a look:
COLOR NAMES
Para começar, podemos definir as cores simplesmente usando os nomes delas, já que o CSS tem suporte para 140 nomes diferentes. For example:
- Black: preto
- Red: vermelho
- Orange: laranja
- Yellow: amarelo
- DarkMagenta: magenta escuro
- Ivory: marfim
- Plum: ameixa
- Turquoise: turquesa
Entre muitos outros (clique aqui para conferir uma lista com todos esses nomes).
RGB
O formato RGB é um dos mais conhecidos, e essa sigla significa "red, green, blue", ou seja, "vermelho, verde, azul". Nós definimos um valor numérico para cada uma dessas variáveis, e a combinação desses valores vai resultar em uma cor específica.
Por exemplo, para formarmos a cor amarela (yellow), definimos o RBG como "rgb(255, 165, 0)". Isso significa que red terá o valor máximo (ou seja, 255), green terá um valor intermediário (165) e blue nem vai ser usado na combinação, por isso o valor zero.
HEX
Também podemos definir o código de uma cor através do valor hexadecimal dela. Nesse caso, o valor terá um formato #rrggbb, sendo, novamente:
- r: red (vermelho)
- g: green (verde)
- b: blue (azul)
Cada cor vai ter um código único, com caracteres variando de 00 até ff. Por exemplo, a cor amarela (yellow) terá o código hexadecimal #ffa500
HSL
Por último, também podemos definir uma cor através do formato HSL, que significa "hue, saturation, lightness", ou seja, "matiz, saturação, luminosidade". Agora não definimos apenas a cor, mas também a intensidade dela, através da saturação e da luminosidade.
A matiz (hue) será a cor escolhida, definida através de um valor de 0 a 360. A saturação (saturation) pode variar de 100% até 0%, sendo que em 100% nós teremos a cor pura, e quanto mais próximo de 0 mais ela ficará acinzentada. Também podemos definir a luminosidade (lightness) através de uma escala de 100% a 0%, sendo que em 100% teremos a luminosidade máxima (ou seja, totalmente branco) e em 0% teremos uma luminosidade mínima (ou seja, a cor preta).
Para definirmos uma cor amarela padrão, devemos usar "hsl(39, 100%, 50%)", onde "39" é o código da cor, 100% representa a saturação máxima (para preservar a cor pura, sem nenhum vestígio de cinza) e 50% representa uma luminosidade intermediária (nem muito claro, nem muito escuro).
Very interesting, isn't it? Now let's take a look at some examples to practice your English a little more:
- I think red would look better for the error message. (Acho que vermelho ficaria melhor para a mensagem de erro.)
- Can you make the text rgb(80, 80, 80) instead of pure black? (Você pode deixar o texto rgb(80, 80, 80) em vez de preto puro?)
- I don't remember the exact HEX value, but I think it was #2C3E50. (Não me lembro do valor HEX exato, mas acho que era #2C3E50.)
- I usually use HSL when I need to make a color lighter or darker. (Eu geralmente uso HSL quando preciso deixar uma cor mais clara ou mais escura.)
Do you like to use a lot of colors in your code? (Você gosta de usar muitas cores no seu código?)
Continue com a gente no nosso artigo "Você sabe o que é HARDCODING em programação?". See you!