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 |
