O documento explica como as cores são codificadas em hexadecimal para a web e como manipular cores usando HSB. Cada par de dígitos no código hexadecimal representa os valores de vermelho, verde e azul de 0 a 255. As letras representam valores de 0 a 15 para permitir 16 variações. A ferramenta HSB no Photoshop permite ajustar a saturação, brilho e matiz de uma cor.

1. 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.
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 webEntendendo as formações de cores hexadecimais para web
1212
fevfev
Página InicialPágina Inicial ContatoContato PortfolioPortfolio
http://the-creators.com.br/entendendo-as-formacoes-de-cores... 1 de 4

2. 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:
Página InicialPágina Inicial ContatoContato PortfolioPortfolio
http://the-creators.com.br/entendendo-as-formacoes-de-cores... 2 de 4

3. 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:
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
Página InicialPágina Inicial ContatoContato PortfolioPortfolio
http://the-creators.com.br/entendendo-as-formacoes-de-cores... 3 de 4

4. Espero que tenham entendindo e em breve irei explicar sobre CMYK e Lab. Enjoy
Google
Página Inicial
Copyright © 2013 www.The-Creators.com.br - Todos os direitos reservados.
«
Cores e seu website, como
combinar.
Logo, logotipo ou logomarca?
»
1 comentário Classificar por
Sorymar Conceição Teixeira Soares · Biologia Bacharel
barbabara conceição prazeras teira fotoo
Curtir · Responder · 6 de março de 2013 19:48
Facebook Comments Plugin
PrincipaisPrincipais
Adicionar um comentário...
Página InicialPágina Inicial ContatoContato PortfolioPortfolio
http://the-creators.com.br/entendendo-as-formacoes-de-cores... 4 de 4