Writing in HTML (Hypertext Markup Language), and CSS (Cascading Style Sheets), colors can be specified in different ways:
- As RGB values
- As hexadecimal values
- As HSL values
- By color names
An RGB color value is specified with: RGB(red, green, blue). The RGB values demonstrate primary colors of light being red, green, and blue. The primary colors of light are different from the primary colors of liquid paint(red, yellow, blue)
Each parameter of the RGB(red, green, and blue) values defines the intensity of the color as an integer between 0 and 255. For example, RGB(0,0,255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0. (0,0,0) is black, and (255,255,255) is white.
A hexadecimal color value is specified with hexadecimal integers between 00 (zero zero) and FF, specifying the intensity of the color. For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to
00.
Hexadecimal color values increase by this fashion, until reaching 9f, then a0:
(example): 00, 01, 02, 03, 04, 05, 06, 07, 09, 0a, 0b, 0c, 0d, 0e, 0f, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1a, 1b, 1c, 1d, 1e, 1f, 20... continuing to 9f, next, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, b0...and so on, continuing to ff.
An HSL color value(different from RGB Calulator HSL values) defines the hue, saturation, and lightness. HSL color values are specified with: (Hue, Saturation, Lightness).
Hue is a degree of color from 0 to 360. 0 is red, 120 is green, 240 is blue, 300 is fuchsia(magenta), and increases to 360 as the color returns to red.
Saturation is the amount of grey that is added. Saturation is a percentage value; 0% means the color will be grey, 100% means no grey is added, the hue is it's full color.
Lightness is a percentage value of the amount of black and white that will be added to the color. 0% means all black, and 100% means all white. Setting the lightness to 50% is your original hue color.
RGB(255, 0, 0) #ff0000 hsl(0, 100%, 50%) hsl(360, 100%, 50%)
Red
RGB(0, 0, 255) #0000ff hsl(240, 100%, 50%)
Blue
RGB(75, 0, 130) #4b0082 hsl(275, 100%, 25%)
Indigo
RGB(238, 130, 138) #ee82ee hsl(300, 76%, 72%)
Violet
RGB(255, 192, 203) #ffc0cb hsl(350, 100%, 88%)
Pink
RGB(255, 218, 185) #ffdab9 hsl(28, 100%, 86%)
PeachPuff
RGB(128, 128, 128) #808080 hsl(0, 0%, 50%)
Gray
RGB(192, 192, 192) #c0c0c0 hsl(0, 0%, 75%)
Silver
RGB(245, 245, 245) #f5f5f5 hsl(0, 0%, 96%)
WhiteSmoke
RGB(255, 255, 255) #ffffff hsl(0, 0%, 100%)
White
RGB(255,0, 255) #ff00ff hsl(300, 100%, 50%)
Fuchsia/Magenta
RGB(128, 0, 128) #800080 hsl(300, 100%, 25%)
Purple
RGB(128, 0, 0) #800000 hsl(0, 100%, 25%)
Maroon
RGB(0, 255, 255) #00ffff hsl(180, 100%, 50%)
Aqua/Cyan
RGB(135, 206, 235) #87ceeb hsl(197, 71%, 73%)
SkyBlue
RGB(64, 224, 208) #40e0d0 hsl(174, 72%, 56%)
Turqoise
RGB(0, 255, 0) #00ff00 hsl(120, 100%, 50%)
Lime
RGB(144, 238, 144) #90ee90 hsl(120, 73%, 75%)
LightGreen
RGB(165, 42, 42) #a52a2a hsl(0, 59%, 41%)
Brown
RGB(255, 215, 0) #ffd700 hsl(51, 100%, 50%)
Gold
RGB(210, 105, 30) #d2691e hsl(25, 75%, 47%)
Chocolate
RGB(160, 82, 45) #a0522d hsl(19, 56%, 40%)
Sienna
RGB(139, 69, 19) #8b4513 hsl(25, 76%, 31%)
SaddleBrown
RGB(65, 105, 225) #4169e1 hsl(225, 73%, 57%)
RoyalBlue
RGB(255, 99, 71) #ff6347 hsl(9, 100%, 64%)
Tomato
RGB(245, 222, 179) #f5de53 hsl(39, 77%, 83%)
Wheat
RGB(128, 128, 0) #808000 hsl(60, 100%, 25%)
Olive
RGB(30, 144, 255) #1e90ff hsl(200, 100%, 56%)
DodgerBlue
Red
RGB(255, 165, 0) #ffa500 hsl(39, 100%, 50%)
Orange
Orange
RGB(255, 255, 0) #ffff00 hsl(60, 100%, 50%)
Yellow
Yellow
RGB(0, 128, 0) #008000 hsl(120, 100%, 25%)
Green
Green
RGB(0, 0, 255) #0000ff hsl(240, 100%, 50%)
Blue
RGB(75, 0, 130) #4b0082 hsl(275, 100%, 25%)
Indigo
RGB(238, 130, 138) #ee82ee hsl(300, 76%, 72%)
Violet
RGB(255, 192, 203) #ffc0cb hsl(350, 100%, 88%)
Pink
RGB(255, 218, 185) #ffdab9 hsl(28, 100%, 86%)
PeachPuff
RGB(128, 128, 128) #808080 hsl(0, 0%, 50%)
Gray
RGB(192, 192, 192) #c0c0c0 hsl(0, 0%, 75%)
Silver
RGB(245, 245, 245) #f5f5f5 hsl(0, 0%, 96%)
WhiteSmoke
RGB(255, 255, 255) #ffffff hsl(0, 0%, 100%)
White
RGB(255,0, 255) #ff00ff hsl(300, 100%, 50%)
Fuchsia/Magenta
RGB(128, 0, 128) #800080 hsl(300, 100%, 25%)
Purple
RGB(128, 0, 0) #800000 hsl(0, 100%, 25%)
Maroon
RGB(0, 255, 255) #00ffff hsl(180, 100%, 50%)
Aqua/Cyan
RGB(135, 206, 235) #87ceeb hsl(197, 71%, 73%)
SkyBlue
RGB(64, 224, 208) #40e0d0 hsl(174, 72%, 56%)
Turqoise
RGB(0, 255, 0) #00ff00 hsl(120, 100%, 50%)
Lime
RGB(144, 238, 144) #90ee90 hsl(120, 73%, 75%)
LightGreen
RGB(165, 42, 42) #a52a2a hsl(0, 59%, 41%)
Brown
RGB(255, 215, 0) #ffd700 hsl(51, 100%, 50%)
Gold
RGB(210, 105, 30) #d2691e hsl(25, 75%, 47%)
Chocolate
RGB(160, 82, 45) #a0522d hsl(19, 56%, 40%)
Sienna
RGB(139, 69, 19) #8b4513 hsl(25, 76%, 31%)
SaddleBrown
RGB(65, 105, 225) #4169e1 hsl(225, 73%, 57%)
RoyalBlue
RGB(255, 99, 71) #ff6347 hsl(9, 100%, 64%)
Tomato
RGB(245, 222, 179) #f5de53 hsl(39, 77%, 83%)
Wheat
RGB(128, 128, 0) #808000 hsl(60, 100%, 25%)
Olive
RGB(30, 144, 255) #1e90ff hsl(200, 100%, 56%)
DodgerBlue