Entendendo as formações de cores hexadecimais para web | The Creators – Desenvolvimento de Sites / Web Design

A algum tempo atrás, cirei um post falando sobre as combinações de cores e seu web site e hoje resolvi explicar a formação dos códigos das cores e como melhor manipular-las. Existe um pequeno requisito na facilidade de cálculos matemáticos, mas nada que uma calculadora não resolva xD.

Formação de cores em hexadecimal


Como todos já devem saber, as cores web em hexadecimal são aquelas precididas do “#” (joguinho da velha, tralha, sustenido e etc). Os demais números na realidade, são parte de uma pequena equação matemática para a construção das cores em RGB, também existe o CMYK, mas, ele é mais usado em trabalhos de imprenssões, ao contrário do RGB que é extramamente usado na web. A sigla RGB representa as cores, Red (Vermelho representado pela letra R) Green (Verde representado pela letra G) Blue (Azul representado pela letra B). No hexadecimal existem 6 caracteres, na realidade, as cores vão em dupla, tomando como exemplo a cor #95b604 (este verde), vemos que o 95 seria o vermelho, b6 o verde e 04 o azul, a equação dos pares equivalem a um valor que varia de 0 a 255. Quanto menor o valor, mais escuro será a cor e quanto mais 255 mais forte e intensa será.

E agora você se perguntar, porque das letras?
A resposta é simples, cada caractere é uma pequena variação de 0 a 15, mas como do 10 a 15 possuem dois algarismos, então, foram trocados por letras, ou seja, cada caractere terá um valor de 0 a 15, em 16 variações. Veja a figura abaixo para o entendimento maior do que foi explicado.

Entendendo as formações de cores hexadecimais para web

Tomando a imagem acima como legenda, vamos começar os cálculos, primeiramente o Vermelho, temos os algarismos 9 e 5, nossa equação é a seguinte,”Primeiro caracter x 16 + segundo caracter = ?” ou seja “9 x 16 + 5 = 149″. Então no vermelho teriamos o valor 149, no verde temos “11 (valor de B) x 16 + 6 = 182″. E no azul teriamos “0 x 16 + 4 = 4″.
Misturando os valores e adicionando em seus respectivos lugares, teremos nosso verde como mostra a figura abaixo:

Entendendo as formações de cores hexadecimais para web

Agora para entender como melhor manipular as cores, temos nosso painel no photoshop, trabalharemos agora com HSB, Hue / Saturation / Brightness. Vejam a figura abaixo com o nosso verde e vamos ao entendimento:
Entendendo as formações de cores hexadecimais para web

No eixo X trabalharemos os valores do Saturation (saturação) ou seja, a intensidade e força da cor.
No eixo Y trabalharemos os valores do Brightness (brilho) ou seja, mais clara ou mais escura.
No canto direito temos a barra de Hue (matiz) onde mudaremos a nossa cor.
Os valores da saturação e brilho são trabalhados em porcentagem (%), igual a matemática onde pra cima e direita são os valores maiores, esquerda e abaixo os menores. Já na matiz, usa-se os valores em graus (°) pq as cores são vistas em um círculo onde sempre irão dar uma volta completa do vermelho ao vermelho.

Espero que tenham entendindo e em breve irei explicar sobre CMYK e Lab. Enjoy :D

Google