Como brincar com cores no CSS com rgb e hexadecimal?
Recentemente, participei do "Code in the Dark", em que os competidores tem 15 minutos para criar uma página HTML/CSS com base em um layout fornecido, sem a ajuda de autocomplete ou extensões de IDE, e sem a possibilidade de visualizar um preview do meu trabalho.
Muitas pessoas tem medo de irem lá e serem julgadas, eu principalmente. Tinha muita gente torcendo pra mim, se eu não fizesse um trabalho decente eu iria decepcionar geral. Enquanto estava lá, fiquei com medo de me julgarem em cada linha que eu estava fazendo. Mas no final, acabei ganhando e ninguém veio me criticando por usar
float: right ou um a element para fazer um botão.Pelo contrário, veio algumas pessoas falando sobre como mandei bem na criação de cores durante a competição. E realmente, cores são importantes especialmente aqui, pois a competição é basicamente quem pinta a melhor tela. Trabalhar com cores é importante.
Sempre trabalhei com Hexadecimal e não colocando o nome literal das cores, e isso foi uma mega vantagem pois na tela que estava programando, no primeiro round, precisei usar 3 tonalidades de azul diferentes.
Então, sob demanda, neste artigo, vou compartilhar com vocês como dominar o uso das cores no CSS e entender melhor como o sistema RGB, o Hexadecimal, estão envolvidos na exibição de cores.
A Exibição das Cores pelos LEDs do Monitor
Os monitores utilizam LEDs (Diodos Emissores de Luz) para exibir cores. Cada pixel do monitor contém pequenos LEDs que emitem luz para formar a imagem na tela. Através do sistema RGB, a intensidade de cada LED é ajustada para compor a cor desejada. Mas isso você já sabia, né?
Ao combinar intensidades diferentes de vermelho, verde e azul, o monitor é capaz de reproduzir todas as cores visíveis ao olho humano. Isso permite que a gente tenha controle preciso sobre as cores que aparecem em suas páginas web e aplicativos.
O Sistema RGB e os LEDs do Monitor
Para entendermos como as cores são exibidas em um monitor, precisamos entender o sistema RGB, que é baseado na mistura de três cores primárias: vermelho (R), verde (G) e azul (B).
No sistema RGB, cada cor é formada pela combinação de intensidades das três cores primárias (R, G, B). Cada cor possui um valor numérico que varia de 0 a 255, indicando a intensidade da cor específica na mistura.
Por exemplo:
- Vermelho puro é representado por RGB(255, 0, 0), onde o vermelho está com a intensidade máxima (255) e o verde e azul estão com intensidade mínima (0).
- Amarelo é representado por RGB(255, 255, 0), pois o vermelho e o verde estão com intensidade máxima e o azul está com intensidade mínima.
Essas intensidades são convertidas em sinais elétricos que controlam os LEDs do monitor. Os LEDs emitem luz em diferentes intensidades e combinações, criando uma vasta gama de cores na tela.
Mas pera, é isso? Simples assim? Sim, você já sabia que RGB é Red, Green e Blue. Sim, você já sabia que misturar verde e vermelho dá amarelo. Tá, talvez essa última você tenha se esquecido, mas é o conceito primário e cores. A informação nova aqui talvez é o valor ir de 0 a 255.
RGBA
Durante o evento, fiz duas tonalidades de azul usando este princípio, porém querendo garantir que estava fazendo uma tonalidade mais escura do azul sem precisar ficar pensando muito sobre quanto de cada cor tem, afinal, não tinha preview, não estava vendo a cor, recorri a usar transparência.
Ao colocar um azul sob outro azul com um pouco de transparência, o azul de cima fica mais escuro.
Então, como faz a transparência? Simples, podemos usar o RGBA aonde o A é de Alpha. É um valor de 0 a 1 que dita a opacidade onde 0 é transparente e 1 opaco. Assim tive mais chance brincar com as cores.
Como Funciona o Hexadecimal?
Tá, mas na hora lá só usei o Hexadecimal quando não precisei lidar com opacidade. Como isso funciona?
No sistema hexadecimal, cada cor é representada por um valor de seis caracteres, começando com "#" seguido por dois caracteres para o vermelho (R), dois caracteres para o verde (G) e dois caracteres para o azul (B). Cada caractere pode variar de 0 a 9 e de A a F, o que significa que temos 16 opções para cada posição.
Por exemplo:
- Preto é representado por #000000, onde todos os valores (R, G, B) são 0.
- Branco é representado por #FFFFFF, onde todos os valores (R, G, B) são F, que é equivalente a 255 em decimal.
De RGB para Hexadecimal
Para fazer a conversão, basta observar os valores dos canais RGB e associá-los diretamente às duas primeiras letras (R), às duas do meio (G) e às duas últimas (B) do código hexadecimal. Por exemplo, se temos a cor RGB(255, 0, 128), podemos convertê-la para hexadecimal da seguinte forma:
- O valor do vermelho (R) é 255, que em hexadecimal é FF.
- O valor do verde (G) é 0, que em hexadecimal é 00.
- O valor do azul (B) é 128, que em hexadecimal é 80.
Assim, a cor RGB(255, 0, 128) é representada em hexadecimal como #FF0080. Essa conversão simples e direta é muito útil para ajustar cores rapidamente em um projeto, tornando o processo de escolha de cores mais eficiente.
Com esse conhecimento, os desenvolvedores podem explorar uma infinidade de combinações de cores, aproveitando as vantagens tanto do sistema RGB quanto do hexadecimal para criar páginas web atraentes e visualmente impactantes - e com isso, ganhar o Code In The Dark.
A minha dica final é que você evite escrever cores literais no CSS para já ir se acostumando, e use as diversas ferramentas (inclusive o próprio Google, quando você pesquisa uma cor) para brincar com novas cores e entender como elas se comportam.
Não tem segredo, se tinha, te contei agora.