FACEBOOK @1NDICANET
Continuar lendo
Entenda como funciona o código de cores RGB
Em muitas áreas de aplicação nós precisamos trabalhar com cores, mesmo que não seja programando, por exemplo, configurar a cor de um site ou editar uma imagem com o Photoshop, o Corel draw, paint, etc. Geralmente essas cores são representadas por um código de 6 caracteres hexadecimais (de 0 a F) precedido do caracter “#”, por exemplo: ‘#68B46D’.
Dado um código, você sabe descobrir que cor é essa? E o contrário? Dada uma cor, você sabe descobrir o código? Neste artigo vou explicar como funciona esse código e, de forma simples, como descobrir o código de uma cor e vice-versa.
COMO AS CORES SÃO FORMADAS?
Existem duas maneiras de se formar cor, uma é através de pigmentação e outra é através da luz. A primeira é muito utilizada em artes plásticas, onde se mistura cores para formar uma outra. Mas a forma utilizada na tecnologia é a formação por luz.
Na formação de cores por luz, as cores são formadas a partir de três cores primarias. As três cores primárias mais conhecidas são: Vermelho, Verde e Azul, ou RGB (do inglês, Red-Green-Blue). A partir delas pode-se criar as demais cores.
As cores são criadas na computação com a combinação de valores de RGB. Cada uma dessas cores primárias recebe um valor de intensidade que varia de 0 a 255. O branco é quando se tem o maior valor para as 3 cores, ou seja, 255 e o preto é formado quando se tem o valor 0 para essas 3 cores.
A FORMAÇÃO DO CÓDIGO RGB
Um código RGB é uma representação dos valores das cores primárias juntas, só que em Hexadecimal. Podemos perceber que os códigos 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 valores de 0 a 255 da base decimal.
Pensemos, se branco é formado com a combinação dos maiores valores, o código RGB do branco é: #FFFFFF. O preto seria #000000. Certo? Agora olhando pra figura apresentada acima que mostra a combinação de cores primárias para formar outras cores, como seria a representação da cor amarela em código RGB?
Bom, percebemos que o amarelo é formado com a combinação do Verde e do Vermelho. Então o código RGB do amarelo é #FFFF00. Ou seja, valores máximos para R (Red) e G (Green) e 0 para o B (Blue).
Deu pra entender né…
COMO DESCOBRIR A COR DE UM CÓDIGO RGB
Existem vários sites que fazem isso. Mas pra facilitar a sua vida eu implementei aqui neste artigo um campo pra você ver a cor de um código. Basta digitar o código no campo abaixo. Por exemplo #2C76D0.
Digite o código RGB aqui –>
COMO DESCOBRIR O CÓDIGO DE UMA COR
Agora que você já entendeu o conceito do código RGB, fica fácil descobrir o código de uma cor. Você pode usar o próprio paint do windows pra isso. Vou descrever quais os passos para descobrir o código RGB de uma cor a partir do seu computador.
- Coloque a cor visível na tela do seu computador e pressione a tecla PRINT SCREEN. (Pra copiar a tela do seu computador)
- Abra o paint e pressione Ctrl+V pra colar a imagem da sua tela.
- Clique na ferramenta Selecionador de cores do paint. (É esse ícone: )
- Clique em cima da cor que deseja identificar.
- Clique no botão Editar cores. (É esse ícone: )
- Identifique os valores de Vermelho, Verde e Azul. Conforme apresentado na tela abaixo.
Esses números estão na base decimal. Pra gerar o código RGB é necessário convertê-los para a baseHexadecimal.
Pra facilitar a sua vida, eu também implementei neste artigo três campos pra você digitar os números em decimal e obter o código RGB da cor.
R = G = B =
Código RGB: #1b8b3d
CURIOSIDADE SOBRE O CÓDIGO RGB
Agora você já sabe que o código #FFFFFF é a cor branca e o código #000000 é a cor preta. Uma curiosidade sobre o código RGB é que quando os valores são iguais para as três cores primárias, nós temos cores em escala de cinza. Por exemplo, o código #5A5A5A é um cinza escuro, pois está próximo do preto #000000. Já o código #B7B7B7 é um cinza mais claro, pois está mais próximo do branco #FFFFFF.
Espero que tenha gostado dessa dica. Entender como é formado o código RGB é importante para fazer muitas coisas, principalmente se você trabalhar com desenvolvimento Web.
Tabela de Cores
Você está em: Tabela de Cores
Nome | Amostra | Hexadecimal |
---|---|---|
Água | #00FFFF | |
Água-marinha média | #66CDAA | |
Alizarina | #E32636 | |
Amarelo esverdeado | #ADFF2F | |
Amarelo queimado | #EEAD2D | |
Âmbar | #FFBF00 | |
Ameixa | #DDA0DD | |
Ametista | #9966CC | |
Aspargo | #7BA05B | |
Azul | #0000FF | |
Azul ardósia | #6A5ACD | |
Azul ardósia claro | #8470FF | |
Azul ardósia escuro | #483D8B | |
Azul ardósia médio | #7B68EE | |
Azul areado | #B8CAD4 | |
Azul aço | #4682B4 | |
Azul aço claro | #B0C4DE | |
Azul cadete | #5F9EA0 | |
Azul camarada | #054F77 | |
Azul celeste brilhante | #007FFF | |
Azul claro | #ADD8E6 | |
Azul cobalto | #0047AB | |
Azul céu | #87CEEB | |
Azul céu claro | #87CEFA | |
Azul céu profundo | #00BFFF | |
Azul escuro | #00008B | |
Azul flor de milho | #6495ED | |
Azul força aérea | #5D8AA8 | |
Azul furtivo | #1E90FF | |
Azul manteiga | #a6aa3e | |
Azul marinho | #120A8F | |
Azul meia-noite | #191970 | |
Azul médio | #0000CD | |
Azul petróleo | #084D6E | |
Azul real | #4169E1 | |
Azul taparuere | #248EFF | |
Azul violeta | #8A2BE2 | |
Açafrão | #F4C430 | |
Bordô | #800000 | |
Borgonha | #900020 | |
Bronze | #CD7F32 | |
Caramelo | #8B5742 | |
Cardo | #D8BFD8 | |
Carmesim | #DC143C | |
Carmim | #712F26 | |
Castanho avermelhado | #8B0000 | |
Castanho claro | #D2B48C | |
Cenoura | #ED9121 | |
Cereja | #DE3163 | |
Cereja Hollywood | #F400A1 | |
Chocolate | #D2691E | |
Ciano | #00FFFF | |
Ciano escuro | #008B8B | |
Cinza | #808080 | |
Cinza ardósia | #708090 | |
Cinza ardósia claro | #778899 | |
Cinza ardósia escuro | #2F4F4F | |
Cinza escuro | #A9A9A9 | |
Cinza fosco | #696969 | |
Cobre | #B87333 | |
Coral | #FF7F50 | |
Coral claro | #F08080 | |
Couro | #F0DC82 | |
Caqui escuro | #BDB76B | |
Dainise | #778899 | |
Dourado | #DAA520 | |
Dourado escuro | #B8860B | |
Escarlate | #FF2400 | |
Esmeralda | #50C878 | |
Feldspato | #D19275 | |
Ferrugem | #B7410E | |
Fuligem | #3D2B1F | |
Fúchsia | #FF00FF | |
Grená | #831D1C | |
Herbal | #2E8B57 | |
Índigo | #4B0082 | |
Jade | #00A86B | |
Jambo | #FF4500 | |
Jabuti preto | #000000 | |
Laranja | #FFA500 | |
Laranja escuro | #FF8C00 | |
Lilás | #C8A2C8 | |
Limão (cor) | #00FF00 | |
Madeira | #DEB887 | |
Magenta | #FF00FF | |
Magenta escuro | #8B008B | |
Malva | #E0B0FF | |
Marrom | #964b00 | |
Marrom amarelado | #F4A460 | |
Marrom claro | #A52A2A | |
Marrom rosado | #BC8F8F | |
Marrom sela | #8B4513 | |
Naval | #000080 | |
Ocre | #CC7722 | |
Oliva | #808000 | |
Oliva escura | #556B2F | |
Oliva parda | #6B8E23 | |
Orquídea | #DA70D6 | |
Orquídea escura | #9932CC | |
Orquídea média | #BA55D3 | |
Ouro | #FFD700 | |
Pele | #CD853F | |
Prata | #C0C0C0 | |
Preto | #000000 | |
Púrpura | #800080 | |
Púrpura média | #9370DB | |
Quantum | #111111 | |
Rosa | #FFCBDB | |
Rosa brilhante | #FF007F | |
Rosa chocante | #FC0FC0 | |
Rosa claro | #FFB6C1 | |
Rosa forte | #FF69B4 | |
Rosa profundo | #FF1493 | |
Roxo | #993399 | |
Rútilo | #6D351A | |
Salmão | #FA7F72 | |
Salmão claro | #FFA07A | |
Salmão escuro | #E9967A | |
Siena | #FF8247 | |
Sépia | #705714 | |
Terracota | #E2725B | |
Tijolo refratário | #B22222 | |
Tomate | #FF6347 | |
Triássico | #FF2401 | |
Turquesa | #40E0D0 | |
Turquesa escura | #00CED1 | |
Turquesa média | #48D1CC | |
Urucum | #EC2300 | |
Verde | #008000 | |
Verde espectro | #00FF00 | |
Verde amarelado | #9ACD32 | |
Verde claro | #90EE90 | |
Verde escuro | #006400 | |
Verde floresta | #228B22 | |
Verde lima | #32CD32 | |
Verde grama | #7CFC00 | |
Verde mar claro | #20B2AA | |
Verde mar escuro | #8FBC8F | |
Verde mar médio | #3CB371 | |
Verde militar | #78866B | |
Verde Paris | #7FFF00 | |
Verde primavera | #00FF7F | |
Verde primavera médio | #00FA9A | |
Verde pálido | #98FB98 | |
Verde-azulado | #008080 | |
Vermelho | #FF0000 | |
Vermelho escuro | #8B0000 | |
Vermelho indiano | #CD5C5C | |
Vermelho violeta | #D02090 | |
Vermelho violeta médio | #C71585 | |
Vermelho violeta pálido | #DB7093 | |
Violeta | #EE82EE | |
Violeta escuro | #9400D3 |