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. zZNinjaZz is lovely. 'Might marry him someday.
User avatar
ZZNinjaZZ
Recruit
 
Posts: 20
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
Moderator
 
Posts: 863
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: 6
Joined: 5 March 2017, 06:48

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

Postby Resi » 1 May 2019, 12:31

I'd still take the color chart. I can see it without editing the background that way.
phsc wrote:WHY ARE YOU GUYS TALKING ABOUT REALISM IN A FUTURISTIC 2D FLASH SCROLL SHOOTER THAT HAS ALIENS AND UNREALISTIC UNHOLDABLE GUNS AND REGENERATION AND MANY OTHER THINGS, LOSTMYDOLLAR/JASON EDEN PLEASE UNDERSTAND THIS IS NOT A REALISTIC GAME AND STOP TRYING TO TURN IT INTO ONE BECAUSE IT WONT
User avatar
Resi
Lite Marine [800]
 
Posts: 890
Joined: 16 July 2013, 00:47
Location: Venezuela


Return to Tutorials

Who is online

Users browsing this forum: No registered users