Hoje, durante a aula da tarde, uma estudante, hesitante, perguntou como colocaria a cor “no formato Web” como tinha mencionado anteriormente.
Tendo eles já um pouco de experiência, prontamente disse que bastava escrever o valor RGB em Hexadecimal. Após sentir uma hesitação do outro lado (da vídeo conferência), percebi que a maioria apesar de saber o que eram aqueles números estranhos, e que até já os tinham usado na Web, não faziam ideia do que significavam! :O
Depois de um pouco de resistência, lá me decidi a explicar o melhor que pude. Primeiro, como “ver” a cor em RGB. Eu tenho muita dificuldade em ver o espaço de cor RGB (eu e… sei lá, mais de metade do mundo?). Por que é muito contra-intuitivo. Pelo menos comparado com o HSL ou HSB.
Sem qualquer base cientifica (ou verificação se isto é apropriado até hoje), há uns anos atrás, quando lecionava introdução às ferramentas digitais e à multimédia digital, apercebi-me do seguinte: as cores RGB resultam (mais ou menos) nas complementares da mistura oposta.
Isto é, se misturarmos cores em CMYK (sistema subtrativo) a cor secundária que resulta da mistura de duas componentes é sensivelmente a cor primária do outro sistema.
O que, por sua vez, é a oposta da primária no primeiro. Confusos? Também eu. Mas é “fácil de ver”. Funciona como dois triângulos invertidos um do outro. Ora vejam:
É este modelo (mais ou menos) que me permite ver a cor. Quando misturo cores em RGB, penso sempre na cor que não está lá. O oposto (em CMYK) da cor que não está lá, é a cor que vamos ter!
Por exemplo: RGB(200, 0, 100). Red = 200, Green = 0, Blue = 100. Qual é a cor que não está lá? O Verde. Qual é o oposto do Verde em CMYK? o Magenta… Pimbas! Vai ser mais ou menos magenta!
Agora temos que ver como funciona o sistema aditivo (lumínico) RGB. Pensem naqueles interruptores que temos em casa para regular a potência da luz dos candeeiros (os potenciómetros). Giramos um pouco, a luz fica fraquinha. Mas se giramos mais, a luz fica mais forte (até se girarmos ao máximo fica no máximo de branco).
Isto é como as luzes dos palcos dos concertos. Imaginem que têm um foco vermelho, outro verde e outro azul. Quando se misturam (no máximo) temos o branco.
Mas, se baixarmos o verde (até quase não ter luz, que é como quem diz preto) e bastante o Azul, continua a dar uma espécie de magenta. Só que um pouco mais velha e apagada 😉
E é assim que funciona.
Agora a segunda parte da questão é mais complicada… Então como fazer isto em HEX (hexadecimal)?
Ora bem… nada muito complicado. O Hexadecimal é um sistema diferente de contar números. Com o RGB contamos de 0 até 255. Precisamos de 3 algarismos para representar a cor.
Nos computadores, nem sempre é prático. Msar um símbolo como um algarismo para representar um número é muito “dispendioso” na memória. E, como representar um número, é idêntico a representar uma letra em termos de “custo” para a máquina. Percebeu-se que se consegue contar até 255 usando uma forma de contar que, em vez de usar os números de 0 a 9, usa os carateres ou símbolos de 0 a F. Isto é. Deixamos de ter 10 números:
0 1 2 3 4 5 6 7 8 9E passamos a ter 16 carateres ou símbolos. Por isso se chama HEX (6) Decimal (10) = Base 16. Deixamos de ter dígitos. para ter hexitos (ou hegitos?).
0 1 2 3 4 5 6 7 8 9 A B C D E FIsto significa que cada símbolo (hexito) corresponde a um número específico. 0=0, 1=1, 2=2, 3=3, 4 =4, 5=5 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14 e F=15… ufff!…
Mas como é que isto corresponde ao RGB? Simples. 00 = 0 (este é fácil) o problema são todos os outros. Mas é simples perceber. É como o sistema decimal. O sistema HEX funciona sempre aos pares. Tal como o RGB funciona sempre em trios.
Assim RGB 000, 000, 000 = HEX 00, 00, 00 (ou melhor #00 00 00)
Vamos olhar para uma componente. Por exemplo vermelho. Seria RGB 255 000 000 = #FF 00 00. Uso o máximo da tabela RGB e, por isso o máximo do número Hexadecimal.
E como é que este número funciona? Simples. O primeiro número é como as “dezenas” (ou deveria dizer as hexenas?) do sistema. Assim o primeiro F de FF = 15. Mas, como é uma hexena, este F corresponde a 15*16. O que dá 240 (o 0 também conta, lembram-se? Por isso são 16 números).
E o segundo número são as unidades. Por isso o segundo F de FF corresponde a 15. Portanto, tal como no sistema decimal 25 = 2*10 + 5 (25). No sistema Hexadecimal FF = 15*16 + 15 (255). E é isto. Na realidade é simples.
Mas não pensem que faço contas. Apenas olho para os primeiros números e vejo se estão altos ou baixos… Assim #F3A244, para mim é mais ou menos #FA4. O que significa que Red = max (mais ou menos 255). Sei logo que esta cor é muito vermelha.
E que Green é pouco mais de metade… (A2 = 10 *16 + 2 = 162 –> não pensem que faço a conta na cabeça… era só para verificar, ok?). Porque é maior que 9 (mas é uma letra “baixinha”).
Nesta altura não sei muito bem qual é a cor, mas penso, qual é o oposto da cor que não está aqui? O oposto do azul é o amarelo. Por isso, muito vermelho e mais ou menos verde dá entre o laranja e o amarelo…
Por fim, junta-se um pouco de azul, menos de 2/3. O valor 44 = 4*16 +4 (68). O que significa que… er… bom nesta altura já me perdi… Mas sei que “dar azul” é o mesmo que tirar a cor oposta! Ou seja, “tirar amarelo!” Por isso a cor vai “desmaiar” na tonalidade. Mas, ao mesmo tempo, lembrem-se que é o sistema aditivo (lumínico). Por isso fica mais intensa. A cor deve ser… um laranja meio amarelado/salmonado não muito claro…
E é assim que “vejo” a cor. Se isto não explicou de forma clara, vejam o vídeo “for dummies” que é bem mais claro.
Que tal aceitarem o desafio do vídeo e fazerem um joguinho também? http://yizzle.com/whatthehex/