RGB color value is specified with RGB(red, green, 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.
Hexadecimal color value
is specified with
hexadecimal values 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.
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.
some colors...
RGB(255, 0, 0) #ff0000 hsl(0, 100%, 50%) hsl(360, 100%, 50%)
Red
RGB(255, 165, 0) #ffa500 hsl(39, 100%, 50%)
Orange
RGB(255, 255, 0) #ffff00 hsl(60, 100%, 50%)
Yellow
RGB(0, 128, 0) #008000 hsl(120, 100%, 25%)
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(0, 0, 0) #000000 hsl(0, 0%, 0%)
Black
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