How to Convert RGB to Hex

So you know the RGB values of a pixel. This may sound very unimpressive but this may also be the color of an entire font (characters) or a background. In order to use the same color on your website it is advisable to convert the RGB value to its hexadecimal value. Suppose we found out that the color of a steel blueish font is RGB (38,122,169). What would be its hexadecimal value?

Steps

  1. Image titled Convert RGB to Hex Step 1
    1
    On your windows computer press start, choose 'Accessories’ and then ‘Calculator'. A calculator will now appear on your screen.
  2. Image titled Convert RGB to Hex Step 2
    2
    On this calculator window select 'View' and check 'Scientific' or 'Programmer'. If you have never changed its default value of 'standard' the calculator will now look bigger than it was before.
  3. Image titled Convert RGB to Hex Step 3
    3
    We will now use RGB(38,122,169) as an example.
  4. Image titled Convert RGB to Hex Step 4
    4
    Enter the first number, 38.
  5. Image titled Convert RGB to Hex Step 5
    5
    On the left hand side select the radio button 'Hex'.
  6. Image titled Convert RGB to Hex Step 6
    6
    By doing so the number 38 will change to 26. Jot it down.
  7. Image titled Convert RGB to Hex Step 7
    7
    Select the radio button 'Dec'. The number 38 will reappear.
  8. Image titled Convert RGB to Hex Step 8
    8
    Clear the number (by pressing the right hand button 'C'), and make sure that the radio button is on 'Dec'.
  9. Image titled Convert RGB to Hex Step 9
    9
    Repeat steps 5 to 8 for the second number, 122. This will turn out to be 7A.
  10. Image titled Convert RGB to Hex Step 10
    10
    Repeat the same steps for the third and last number, 169. This will be turn out to be A9.
  11. Image titled Convert RGB to Hex Step 11
    11
    When one of the numbers jotted down is only one digit long (as opposed to two in our example) then make it two digits long by putting a zero in front. E.g. 11 would convert to B, and you should change this into 0B.
  12. Image titled Convert RGB to Hex Step 12
    12
    Concatenate the three numbers of two digits each, in their right order. We jotted down 26, 7A and A9, so the concatenated value is 267AA9. Add the symbol '#' in front of the result. The hexadecimal color code is now #267AA9.
  13. Image titled Convert RGB to Hex Step 13
    13
    If it is important check the result in a website that creates the color entered. (Full codes only).

Tips

  • Understand that you merely converted three decimal numbers to its hexadecimal counterpart and concatenated them in their right order.
  • There are plenty of websites and programs that can do this conversion for you. The claim to fame of this article is that you understand a little bit how these are working.
  • Understand that using the built in calculator is only one of the many ways you can convert a decimal number to its hexadecimal counterpart.
  • By messing with the first digits of the tree numbers you will get an entirely different color. By messing with the last digits you might not be able to see the difference.
  • Sometimes the RGB values are given in percentages. E.g RGB(15%,48%,66%). They mean percentage of the maximal possible value of 255. So 15% would be 15*255/100 = 38.25 which can and should be rounded to 38.
  • When all of the three separate hexadecimal numbers are in the list 00, 33, 66, 99, CC, FF you have a so called 'websafe' color. There are only 216 of these but they will generally get the job done.
    • For web-safe colors you can use shorthand, using only 3 digits. E.g. #336699 = #369.
  • Some colors are more famous than others. When your color has a html-name (only a tiny fraction of the 16,777,216 possible colors) you will discover this soon enough when you submit the hexcode to google.
  • When you are used to mixing paints or inks this color system may not make sense to you. E.g. you may expect to make brown (or at least some darker color) by choosing #FFFF00, the brightest possible red combined with the brightest possible green. But you get... bright yellow!
    • This is because it has nothing to do with inks or paints. Picture it as shining a red and a green flash light, properly adjusted, on a white paper in a dark room. The paper will now appear yellow.

Article Info

Categories: Internet