Colors Values and CSS

January 24, 2011

Get a basic understanding of current color values, and alpha transparency declarations for RGBA and HSLA.

The Current Way to Declare Colors: Key Word, Hex, or RGB without Transparency

The CSS 2.1 specification for the foreground color and background-color properties can be declared in three ways:

• Predefined color names or key words
• Hexadecimal
• RGB

Color Key Words

1. #warning {
2. color: red; /* Predefined key word */
3. }

I’m not really sure why I would use a color key word, except if I was writing CSS and was too lazy to type a hex color and decided to type black, white or gray instead. The table below is the current list of color key words, along with the hex and RGB color values. Be aware that the new color module spec has added a slew of new names. Color names are not case-sensitive.

Color	Key Word	Hexadecimal	RGB
	Red	#FF0000	(255,0,0)
	Yellow	#FFFF00	(255,255,0)
	Lime	#00FF00	(0,255,0)
	Green	#008000	(0,128,0)
	Olive	#808000	(128,128,0)
	Teal	#008080	(0,128,128)
	Aqua	#00FFFF	(0,255,255)
	Blue	#0000FF	(0,0,255)
	Navy	#000080	(0,0,128)
	Purple	#800080	(128,0,128)
	Fuchsia	#FF00FF	(255,0,255)
	Maroon	#800000	(128,0,0)
	Black	#000000	(0,0,0)
	Gray	#808080	(128,128,128)
	Silver	#C0C0C0	(192,192,192)
	White	#FFFFFF	(255,255,255)

Hexadecimal Colors

1. #warning {
2. color: #ff0000; /* Red in hexadecimal */
3. }

Good ’ol hexadecimal uses 16 as its base instead of 10. Hexa (6) decimal (tenth)

Hexadecimal is considered a numerical way to set the color values. For each color (r,g,b) there is a pair of digits from 0–9, with the double digit numbers being replaced with letters: A=10, B=11, C=12, D=13, E=14, and F=15. For the math challenged like myself: 0–15=16 digits.

#000000 is black; #FFFFFF is white. This can be explained by the RGB color model. If each color is “closed”, then we have blackness. If each color is “opened”, then we have white.

Web Safe Colors

There are 216 colors considered to be “Web safe”, that is, consistently displayed on screen regardless of operating system. Being confined to Web safe colors is widely considered to be obsolete due to the predominance of 24-bit color monitors. Rollover a Web safe color below for the hexadecimal notation.

RGB (Red, Green, Blue) Color Model

1. p.alert {
2. color: rgb(255,0,0); /* Red in RGB color model */
3. }
4. p.success {
5. color: rgb(0,255,0); /* Green in RGB color model */
6. }
7. p.note {
8. color: rgb(0,0,255); /* Blue in RGB color model */
9. }

What is the RGB Color Model?

The RGB color model is used by computer monitors to display colors using light. RGB stands for red, green, and blue, and is an additive color model. White light is the result of adding red, green and blue light of equal strength.

The most widely-used setting for monitors these days is 24-bit color. Red, green and blue colored light is added together in varying combinations and strengths to form a range of 16,777,216 million colors.

The formula used to calculate the amount of possible colors:

For RGB values in CSS, a number from 0–255 is expected for each position (red,green,blue) in a comma separated list; think of 0 representing no light at all, or blackness, 255 is full blast.

In the table below, notice that in each column (red,greed,blue) 8 is added until 255 is reached. I used 8 because 256 is a multiple of 8. The colors get brighter until 255 is reached. If a negative value or a value over 255 is declared, the spec says the browser should clip it to 0–255 respectively.

Red		Green		Blue
	rgb(255,0,0)		rgb(0,255,0)		rgb(0,0,255)
	rgb(248,0,0)		rgb(0,248,0)		rgb(0,0,248)
	rgb(240,0,0)		rgb(0,240,0)		rgb(0,0,240)
	rgb(232,0,0)		rgb(0,232,0)		rgb(0,0,232)
	rgb(224,0,0)		rgb(0,224,0)		rgb(0,0,224)
	rgb(216,0,0)		rgb(0,216,0)		rgb(0,0,216)
	rgb(208,0,0)		rgb(0,208,0)		rgb(0,0,208)
	rgb(200,0,0)		rgb(0,200,0)		rgb(0,0,200)
	rgb(192,0,0)		rgb(0,192,0)		rgb(0,0,192)
	rgb(184,0,0)		rgb(0,184,0)		rgb(0,0,184)
	rgb(176,0,0)		rgb(0,176,0)		rgb(0,0,176)
	rgb(168,0,0)		rgb(0,168,0)		rgb(0,0,168)
	rgb(160,0,0)		rgb(0,160,0)		rgb(0,0,160)
	rgb(152,0,0)		rgb(0,152,0)		rgb(0,0,152)
	rgb(144,0,0)		rgb(0,144,0)		rgb(0,0,144)
	rgb(136,0,0)		rgb(0,136,0)		rgb(0,0,136)
	rgb(128,0,0)		rgb(0,128,0)		rgb(0,0,128)
	rgb(120,0,0)		rgb(0,120,0)		rgb(0,0,120)
	rgb(112,0,0)		rgb(0,112,0)		rgb(0,0,112)
	rgb(104,0,0)		rgb(0,104,0)		rgb(0,0,104)
	rgb(96,0,0)		rgb(0,96,0)		rgb(0,0,96)
	rgb(88,0,0)		rgb(0,88,0)		rgb(0,0,88)
	rgb(80,0,0)		rgb(0,80,0)		rgb(0,0,80)
	rgb(72,0,0)		rgb(0,72,0)		rgb(0,0,72)
	rgb(64,0,0)		rgb(0,64,0)		rgb(0,0,64)
	rgb(56,0,0)		rgb(0,56,0)		rgb(0,0,56)
	rgb(48,0,0)		rgb(0,48,0)		rgb(0,0,48)
	rgb(40,0,0)		rgb(0,40,0)		rgb(0,0,40)
	rgb(32,0,0)		rgb(0,32,0)		rgb(0,0,32)
	rgb(24,0,0)		rgb(0,24,0)		rgb(0,0,24)
	rgb(16,0,0)		rgb(0,16,0)		rgb(0,0,16
	rgb(8,0,0)		rgb(0,8,0)		rgb(0,0,8)
	rgb(0,0,0)		rgb(0,0,0)		rgb(0,0,0)

Converting RGB to Hexadecimal

The formula is simple, sort of. Take each value for the three colors and divide it by 16. If the answer is a whole number, treat it as a decimal number, as in 80 ÷ 16 = 5 .0*16; then the 5 and the 0 are your two hex numbers for that color. Don’t forget, two digit numbers are replaced with letters: 10=A, 11=B, 12=C, 13=D, 14=E, 15=F

Let’s take the RGB value for this color: rgb(128,175,0)

Color	RGB	Color	Hexadecimal
	rgb(128,175,0)		#80AF00

The Addition of Transparency

RGBA (Red, Green, Blue, Alpha)

In the CSS 3 Color Module specification, alpha transparency has been added as an additional parameter. The “a” in the rgba(0,0,0,0.0) stands for alpha, and the value range is 0.0–1.0, with 1.0 being the default value, or completely opaque. White space is allowed around the numerical values. Unlike RGB values, there is no hexadecimal notation for an RGBA value.

1. p.example-01 {
2. color: rgba(255,0,0,0.2); /* Red, highly transparent*/
3. }
4. p.example-02 {
5. color: rgba(0,255,0,0.5); /* Green, middle of the road */
6. }
7. p.example-03 {
8. color: rgba(0,0,255,1.0); /* Blue, not transparent at all */
9. }

Best Practice for RGBA

Keep in mind, not everyone surfs with the latest browser. If a browser doesn’t recognize rgba(), then the browser should ignore it completely. If that is the only declaration of color, and the user’s browser doesn’t recogize it, then no color will be applied. Specifying a fallback color, while not ideal, will at least ensure that a color is displayed, however it won’t be transparent. Make sure to declare your fallback color first. When duplicate declarations appear in a rule, the second declaration is applied.

1. p.example-01 {
2. color: rgb(255,230,230); /* RGB equivalent */
3. color: rgba(255,0,0,0.2); /* Red, highly transparent */
4. }
5. p.example-02 {
6. color: rgb(128,255,128); /* RGB equivalent */
7. color: rgba(0,255,0,0.5); /* Green, 50% transparent */
8. }
9. p.example-03 {
10. color: rgb(76,76,255); /* RGB equivalent */
11. color: rgba(0,0,255,0.7); /* Blue, 70% transparent */
12. }

You can find an equivalent for a color by creating a color swatch in Photoshop, and simply using the eye dropper to get the RGB mix, or on Mac OS X, go to Finder > Go > Utilities > DigitalColor Meter.

If your browser allows opacity, in the table below on the left, the color red becomes less transparent as each number approaches 1.0. On the right, I have provided the RGB equivalents, though these colors aren’t transparent.

HSL (Hue, Saturation, Lightness) Color Values

In the CSS 3 Color Module, there’s a new way to specify color: hsl(hue,saturation,lightness). The W3C touts the HSL color value system as being a bit more intuitive than RGB to guess the color being declared. See for yourself.

1. p.alert {
2. color: hsl(0, 100%, 50%); /* Red */
3. }
4. p.alert {
5. color: hsl(360, 100%, 50%); /* Red */
6. }
7. p.success {
8. color: hsl(120, 100%, 50%); /* Green */
9. }
10. p.note {
11. color: hsl(240, 100%, 50%); /* Blue */
12. }
13. p {
14. color: hsl(-30, 100%, 50%); /* Magenta-Red */
15. }

Hue

Represented as the angle of the color as if it were on a circle. So, red would be 0° or 360°. Green would be 120°. Blue would be 240°. Negative degrees will also work; 330° can also be written as -30°.

Saturation

Represented as a percentage. 100% is full saturation, while 0% is a shade of gray.

Lightness

Represented as a percentage. 100% is white. 0% is black. 50% is considered normal.

HSL Color Wheel for Reference

HSL Color Tables

See the color tables below to better understand saturation and lightness.

0° Reds Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%	30° Oranges Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%	60° Yellows Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%
90° Yellow-Greens Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%	120° Greens Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%	150° Green-Cyans Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%
180° Cyans Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%	210° Cyan-Blues Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%	240° Blues Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%
270° Blue-Magentas Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%	300° Magentas Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%	330° Magenta-Reds Saturation   0% 25% 50% 75% 100% L           100%           88%           75%           63%           50%           38%           25%           13%           0%

Adding Transparency to HSL

Just like there’s an rgba() equivilent to rgb(), there’s a corresponding hsla() to hsl(). White space is allowed around the numerical values.

1. p.alert {
2. color: hsla(0, 100%, 50%, 1.0); /* Red, opaque */
3. }
4. p.alert {
5. color: hsla(360, 100%, 50%, 0.5); /* Red, 50% transparent */
6. }
7. p.success {
8. color: hsla(120, 100%, 50%, 0.2); /* Green, 20% transparent */
9. }
10. p.note {
11. color: hsla(240, 100%, 50%, 0.7); /* Blue, 70% transparent */
12. }
13. p {
14. color: hsla(-30, 100%, 50%, 0.9); /* Magenta-Red, 90% transparent */
15. }

The same considerations apply for hsla() as for rgba().

If you made it this far...wow, you must really love this stuff, too.

Sources

• CSS Color Module Level 3
• Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• RGB Color Model on Wikipedia