En programación existen varias maneras de convertir colores de un formato a otro. Este ejercicio puede ser una ayuda para poder determinar cuáles son las especificaciones de distintos tipos de dato. RGB to HEX es una forma de realizar un cambio de color en valores Red Green Blue a un número hexadecimal.

Recientemente me encuentro ante una situación en la que obtengo valores de color en formato RGB. Es decir, para interpretar los colores necesito de un numero entero en un rango de 0-255 para cada uno de los colores rojo, verde y azul.

El caso es que en la mayoría de estas pantallas TFT, los colores se exigen en formato hexadecimal. Es por ello, que necesitaremos de una conversión a nivel de bit (binario), para identificar enteros con el formato hexadecimal.

TABLA DECIMAL-BINARIO-HEXAGECIMAL

Los tipos de dato en hexadecimal se expresan con un 0, seguido de una X y con 6 espacios, que pueden corresponderse a un dígito o a una letra hasta la F.

Por ejemplo, para expresar el negro, su hexadecimal correspondiente es 0x000000; y para el color blanco es 0xFFFFFF.

¿Qué pretende decirnos esto? Esto quiere decir que cada pareja de números es un valor de 0 a 255 para cada uno de los colores en RGB.

Por ejemplo, si escogemos FF, se puede deducir que en base hexadecimal es:

15*16 +15 = 255

 

Ahora, para traducir estos números enteros tenemos que realizar el siguiente procesado a nivel de bit.

 

Cada letra en hexadecimal se asigna a una cuaterna de bits, por lo que 0xFFFFFF será en binario 6 * 4 unos = 24 unos seguidos, como se puede ver en la tabla.

Una F es igual a 1111.

RGBColorHexBinNum
000Negro0x0000000000-0000-0000-0000-0000-00000
00255Azul0x0000FF0000-0000-0000-0000-1111-1111255
02550Verde0x00FF000000-0000-1111-1111-0000-000065280
0255255Azul Claro0x00FFFF0000-0000-1111-1111-1111-111165535
25500Rojo0xFF00001111-1111-0000-0000-0000-000016711680
2550255Morado0xFF00FF1111-1111-0000-0000-1111-111116711935
2552550Amarillo0xFFFF001111-1111-1111-1111-0000-000016776960
255255255Blanco0xFFFFFF1111-1111-1111-1111-1111-111116777215

 

Así que para hacer una traducción rápida y sencilla de estos números a hexadecimal se utiliza el operador desplazamiento hacia la izquierda.

Para programarlo, imaginemos que tenemos una variable color, con 3 parámetros R, G y B que indican un número entero de sus colores rojo, verde y azul por separado.

 

int color.R = 255; //Integer with red max value 255. 
//Binary value: 1111-1111
// If we wanna interpretate this number in hexadecimal

uint16_t color.hex = color.R <<  16;

//So the result is: 1111-1111-0000-0000-0000-0000

int color.G = 255; //Integer with red max value 255. Binary value: 1111-1111

uint16_t color.hex = color.G << 8;

//So the result is: 0000-0000-1111-1111-0000-0000

int color.B = 255; //Integer with red max value 255. Binary value: 1111-1111

//So the result is: 0000-0000-0000-0000-1111-1111

Y si la unimos con el operador OR inclusivo bit a bit, podemos obtener una operación en la que añadamos estos valores como suma de estos valores lógicos.

Para obtener el color en hexadecimal, hay que ejecutar solo esta función.


color.hexcolor = (color.R << 16)|(color.G << 8)|color.B;

En la siguiente tabla se puede observar los colores con sus códigos respectivos para identificarlos.

 

     rgb(255,255,255)  #FFFFFF         rgb(255,0,255)  #FF00FF   
     rgb(245,255,250)  #F5FFFA         rgb(238,130,238)  #EE82EE   
     rgb(240,255,255)  #F0FFFF         rgb(218,112,214)  #DA70D6   
     rgb(240,255,240)  #F0FFF0         rgb(186,85,211)  #BA55D3   
     rgb(224,255,255)  #E0FFFF         rgb(147,112,219)  #9370DB   
     rgb(240,248,255)  #F0F8FF         rgb(138,43,226)  #8A2BE2   
     rgb(245,245,245)  #F5F5F5         rgb(148,0,211)  #9400D3   
     rgb(248,248,255)  #F8F8FF         rgb(153,50,204)  #9932CC   
     rgb(255,255,240)  #FFFFF0         rgb(139,0,139)  #8B008B   
     rgb(255,250,250)  #FFFAFA         rgb(128,0,128)  #800080   
     rgb(255,250,240)  #FFFAF0         rgb(75,0,130)  #4B0082   
     rgb(255,245,238)  #FFF5EE         rgb(72,61,139)  #483D8B   
     rgb(253,245,230)  #FDF5E6         rgb(106,90,205)  #6A5ACD   
     rgb(255,240,245)  #FFF0F5         rgb(123,104,238)  #7B68EE   
     rgb(250,240,230)  #FAF0E6         rgb(152,251,152)  #98FB98   
     rgb(250,235,215)  #FAEBD7         rgb(173,255,47)  #ADFF2F   
     rgb(255,228,225)  #FFE4E1         rgb(127,255,0)  #7FFF00   
     rgb(255,192,203)  #FFC0CB         rgb(124,252,0)  #7CFC00   
     rgb(255,182,193)  #FFB6C1         rgb(0,255,0)  #00FF00   
     rgb(255,105,180)  #FF69B4         rgb(0,255,127)  #00FF7F   
     rgb(255,20,147)  #FF1493         rgb(0,250,154)  #00FA9A   
     rgb(219,112,147)  #DB7093         rgb(144,238,144)  #90EE90   
     rgb(188,143,143)  #BC8F8F         rgb(50,205,50)  #32CD32   
     rgb(199,21,133)  #C71585         rgb(60,179,113)  #3CB371   
     rgb(205,92,92)  #CD5C5C         rgb(46,139,87)  #2E8B57   
     rgb(240,128,128)  #F08080         rgb(34,139,34)  #228B22   
     rgb(255,160,122)  #FFA07A         rgb(0,128,0)  #008000   
     rgb(250,128,114)  #FA8072         rgb(0,100,0)  #006400   
     rgb(233,150,122)  #E9967A         rgb(154,205,50)  #9ACD32   
     rgb(220,20,60)  #DC143C         rgb(107,142,35)  #6B8E23   
     rgb(255,248,220)  #FFF8DC         rgb(128,128,0)  #808000   
     rgb(255,235,205)  #FFEBCD         rgb(85,107,47)  #556B2F   
     rgb(255,228,196)  #FFE4C4         rgb(143,188,143)  #8FBC8F   
     rgb(255,222,173)  #FFDEAD         rgb(102,205,170)  #66CDAA   
     rgb(245,222,179)  #F5DEB3         rgb(32,178,170)  #20B2AA   
     rgb(222,184,135)  #DEB887         rgb(0,139,139)  #008B8B   
     rgb(210,180,140)  #D2B48C         rgb(0,128,128)  #008080   
     rgb(189,183,107)  #BDB76B         rgb(0,255,255)  #00FFFF   
     rgb(218,165,32)  #DAA520         rgb(127,255,212)  #7FFFD4   
     rgb(184,134,11)  #B8860B         rgb(175,238,238)  #AFEEEE   
     rgb(205,133,63)  #CD853F         rgb(64,224,208)  #40E0D0   
     rgb(210,105,30)  #D2691E         rgb(72,209,204)  #48D1CC   
     rgb(160,82,45)  #A0522D         rgb(0,206,209)  #00CED1   
     rgb(165,42,42)  #A52A2A         rgb(95,158,160)  #5F9EA0   
     rgb(178,34,34)  #B22222         rgb(70,130,180)  #4682B4   
     rgb(139,69,19)  #8B4513         rgb(176,196,222)  #B0C4DE   
     rgb(139,0,0)  #8B0000         rgb(176,224,230)  #B0E0E6   
     rgb(128,0,0)  #800000         rgb(173,216,230)  #ADD8E6   
     rgb(250,164,96)  #FAA460         rgb(135,206,235)  #87CEEB   
     rgb(255,127,80)  #FF7F50         rgb(135,206,250)  #87CEFA   
     rgb(255,99,71)  #FF6347         rgb(0,191,255)  #00BFFF   
     rgb(255,0,0)  #FF0000         rgb(30,144,255)  #1E90FF   
     rgb(255,69,0)  #FF4500         rgb(100,149,237)  #6495ED   
     rgb(255,140,0)  #FF8C00         rgb(65,105,225)  #4169E1   
     rgb(255,165,0)  #FFA500         rgb(0,0,255)  #0000FF   
     rgb(255,215,0)  #FFD700         rgb(0,0,205)  #0000CD   
     rgb(255,255,0)  #FFFF00         rgb(0,0,139)  #00008B   
     rgb(255,255,224)  #FFFFE0         rgb(0,0,128)  #000080   
     rgb(255,250,205)  #FFFACD         rgb(25,25,112)  #191970   
     rgb(250,250,210)  #FAFAD2         rgb(220,220,220)  #DCDCDC   
     rgb(245,245,220)  #F5F5DC         rgb(211,211,211)  #D3D3D3   
     rgb(255,239,213)  #FFEFD5         rgb(192,192,192)  #C0C0C0   
     rgb(255,228,181)  #FFE4B5         rgb(169,169,169)  #A9A9A9   
     rgb(255,218,185)  #FFDAB9         rgb(119,136,153)  #778899   
     rgb(238,232,170)  #EEE8AA         rgb(112,128,144)  #708090   
     rgb(240,230,140)  #F0E68C         rgb(128,128,128)  #808080   
     rgb(230,230,250)  #E6E6FA         rgb(105,105,105)  #696969   
     rgb(216,191,216)  #D8BFD8         rgb(47,79,79)  #2F4F4F   
     rgb(221,160,221)  #DDA0DD         rgb(0,0,0)  #000000