Olá, pessoal!
Hoje em dia é sabido que existem algumas escalas / padrões de cores (se é que posso chamar assim) para trabalharmos dentro do mundo digital.
Dentro das linguagens de programação, hoje em nosso tópico (mais especificamente no CSS), é muito comum vemos cores no padrão RGB, RGBA e Hexadecimal.
Tudo bem, mas como eles funcionam e qual a co-relação entre eles?
Veremos isso agora e você poderá até passar a criar as cores que precisa de cabeça para seu código, sem a necessidade de um aplicativo auxiliar. Basta entender o conceito.
Dando andamento no conteúdo do artigo, já de início vamos começar excluindo um desses padrões, o RGBA.
Digo isso porque o A do RGBA significa Alpha.
Alpha não é nada mais que uma escala de transparência. Após entendermos como funciona o RGB, elucidarei como ele se comporta.
Vamos então direto ao que interessa:
RGB vem de Red, Green e Blue; as três cores básicas.
Hexadecimal é um padrão em que se misturam letras de A a F (seis letras) e números de zero a nove.
O padrão hexadecimal se divide em tres pares de combinações, resultando em seis algarismos alfanuméricos. Já o padrão RGB se divide em uma sequência de três números distintos que variam de zero a 255.
Podemos então destacar que RGB tem três sequências de números e Hexadecimal tem três pares de algarismos alfanuméricos.
O primeiro número do RGB corresponde ao primeiro par de algarismos no Hexadecimal, o segundo ao segundo e o terceiro ao terceiro.
Podemos então concluir que cada número de zero a 255 no RGB corresponde a uma combinação de um par no Hexadecimal. Logicamente um par do Hexadecimal pode ter 255 combinações diferentes.
Vamos ver abaixo um exemplo da construção da cor branca em ambos padrões:
|CORES => |RED |GEEN |BLUE
--------------------------------------
|RGB => |255 |255 |255
--------------------------------------
|HEXADECIMAL=> |ff |ff |ff
Vamos agora entender as combinações e a escala delas:
Podemos ver que no bloco acima, temos para cada coluna o nome da cor. Isso significa que os algarismos dos padrões de cores correspondem diretamente a essa cor.
Partindo do RGB que é o mais simples de entender por se tratar de números, zero significa nenhuma intensidade da cor, e 255 total intensidade da cor.
Sendo assim, podemos então imaginar como se fosse uma aquarela. Basta irmos misturando as cores em suas intensidades.
Como regra de mistura de cores temos os seguintes:
Se misturamos três cores com a mesma intensidade, o resultado será sempre uma cor neutra. Em outras palavras teremos sempre tons diferentes de cinza.
Se misturarmos todas as cores em suas intensidades máximas, teremos como resultado o branco.
Da mesma forma, se misturarmos todas as cores em suas intensidades mínimas, teremos como resultado o preto.
Se queremos dar destaque a uma cor em específico, damos mais intensidade à ela do que às demais.
Seguindo pela mesma linha de raciocínio, quando queremos uma cor absoluta, utilizamos o máximo de intensidade dessa cor, e o mínimo das demais.
Vejamos abaixo com CSS como atribuir as cores branco, preto, vermelho, verde e azul a um elemento:
#fundo_preto{
background: rgb(0,0,0);/*preto*/
}
#fundo_branco{
background: rgb(255,255,255);/*branco*/
}
#fundo_vermelho{
background: rgb(255,0,0);/*vermelho*/
}
#fundo_verde{
background: rgb(0,255,0);/*verde*/
}
#fundo_azul{
background: rgb(0,0,255);/*azul*/
}
Exemplo:
Voltando a pensar como numa aquarela, vamos começar a misturar as cores. O vermelho, verde e azul, dão origem a outras três cores (que são utilizadas no padrão CMYK):
#fundo_amarelo{
background: rgb(255,255,0);/*verde com vermelho produz amarelo*/
}
#fundo_magenta{
background: rgb(255,0,255);/*vermelho com azul produz magenta*/
}
#fundo_ciano{
background: rgb(0,255,255);/*verde com azul produz ciano*/
}
Exemplo:
Agora já podemos entender o que é o RGBA.
Conforme falamos, o A é Alpha, ou seja, uma escala de transparência. Esse valor é uma porcentagem, portanto 1 inteiro significa 100% e zero, 0%. Qualquer decimal entre Zero e Um se torna uma porcentagem de 0% a 100%.
Vejamos um exmeplo:
#fundo_ciano_transparente{
background: rgba(0,255,255,0.5);/*isso produzirá um ciano, 50% transparente.*/
}
Exemplo de comparação:
- 100%
- 50%
Agora que já sabemos como construir corretamente as cores no RGB e RGBA vamos então entender o conceito de construção de cores no Hexadecimal.
No hexadecimal as combinações funcionam da seguinte forma:
Começam com 00 (zero, zero) e terminam com ff.
Inicialmente para cada grau a mais de intensidade da cor, aumentamos um número no algarismo direito do par da cor que estamos trabalhando. Sendo assim, teremos um "range" de 00 a 09.
Depois passa-se a inserir letras de a até f nesse mesmo segundo algarismo. Sendo assim teremos um range de 0a a 0f.
Ao atingirmos o grau 0f, acrescentamos um número no algarismo esquerdo do par, então passamos para 10 (um, zero) e o processo se inicia novamente into até 1f.
Ao aintgirmos 1f, começamos novamente o processo com 20 (dois, zero) e assim por diante até 9f.
Quando chegamos a 9f, iniciamos com a0 e vamos até af.
Do af aumentamos uma letra do lado esquerdo e vamos de b0 até bf, e assim consecutivamente até ff.
Vamos agora ver em CSS os exemplos dados acima, agora no formato Hexadecimal:
background: #000000;/*preto*/
background: #ffffff;/*branco*/
background: #ff0000;/*vermelho*/
background: #ffff00;/*verde com vermelho produz amarelo*/
background: #00ff00;/*verde*/
background: #00ffff;/*verde com azul produz ciano*/
background: #0000ff;/*azul*/
background: #ff00ff;/*vermelho com azul produz magenta*/
Para adicionar escala de transparência no Hexadecimal, basta adicionar um quarto par de caracteres que funcionará no mesmo padrão dos anteriores, onde 00 (zero zero) será 100% de transparência e ff nenhuma transparência.
Existe uma abreviatura no formato Hexadecimal que nos ajuda na composição de cores; essa abreviatura é composta por apenas três algarismos ao invés de três pares de algarismos. Dessa forma o RGB será interpretado como se o único algarismo informado devesse ser duplicado, complementando o par com si mesmo, formando assim pares de algarismos iguais.
Vejamos na prática o exemplo anterior, com as mesmas cores, porém na forma abreviada.
background: #000;/*preto*/
background: #fff;/*branco*/
background: #f00;/*vermelho*/
background: #ff0;/*verde com vermelho produz amarelo*/
background: #0f0;/*verde*/
background: #0ff;/*verde com azul produz ciano*/
background: #00f;/*azul*/
background: #f0f;/*vermelho com azul produz magenta*/
Na "abreviatura" do Hexadecimal também é possível adicionar transparência, seguindo a mesma metodologia de formação de cores, através de um quarto algarismo que representará a escala de opacidade.
Vejamos um exemplo de formação da cor ciano com transparência, em Hexadecimal nas duas formas de construção (comum e abreviada):
#fundo_ciano_transparente_comum{
background: #00ffff7f;/* 7f produzirá aproximadamente 50% de transparência.*/
}
#fundo_ciano_transparente_abreviado{
background: #0ff7;/* 7, será interpretado como 77, produzirá aproximadamente 47% de transparência.*/
}
Como já falamos acima, para cada combinação de algarismos no Hexadecimal, é correspondida uma combinação de números no RGB. Dessa forma podemos concluir que em qualquer dos dois formatos, temos uma gama de 16.777.216 cores além de 255 escalas de transparência para cada uma delas, totalizando 1.677.721.600 possiblidades.
E o melhor de tudo isso é que você não vai precisar mais decorar todas essas 16 milhões de cores. Considerando o conceito explicado nesse post, você é capaz de construir qualquer cor, desde que você tenha noções de mistura de cores.
Para finalizar, vamos ver um exemplo de construção de cor:
Sabemos que o vermelho e o verde produzem o amarelo. Mas se queremos o laranja, basta adicionarmos mais vermelho ao amarelo. Correto?
Nem tanto. Quando temos o amarelo em sua intensidade total, teríamos #ffff00, então não há como aumentar vermelho. Sendo assim precisamos ao invés disso, diminuir o verde.
E voilát!
background: #ff9900;/*laranja*/
Exemplo:
O mesmo conceito podemos utilizar para encontrar o roxo:
Sabemos que o vermelho e o azul produzem o magenta. Mas se queremos o roxo, basta adicionarmos mais azul ao magenta.
Dessa forma, seguindo a mesma linha de raciocínio, se precisamos de mais azul, diminuímos o vermelho.
E voilát novamente!
background: #9900ff;/*roxo vivo*/
Exemplo:
E então podemos ter um roxo menos vivo, diminuindo a intensidade de ambas as cores:
background: #5500aa;/*roxo*/
Exemplo:
Da mesma forma encontrar o marrom:
Uma vez tendo o laranja, basta diminuir a intensidade das cores (vermelho e verde) e chegaremos onde precisamos.
background: #884400;/*marrom*/
Exemplo:
Como vimos neste artigo, basta entender a forma que as cores se constroem que fica mais fácil de utiliza-las sem necessidade de ficar consultando tabelas ou "colorpickers".