Welcome to Gaia! :: View User's Journal | Gaia Journals

You can either read this entry, or you can go to this site and experiment:

http://www.yvg.com/twrs/RGBConverter.html

What the Heck Is This Entry For?
Hello! This is my personal seminar (not really) about Html color codes. Many people like to personalize their post by using the colors provided in the font tool bar. like_this! But did you ever wonder if there were a color inbetween Indigo and violet? Or how about a reddish purple? Or a blueish purple? With the use of hexidecimal color codes (things that look like this: #FF00F8 or #500050), you can better personalize anything that uses color, especially font. This is my favorite colored font right here! It is not indigo. And it isn't black.

For Visual Learners: You may want to use this site along the way to experiment or better see what we're talking about here.

http://www.yvg.com/twrs/RGBConverter.html

We will talk alot about RGB...
RGB is the color system used to define 256 colors in programs like Window's Paint. It stands for RedGreen and Blue. Like light, Window and html colors are defined by reds, greens, and blues instead of reds, yellows, and blues. Each section of RGB ranges from 0-255. Maybe it would be better to show you...

Take the color Red.
The RGB code for red is: R=255 G=0 B=0
That is: Red is 255 while green and blue are 0.
Red is the most it can be while green and blue are nonexistent. That produces this color.
Enter the values here for visual representation: http://www.yvg.com/twrs/RGBConverter.html
If you have paint and can edit colors, you may want to try it. It works the same for Green and Blue.
Green: R=0 G=255 B=0
Blue: R=0 G=0 B=255

Yellow is made from Red and Green, by combining their RGB's.
Red: R=255 G=0 B=0
Green: R=0 G=255 B=0
Yellow: R=255 G=255 B=0
The other two combination colors are actually a Fuschia and a Light Blue.
Visual Representation: http://www.yvg.com/twrs/RGBConverter.html

The darkness and lightness of a color can be controled through the numbers 0-255. The higher the numbers, the lighter the colors. The lower the numbers, the darker the colors.
Take Red again: R=255 G=0 B=0
We want to make red darker, but there's no way to lower G or B from 0. We can always lower R from 255.
With this code: R=128 G=0 B=0, where red is halved, I will create the color you see as dark red.
Voila
Now we want to make red lighter, but we can't raise R from 255. We can raise G &B.
With this code: R=255 G=128 B=128 , I will make pink....
Voila
Visual Representation: http://www.yvg.com/twrs/RGBConverter.html

With the range of 0-255 inbetween R, G, B I can mix colors. This is how to make greenish blue instead of light blue.
When we mix green and blue, we get lightblue.
Green: R=0 G=255 B=0
Blue: r=0 G=0 B=255
Light Blue: R=0 G=255 B=255
We can't make it more green, but we can make it less blue.
Greenish Blue: R=0 G=255 B=178
Visual Representation: http://www.yvg.com/twrs/RGBConverter.html

Careful! Colors tend to gray when RGB's get close to each other.
Take gray.
If you try to make dark pink out of pink R=255 G=128 B=128, you lower R right? Well, be careful. Once R gets to 128, the color is no longer pink because there is no more red than there is Green or Blue.
The code will become this: R=128 G=128 B=128 which is gray.
Visual Representation: http://www.yvg.com/twrs/RGBConverter.html

Hexidecimal Color Codes
Html stem from RGB in that each R, G, and B have two numbers defining them. 3 colors*2 numbers per color = 6 numbers.
3*2 = 6
6 digits hence hexidecimal.

Take Red: R=255 G=0 B=0
color code: R=FF G=00 B=00 = #FF0000
so try this, but erase the spaces in between: [ color = #FF0000 ] Text Here [ /color ]
Visual Representation: http://www.yvg.com/twrs/RGBConverter.html

The first digit of these two-digit identifiers ranges from 0-9 and then A-F while the second digit then follows. Maybe I should show you:

Take some colors who's RGB's are:
R= 0-15 G=0 B=0

R to Two-digit component
0 = 00
1 = 01
2 = 02
3 = 03
4 = 04
5 = 05
6 = 06
7 = 07
8 = 08
9 = 09
10 = 0A
11 = 0B
12 = 0C
13 = 0D
14 = 0E
15 = 0F

Whew!
So R=1 G=0 B=0 is the same as 01 00 00 or #010000
So R=10 G=1 B=0 is the same as 0A 01 00 or #0A0100
So R=15 G=15 B=15 is the same as 0F 0F 0F or #0F0F0F

The pattern continues for the next fifteen numbers: 16-31

R to Two-digit component
16 = 10
17 = 11
18 = 12
19 = 13
20 = 14
21 = 15
22 = 16
23 = 17
24 = 18
25 = 19
26 = 1A
27 = 1B
28 = 1C
29 = 1D
30 = 1E
31 = 1F

So R=26 G=19 B=1 is the same as 1A 13 01 or #1A1301

For a vis/rep try R=96 G=0 B=96 which is the same as 60 00 60 or #600060
Visual Representation: http://www.yvg.com/twrs/RGBConverter.html

A always follows 9.
- After 9F comes A0
R two-digit component
157 = 9D
158 = 9E
159 = 9F
160 = A0
161 = A1
162 = A2

For a vis/rep try R=150 G=0 B=160 which is the same as 96 00 A0 or #9600A0.
Visual Representation: http://www.yvg.com/twrs/RGBConverter.html

So once you get a two-digit component for each of your three RGB values, you put them together for a hexadecimal color code.
Something like this:
Let's make Purple! (sort of)
Red: R=255 G=0 B=0
Blue:R=0 G=0 B=255
Mix them all together: R=255 G=0 B=255
SO... R=FF G=00 B=FF
the code is #FF00FF.
Try this code but without the spaces: [color = #FF00FF ] Voila! [ /color ]
Voila!

Visual Representation: http://www.yvg.com/twrs/RGBConverter.html


Some Useful Two-digit Components
R two-digit component
0 = 00
32 = 20
64 = 40
96 = 60
128= 80
160= A0
192= C0
224= E0
255= FF

Some Pretty Colors!
...

End

If you have any questions, or you'd like to request the code for a certain color, please comment in my journal. Thanx for reading, and I hope I've been of assistance. Here again is the site for the color converter...

http://www.yvg.com/twrs/RGBConverter.html