Convertendo cores RGB para Hex

[DevWithCoffee]

Faz tempo que não posto nenhuma tutorial, o intuito dessa é igual a maioria que alguma vez postei, usar ferramentas simples que não exija instalar vários softwares, extensões ou disponibilizar de dinheiro para ter alguma ferramenta.

Cores em formato tem finalidade de serem usadas em códigos para diferentes plataformas, inclusive Web, porém quando estamos começando é difícil dispor de ferramentas que ajudem.

Para explicar melhor vou usar o exemplo mais básico que conheço, que é normalmente pegar as cores de um logo para usa-las no layout do mesmo trabalho.
Você precisará apenas abrir a imagem, sendo permitido apenas para os seguintes formatos, BMP, PNG, JPG, GIF, TIF e DIB, para os demais será necessário fazer um "PrintScreen" e colar diretamente no MSPaint (Paint do Windows).


Vamos pegar de exemplo este:

Spoiler

( https://servimg.com/view/20244785/26 )​

Após abrir se a imagem for muito pequena de o máximo de zoom necessário pra que facilite, então selecione a ferramenta Selecionador de Cores (Pick Color):

( https://servimg.com/view/20244785/20 )

Veja que o cursor vai mudar de ícone, agora mova o cursor do mouse pra cima da imagem na posição da cor que você precisa, em seguida clique com o botão de confirmação do mouse ( Geralmente o esquerdo ):

( https://servimg.com/view/20244785/22 )

Veja que a Cor 1 mudou mostrando exatamente a cor que você clicou.
Então agora clique sobre o Editor de Cores:

( https://servimg.com/view/20244785/21 )

Vai aparecer uma janela para editar as cores, a única coisa que você vai fazer é pegar os valores NUMÉRICOS da cor já selecionada:

( https://servimg.com/view/20244785/24 )

Sendo nesta ordem os campos Vermelho (Red), Verde (Green) e Azul (Blue), então você poderá usar qualquer sites ( Inclusive o Google ) pra poder converter a cor pra HEX, mas eu sugiro usar este RGB to HEX, então seguindo a mesma ordem basta digitar manualmente os valores nos campos conforme o exemplo:

( https://servimg.com/view/20244785/23 )

Veja o resultado após clicar no botão para converter:

( https://servimg.com/view/20244785/25 )

 

[Dr.XGB]

Me lembro que eu precisei converter RGB para HEX e vice-versa em um Editor de Paletas que desenvolvi com Destiny para o RPG Maker 2000.
Legal que dessa forma vc não depende de instalar nada. Ás vezes vc está desenvolvendo em uma outra máquina e precisa da solução rápida ou também você tem as informações do RGB mas gostaria de converter para HEX.
O que eu uso aqui é o Pixie, que ele captura a cor do pixel da tela de acordo com o ponteiro do mouse. Ele mostra a cor tanto em HEX, HTML, RGB, CMYK e HSV.

Ou também podemos fazer uma continha pra converter RGB para HEX:

C = (r << 16) + (g << 8) + b

E depois converta o valor para Hexadecimal (hoje em dia a calculadora do Windows faz isso).

Dados os valores no seu exemplo:

r = 69
g = 150
b = 209

C = (69 << 16) + (150 << 8) + 209
C = 4560593 // 0x4596D1

 

[Alkemarra]

Duas formas bacanas de se conseguir o código, de fato.
Como eu uso o PS não sofro muito com isso.
Mas é uma saída show em casos de se estar numa máquina mais "limitada".

 

[Coralium]

Wooo, muito bom!

Quando eu usava paint pra pixel art sentia falta dos códigos...que dica legal! Muito útil <3

Obrigadaaa