1. I've started a massive SPAM purge, any accounts that have spammed are being removed, also for a short period new user signups are disallowed until the SPAM cleaning is finished.

[Tutorial] Hex colors

Discussion in 'Graphics and Design' started by jamey, Dec 20, 2008.

  1. jamey

    jamey New Member

    Joined:
    Sep 5, 2008
    Messages:
    208
    Likes Received:
    2
    Trophy Points:
    0
    Since this is the design section I want to make a short tutorial about Hex colors. Most of you might know about hex but I am sure some don't and this is a great way to find out more on this subject. Just follow this easy tutorial and you'll be the one doing the hexes :p .

    Hex is an abbreviation for Hexadecimal and it has to do with the number system. Decimal for example has a base of 10 ( from 0 to 9) whereas hexadecimal has a base of 16 (from 0 to F)

    To give a short example to see how these two number systems translate from one to another
    (the example below is read like this: the number on line one (base 10) has a corresponding number in base 16 right below it.)

    0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
    0 1 2 3 4 5 6 7 8 9 A B C D E F

    and this goes on. To do a quick base transformation you can use the scientific calculator from windows. Now you know why colors like #15F3AD or #7FAE12 are called HEX colors.

    But to understand why a color has that form you must first understand that a monitor displays the light as 3 separate primary beam of lights. These hit the screen at the same time and combined they give the color you see on each pixel on your screen. Unless you have a crystal display screen this is how things work.

    The three primary colors that each color is composed of are RED, GREEN and BLUE. Each color can be a sum of those three, thus resulting the RGB format. Each color is represented from 00 to FF (from the weakest color to the strongest)

    If you want to get the color yellow for example you need to combine the color green with the color red. RGB -> FF FF 00 this means #FFFF00 . This means the pixel has high intensity red and high intensity green which combined result in yellow.

    Now that you are somehow more familiar with this system you should be able to manually modify a color to make it lighter or darker or give it a specific shade.
    Loading...
  2. Mr Justin

    Mr Justin <B>Moderator</b>

    Joined:
    Sep 17, 2008
    Messages:
    486
    Likes Received:
    1
    Trophy Points:
    0
    Great tutorial jamey.
  3. Sofia22

    Sofia22 New Member

    Joined:
    Jun 19, 2009
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    Hey!!
    Great explanation. I studied the numerational systems, (binary, octal, and hex)
    and we had to make fast operations with hex numbers. Is nice that somebody explains the reason of the colors code.
    Thank you.
  4. Dragonizer

    Dragonizer Member

    Joined:
    Mar 6, 2009
    Messages:
    162
    Likes Received:
    0
    Trophy Points:
    16
    Great explanation and thanks for the info but its alot easier to get a colour picker, like this one:
    Absolute Color Picker off my freeware site.

Share This Page