Quando se trata de espalhar cores na tela, existem algumas maneiras de fazer isso com a codificação. Hex, RGBA e HSLA são três dos sistemas de código de cores mais comumente usados.
Você provavelmente já encontrou códigos hexadecimais e RGB no passado, mas HSL, apesar de ser mais legível por humanos, pode não ter estado em seu radar ainda. Cada forma de escrever cores faz sentido em diferentes situações, e tudo que você precisa é um conhecimento básico de cada tipo para tomar uma decisão informada. Aqui vamos explicar as diferenças entre RGB, HEX e HSL.
O que é RGB (vermelho, verde, azul)
Faz sentido começar com valores RGB, uma vez que vermelho, Verde, e Azul são as três cores que as telas podem usar para produzir praticamente todas as outras cores. Ele faz isso usando “mistura de cores aditiva”, mas você não precisa se aprofundar na ciência disso para entender RGB.
rgb(255, 0, 0) é vermelho, pois o R está no máximo. Se você definir o G ou o B para 255, você obterá totalmente verde ou totalmente azul. Defina-os todos como 255 de uma vez e você obterá o branco (a soma de todas as cores), enquanto zerando-os renderiza o preto. Se você adicionar um quarto valor (o canal alfa, entre 0 e 1), também poderá obter transparência: rgba(0, 0, 0, .5) se traduz em um preto semitransparente.
É simples, sim, mas não tão intuitivo. O equilíbrio RGB pode mudar um pouco, mesmo se você estiver apenas mudando o tom de uma cor, tornando muito difícil para os humanos fazer ajustes manuais sem algum tipo de gerador RGB (felizmente, existem muitos).
O que são códigos de cores hexadecimais
Hexes são apenas uma maneira diferente de escrever valores RGB. Algo como #6a79f7 (azul centáurea) mapeia diretamente para rgb(106, 121, 247). 6a é o vermelho, 79 é o verde, e f7 é o azul.
Primeiro, você deve saber que no sistema de cores hexadecimais as letras “af” representam os números dez a quinze. Em segundo lugar, é hexadecimal, o que significa que tudo está na base 16. 21 é 2 * 10 + 1 na base 10, mas em hexadecimal seria 2 * 16 + 1. Basta multiplicar o primeiro número por 16 e adicionar o segundo número – é tão fácil quanto isso! 6a = 6 * 16 + 10 ou 106. 79 = 7 * 16 + 9 ou 121.
Embora a matemática seja divertida, ela obviamente torna os códigos hexadecimais ainda mais difíceis para os humanos do que o RGB, embora sejam fáceis de copiar e colar e possam ter combinações de letras / números memoráveis.
Você também pode adicionar transparência aos códigos hexadecimais, colocando um valor equivalente a uma porcentagem de 255 no início, assim: #806a79f7. 80 em hexadecimal = 126, que é próximo a 50% do valor máximo de 255.
O que é HSL (matiz, saturação, luminosidade)
O HSL foi projetado para ser legível por humanos e está ganhando popularidade, especialmente como uma alternativa RGB. Funciona assim:
Matiz significa cor e usa os graus da roda de cores para indicar a cor que você está usando. Se você conhece a roda de cores e as posições dessas cores principais, deve ser capaz de dizer que 45 parecerá laranja e 270 parecerá roxo apenas pensando nisso por um segundo.
- 0 = vermelho
- 60 = amarelo
- 120 = verde
- 180 = ciano
- 240 = azul
- 300 = magenta
Saturação é essencialmente o quão colorida é a cor. 0% de saturação significa que a cor será apenas um tom de cinza, enquanto 100% significa que mostrará força total. Se quiser silenciar sua cor ou torná-la mais destacada, basta alterar esse valor.
Leveza informa o quão escura ou clara é a cor. 0% de claridade significa que sua cor será preta, independentemente das configurações de matiz ou saturação, e 100% de claridade resultará em branco. Como você deve ter adivinhado, 50% fornece a cor mais precisa.
Com essas informações, você deve ser capaz de dizer instantaneamente o que hsl(0, 100%, 50%) meios. É apenas vermelho! Quer um vermelho mais escuro e mais rico? Experimentar 0, 70%, 40%. Talvez você queira isso, mas em azul? Basta alterar 0 para 240 e pronto! Também tem transparência – funciona como RGB: basta adicionar um quarto valor (entre 0 e 1), assim: hsla(240, 70%, 40%, .5).
HSV / HSB e HSI
Que? Mais modelos de cores? Quando isso acaba? Para a maioria das pessoas que trabalham com cores em computadores, já acabou. Hex, RGB e HSL são de longe as formas mais comuns de notar cores. Porém, se você estiver em um campo que envolve muitas imagens e cores, como design gráfico ou aprendizado de máquina em imagens, você pode se deparar com pessoas usando um desses modelos de cores mais esotéricos, ou mesmo um dos outros não listados aqui.
HSB significa “Hue Saturation Brightness” e HSVs significa Hue Saturation Value. Na verdade, eles são apenas nomes diferentes para o mesmo modelo, e sua maior diferença em relação ao HSL está em como eles definem a saturação. HSI (Hue Saturation Intensity) tem algumas pequenas diferenças do HSB / HSV, mas não é amplamente usado, então provavelmente você não o verá muito na natureza.
Qual modelo de cor devo usar?
Geralmente, escolher um modelo de cor é uma decisão de design bastante secundária, mas coisas boas são feitas com muitas pequenas decisões. Em geral, os códigos hexadecimais facilitam o copiar e colar e são ótimos em situações em que os humanos provavelmente não estarão muito envolvidos. RGB / RGBA é decente para legibilidade e é melhor usado quando seria bom se um humano pudesse às vezes ajustar a transparência. Se um ser humano precisar alterar manualmente a cor, use HSL / HSLA. Fora isso, é basicamente uma questão de preferência, embora as pessoas na equipe HSL tendam a ser mais inteligentes e mais bonitas.
Créditos da imagem: HSL Cor Cilindro Sólido Saturação Cinza, Cor Aditiva, Gráfico de cores XTerm, HSL e HSV, Munsell 1943
Apoie o nosso trabalho ❤️
Se você gostou deste artigo, considere deixar uma gorjeta para nos ajudar a continuar publicando conteúdo de qualidade.
