Support Understanding Hex and RGB Values

Discussion in 'Technology' started by Amaury, Dec 26, 2013.

  1. Amaury Chaser

    Joined:
    Jan 15, 2007
    Gender:
    Male
    Location:
    Ellensburg, WA
    1,694
    I've been making and working on styles since KH-Flare started on vBulletin 4.1.4 on August 30, 2011 (I joined shortly after on September 10, 2011).

    Currently, I've really only been working on XenForo styling (still learning more stuff) because KH-Flare is going to make the move to XenForo on January 1, 2014. However, to this day I still don't understand how the hex and RGB codes that are used to style sites work.

    For example, this orange shade is #FF9900 or RGB: 255, 153, 0.

    What I noticed, though, is that RGB values go no higher than 255 and hex values can be numbers and letters, but go no higher than the number nine and the letter F.

    Basically, how do the letters and numbers determine the color you get and, vice-versa, how does the color determine what hex or RGB values you get?
     
  2. Guardian Soul hella sad & hella rad

    Joined:
    Jul 26, 2007
    Gender:
    Male
    794
    In the case of RGB, each number represents a value that designates how much of that color, red, green and blue respectively, is in the mixture. So 0,0,0 is black because there are no colors and the absence of color is black while 255,255,255 is white because all the primary colors combined make white. Hex does the same exact thing, the only difference being that it represents the values in hexadecimal while normal RGB uses base 10. Each pair of numbers in hex is just another way of representing the RGB values. 000000 when divided into three pairs of two (00,00,00) is hexadecimal for 0,0,0 while FFFFFF (FF,FF,FF) is how you represent 255,255,255 in hexadecimal.
     
    Last edited: Dec 26, 2013
  3. libregkd -

    Joined:
    Sep 30, 2006
    2,902
    ...
     
  4. Amaury Chaser

    Joined:
    Jan 15, 2007
    Gender:
    Male
    Location:
    Ellensburg, WA
    1,694
  5. libregkd -

    Joined:
    Sep 30, 2006
    2,902
    ...
     
  6. Amaury Chaser

    Joined:
    Jan 15, 2007
    Gender:
    Male
    Location:
    Ellensburg, WA
    1,694
  7. Amaury Chaser

    Joined:
    Jan 15, 2007
    Gender:
    Male
    Location:
    Ellensburg, WA
    1,694
    @Ataraxia, @libregkd

    How come sometimes only partial hex codes are used? For example, #FFF instead of #FFFFFF. A more complicated example would be #F88, which is a shade of red.
     
  8. Guardian Soul hella sad & hella rad

    Joined:
    Jul 26, 2007
    Gender:
    Male
    794
    Any hexadecimal code that are couples of the same number can be shortened. So #FFFFFF can be shortened to #FFF and #0033BB can be shortened to #03B where instead of having a two digit hexadecimal value for each RGB value, you have one digit. These shorthand versions are usually used along with a few other methods to optimize sites and save memory. The downside is that you have less colors to work with overall, 4,096, instead of the 16,777,216 colors available if you were to use the full byte. But 4,096 is already a lot to work with so most people don't mind.
     
  9. Amaury Chaser

    Joined:
    Jan 15, 2007
    Gender:
    Male
    Location:
    Ellensburg, WA
    1,694
    Thanks! :)

    So in my complicated example, #F88 would be #F88888?
     
  10. Guardian Soul hella sad & hella rad

    Joined:
    Jul 26, 2007
    Gender:
    Male
    794
    No, it'd be #FF8888.
     
  11. Amaury Chaser

    Joined:
    Jan 15, 2007
    Gender:
    Male
    Location:
    Ellensburg, WA
    1,694
    Whoops. Thanks!

    So since it's two Fs and four eights, couldn't it be #F8 or can it go no lower than three hex numbers?
     
  12. Guardian Soul hella sad & hella rad

    Joined:
    Jul 26, 2007
    Gender:
    Male
    794
    No, it can't be shortened any further than that because then the blue channel wouldn't have a value and would result in a completely different color. I'm not even sure if #F8 can be used.