Understanding Hex Color codes (No need for charts!)

Tutorials and guides for Plazma Burst and community features.

Understanding Hex Color codes (No need for charts!)

Postby ZZNinjaZZ » 23 April 2019, 10:57

Let's all admit that we used a Hex color code chart.

But I hope that you won't need one anymore after this tutorial.


Hex Color codes are composed of 6 digits. Divide them by 2 and you'll get 3 sections. This 3 Sections are Red(#ff0000, Green(#00ff00) and Blue(0000ff). (RGB) These are the primary colors that mix up to create the desired color. As you notice, the hex color code of each color has 2 F's on a single section which is why it is a solid color. (Let's say Solid colors are colors without the mix of any colors from outside sections)

# (ff)- Section 1, (00)- Section 2, (00)- Section 3 (this is #ff0000)



Now, let's talk about Light and Darkness.
Darkness isn't a color but a state where there is less or the absence of visible light. That's why pure black is #000000 while as pure white is #ffffff

Now, let's use Red for an example. Red's Hex color code is #ff0000. Since we're going to make it lighter, we'll add a 1 equally on the other outside sections which would become #ff1010. You could use either side. #ff1010 and #ff0101 are the same.

The hierarchy of the intensity digits (from lowest to highest) is: 0123456789ABCDEF
That's why black is composed of 0's and white is composed of F's.
I used to be a map maker like you, then I took an arrow> to the knee.
Spoiler: Show More
Eric Gurt wrote: Well, I had to say. zZNinjaZz made the best aesthetic designs I have never seen before. Ninja is lovely. 'Might marry him someday.
User avatar
ZZNinjaZZ
Recruit
 
Posts: 22
Joined: 19 September 2014, 02:39
Location: PH

Re: Understanding Hex Color codes (No need for charts!)

Postby darkstar 1 » 1 May 2019, 07:39

Note that the first digit in the section is always multiplied with 16 and the second one with 1 to get the final r,g or b value. So if you want to rise the r, g or b value with 1, you want to do that in the second part of the section until you reach f, after which you want to add 1 to the first part and start over again from 0 at the second part.

Also, even when knowing the theory behind it, wouldn't it still be easier/faster to use charts/color pickers?



User avatar
darkstar 1
Proxy [700]
 
Posts: 712
Joined: 13 September 2014, 13:20
Location: Here... or there :|

Re: Understanding Hex Color codes (No need for charts!)

Postby android kit-kat » 1 May 2019, 10:16

Thanks for the insights both of ya, for me it is useful for shading. But for more precise color picking, hex color chart is a better viable option.
"Freedom of expression is the idea that you can voice what you want, or say what you want. It does not necessarily mean that people are forced to listen to you."
User avatar
android kit-kat
Recruit
 
Posts: 9
Joined: 5 March 2017, 06:48

Re: Understanding Hex Color codes (No need for charts!)

Postby ZZNinjaZZ » 4 June 2019, 12:27

darkstar 1 wrote:Note that the first digit in the section is always multiplied with 16 and the second one with 1 to get the final r,g or b value. So if you want to rise the r, g or b value with 1, you want to do that in the second part of the section until you reach f, after which you want to add 1 to the first part and start over again from 0 at the second part.

Also, even when knowing the theory behind it, wouldn't it still be easier/faster to use charts/color pickers?



Well, I do admit that I still use color charts despite knowing the theory behind the codes, but the knowledge might be useful someday for some people even outside PB2 :P
I used to be a map maker like you, then I took an arrow> to the knee.
Spoiler: Show More
Eric Gurt wrote: Well, I had to say. zZNinjaZz made the best aesthetic designs I have never seen before. Ninja is lovely. 'Might marry him someday.
User avatar
ZZNinjaZZ
Recruit
 
Posts: 22
Joined: 19 September 2014, 02:39
Location: PH

Re: Understanding Hex Color codes (No need for charts!)

Postby boom5 » 16 July 2019, 07:31

Great Information. I will remember this.
“Guard with jealous attention the public liberty. Suspect everyone who approaches that jewel. Unfortunately, nothing will preserve it but downright force. Whenever you give up that force, you are inevitably ruined.” - Patrick Henry
User avatar
boom5
Usurpation Soldier [50]
 
Posts: 97
Joined: 11 August 2014, 17:09


Return to Tutorials

Who is online

Users browsing this forum: No registered users



cron