Como Funcionam as Cores em Hexadecimal

Em algumas situações você precisa configurar uma cor personalizada para algo que você esteja fazendo, como configurar o esquema de cores no SysLinux, nos emuladores de terminal RXVT ou XTerm, e até mesmo em alguns projetos que usam o código hexadecimal para configurar as cores. Por isso é preciso entender como as cores são configuradas nesse padrão.

[ Hits: 12.153 ]

Por: Mauricio Ferrari em 13/11/2020 | Blog: https://www.youtube.com/@LinuxDicasPro


O código hexadecimal



O código de cores hexadecimal é feito com base no código RGB. O código RGB é representado de 0 a 255. Isso significa que é possível obter 256 tonalidades de azul, 256 de tonalidades de verde e 256 tonalidades de vermelho (sim são 256, o zero também deve ser considerado).

Podemos perceber que os códigos RGB tradicionais, são sempre formados com 6 dígitos, o que dá 2 dígitos para cada cor. Se em 2 dígitos hexadecimais conseguimos valores de 00 a FF, então conseguimos representar os valores de 0 a 255 da base decimal.

Figura 4 - Imagem Representativa
Agora vamos começar a entender o código de cores hexadecimal. A união das cores RGB formam o branco e a ausência das mesmas resultam no preto. Então, já temos o preto e o branco em hexadecimal:
  • Preto: #000000
  • Branco: #FFFFFF

Tá, mas qual deles é o Vermelho, Verde ou Azul? Simples, basta seguir a sequência:

. R..G..B
# FF FF FF


Portanto, as cores primárias ficam assim:
  • Vermelho: #FF0000
  • Verde: #00FF00
  • Azul: #0000FF

Com base nesses exemplos já é possível compreender o funcionamento das cores em hexadecimal e fazer suas próprias combinações com mais facilidade. Para facilitar na hora de gerar as cores, você pode optar por usar um software específico para isso.
Linux: Como Funcionam as Cores em Hexadecimal
Figura 5 - Software de Cores RGB
Tá, mas e aqueles códigos que possuem 8 espaços hexadecimais? A resposta é simples. Não computação, em algumas configurações de cores é possível aplicar transparências graças a dois campos extras no código hexadecimal, que são os dois primeiros caracteres após o #. Em geral, o FF significa opacidade máxima e 00 é totalmente transparente, invisível. Portanto, alguns exemplos de cores ficariam assim:
  • Amarelo Opaco: #FFFFFF00
  • Verde Semitransparente: #7700FF00
  • Invisível: #00000000
  • Branco Opaco: #FFFFFFFF

E assim, resolvemos o enigma das cores em hexadecimal.

Página anterior     Próxima página

Páginas do artigo
   1. Introdução
   2. Formação das cores na natureza
   3. O código hexadecimal
   4. Conclusão
Outros artigos deste autor

Compilando o QMPlay2 20.07.04 no Linux Mint 20 e Gerando o Pacote para Instalar

LXQT Desktop no Slackware

Instalando MultiLIB no Slackware 14.2 com Atualizações pelo GSlapt

Variáveis padrão para usar em seus scripts em shell

Fazendo o Mate Terminal iniciar sem a Barra de Menu

Leitura recomendada

Migrando de Red Hat para Debian

Squid com WCCP

O que é $PATH, como funciona e como trabalhar com ele

Ubuntu - configurando dois monitores numa mesma placa de vídeo

Monitorando roteadores com MRTG usando SNMP

  
Comentários
[1] Comentário enviado por fabio em 13/11/2020 - 14:46h

Quando li o título do artigo não me animei muito, mas depois que comecei a leitura, me surpreendeu. Muita informação boa, muita coisa que eu nem sonhava em saber. Parabéns!

[2] Comentário enviado por maurixnovatrento em 13/11/2020 - 21:57h


[1] Comentário enviado por fabio em 13/11/2020 - 14:46h

Quando li o título do artigo não me animei muito, mas depois que comecei a leitura, me surpreendeu. Muita informação boa, muita coisa que eu nem sonhava em saber. Parabéns!


Obrigado.

[3] Comentário enviado por maurixnovatrento em 13/11/2020 - 22:02h


Realmente exigiu um esforço de minha parte. Quando fui pesquisar sobre isso para me ajudar com um arquivo de configuração, percebi que reunindo todas essas informações eu conseguiria criar um bom artigo. Também percebi que é muito difícil encontrar um conteúdo tão completo em relação a esses temas, o que me motivou a construir esse artigo.

___________________________________________________________
[code]Conhecimento não se Leva para o Túmulo.
https://github.com/MauricioFerrari-NovaTrento [/code]

[4] Comentário enviado por cizordj em 13/11/2020 - 23:13h

Essa explicação do CMYK explodiu a minha mente, muito boa!

[5] Comentário enviado por -josinaldo- em 14/11/2020 - 09:02h

Excelente contribuição, muito bom mesmo.
Parabéns.

[6] Comentário enviado por maurixnovatrento em 14/11/2020 - 11:22h


Valeu o apoio pessoal.

___________________________________________________________
[code]Conhecimento não se Leva para o Túmulo.
https://github.com/MauricioFerrari-NovaTrento [/code]

[7] Comentário enviado por msoliver em 15/11/2020 - 20:28h

Muito bom o material, Mauricio.
Tenho algumas poucas ressalvas:
#FF000000 ou #F5F5F5. O primeiro exemplo é configurado usando 8 espaços hexadecimais e forma o preto.
#ff000000, é o vermelho com 0 de saturação, logo, a cor apresentada é a "branca"
#FF000000, é uma cor representada no padrão RGBA, convertida para HEX.
Isso pode ser visto no navegador, pressionando F12, aba Elements.
O CÓDIGO HEXADECIMAL:
O código RGB é representado de 0 a 255.
Isso significa que é possível obter 255 tonalidades de azul, 255 de tonalidades de verde e 255 tonalidades de vermelho (255 e não 256, o zero não conta).
São 256 combinações, de 0 a 255 temos 256: 16×16
hex={0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F}
eval echo $hex$hex|wc -w
256
Assim como no sistema decimal, temos dez combinações, de 0 a 9.
Bem interessante: https://www.w3schools.com/colors/
______________________________________________________________________
Att.: Marcelo Oliver

[8] Comentário enviado por xerxeslins em 16/11/2020 - 08:21h

Que artigo! Favoritado.


--
"There are lots of Linux users who don't care how the kernel works, but only want to use it. That is a tribute to how good Linux is." - Linus Torvalds

[9] Comentário enviado por diegomrodrigues em 16/11/2020 - 08:58h

Belo artigo. Parabéns!

Abraço,
Diego M. Rodrigues

[10] Comentário enviado por maurixnovatrento em 16/11/2020 - 13:31h


[7] Comentário enviado por msoliver em 15/11/2020 - 20:28h

Muito bom o material, Mauricio.
Tenho algumas poucas ressalvas:
#FF000000 ou #F5F5F5. O primeiro exemplo é configurado usando 8 espaços hexadecimais e forma o preto.
#ff000000, é o vermelho com 0 de saturação, logo, a cor apresentada é a "branca"
#FF000000, é uma cor representada no padrão RGBA, convertida para HEX.
Isso pode ser visto no navegador, pressionando F12, aba Elements.
O CÓDIGO HEXADECIMAL:
O código RGB é representado de 0 a 255.
Isso significa que é possível obter 255 tonalidades de azul, 255 de tonalidades de verde e 255 tonalidades de vermelho (255 e não 256, o zero não conta).
São 256 combinações, de 0 a 255 temos 256: 16×16
hex={0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F}
eval echo $hex$hex|wc -w
256
Assim como no sistema decimal, temos dez combinações, de 0 a 9.
Bem interessante: https://www.w3schools.com/colors/
______________________________________________________________________
Att.: Marcelo Oliver



sim são 256 combinações, apenas desconsiderei a cor nula. Eu deveria ter considerado de fato. Vou revisar.

#FF000000 : Eu usava como preto no syslinux, e funcionava, vai entender.

[11] Comentário enviado por maurixnovatrento em 16/11/2020 - 13:36h


[8] Comentário enviado por xerxeslins em 16/11/2020 - 08:21h

Que artigo! Favoritado.


--
"There are lots of Linux users who don't care how the kernel works, but only want to use it. That is a tribute to how good Linux is." - Linus Torvalds



valeu.

[12] Comentário enviado por maurixnovatrento em 16/11/2020 - 13:37h


[9] Comentário enviado por diegomrodrigues em 16/11/2020 - 08:58h

Belo artigo. Parabéns!

Abraço,
Diego M. Rodrigues


valeu.

[13] Comentário enviado por ederlepaus em 17/11/2020 - 10:59h

Muito bom o conteúdo, sou do segmento de impressão e gostaria de entender mais sobre o assunto voltado para Linux, ajudou muito!
Nós da www.ducoprint.com.br, buscamos entender sempre o que é o melhor para o mercado de impressão.

[14] Comentário enviado por ruankennedy em 20/11/2020 - 11:38h

Cara acompanho esse mundo do Linux para criar um servidos para o meu site https://npximports.com.br porém é meio complicado ai uso a plataforma do mercado shops, andei estudando cores mais relevantes em HEX para o meu site porém o Mercado Shops não me permite altera-las. Depois vou pesquisar alguem que faça esse trabalho aqui no grupo.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts