HTML/CSS Colors

How to specify colors using color name, hexadecimal (hex) value
or rgb(), rgba(), hsl(), hsla() functional notation.

Ad: Arclab® Web Form Builder | Arclab® Webformular Generator

Visual HTML/PHP Form Editor

Software for Windows PC

Learn more   Trial version available!

check Create the form on your computer

check Upload the form to your own web site

check Send form data as email or insert into MySQL

 

 

HTML/CSS Color Values

In HTML/CSS colors could be specified in multiple ways:

 

chevron_right  Color name - Sample: "black"

chevron_right  RGB (Red-green-blue) hexadecimal (hex) value - Sample: "#000000"

chevron_right  RGB (Red-green-blue) functional notation - Sample: "rgb(0,0,0)"

chevron_right  RGBA (Red-green-blue-alpha) functional notation - Sample: "rgb(0,0,0,1.0)"

chevron_right  HSL (Hue-saturation-lightness) functional notation - Sample: "hsl(0,0%,0%)"

chevron_right  HSLA (Hue-saturation-lightness-alpha) functional notation - Sample: "hsla(0,0%,0%,1.0)"

Color Names

A color name is a keyword representing a specific color, for example: cadetblue.
Color names are case-insensitive, which means "black" equals "Black".

 

Samples:

HTML: <div style="color:black;">

CSS: .classname {color:black;}

Colors Names List

Identifiers supported by all modern browsers:

 

aliceblue
#f0f8ff		 antiquewhite
#faebd7		 aqua
#0ff		 aquamarine
#7fffd4		 azure
#f0ffff
beige
#f5f5dc		 bisque
#ffe4c4		 black
#000		 blanchedalmond
#ffebcd		 blue
#00f
blueviolet
#8a2be2		 brown
#a52a2a		 burlywood
#deb887		 cadetblue
#5f9ea0		 chartreuse
#7fff00
chocolate
#d2691e		 coral
#ff7f50		 cornflowerblue
#6495ed		 cornsilk
#fff8dc		 crimson
#dc143c
cyan
#0ff		 darkblue
#00008b		 darkcyan
#008b8b		 darkgoldenrod
#b8860b		 darkgray
#a9a9a9
darkgrey
#a9a9a9		 darkgreen
#006400		 darkkhaki
#bdb76b		 darkmagenta
#8b008b		 darkolivegreen
#556b2f
darkorange
#ff8c00		 darkorchid
#9932cc		 darkred
#8b0000		 darksalmon
#e9967a		 darkseagreen
#8fbc8f
darkslateblue
#483d8b		 darkslategray
#2f4f4f		 darkslategrey
#2f4f4f		 darkturquoise
#00ced1		 darkviolet
#9400d3
deeppink
#ff1493		 deepskyblue
#00bfff		 dimgray
#696969		 dimgrey
#696969		 dodgerblue
#1e90ff
firebrick
#b22222		 floralwhite
#fffaf0		 forestgreen
#228b22		 fuchsia
#ff00ff		 gainsboro
#dcdcdc
ghostwhite
#f8f8ff		 gold
#ffd700		 goldenrod
#daa520		 gray
#808080		 grey
#808080
green
#008000		 greenyellow
#adff2f		 honeydew
#f0fff0		 hotpink
#ff69b4		 indianred
#cd5c5c
indigo
#4b0082		 ivory
#fffff0		 khaki
#f0e68c		 lavender
#e6e6fa		 lavenderblush
#fff0f5
lawngreen
#7cfc00		 lemonchiffon
#fffacd		 lightblue
#add8e6		 lightcoral
#f08080		 lightcyan
#e0ffff
lightgoldenrodyellow
#fafad2		 lightgray
#d3d3d3		 lightgrey
#d3d3d3		 lightgreen
#90ee90		 lightpink
#ffb6c1
lightsalmon
#ffa07a		 lightseagreen
#20b2aa		 lightskyblue
#87cefa		 lightslategray
#778899		 lightslategrey
#778899
lightsteelblue
#b0c4de		 lightyellow
#ffffe0		 lime
#0f0		 limegreen
#32cd32		 linen
#faf0e6
magenta
#f0f		 maroon
#800000		 mediumaquamarine
#66cdaa		 mediumblue
#0000cd		 mediumorchid
#ba55d3
mediumpurple
#9370db		 mediumseagreen
#3cb371		 mediumslateblue
#7b68ee		 mediumspringgreen
#00fa9a		 mediumturquoise
#48d1cc
mediumvioletred
#c71585		 midnightblue
#191970		 mintcream
#f5fffa		 mistyrose
#ffe4e1		 moccasin
#ffe4b5
navajowhite
#ffdead		 navy
#000080		 oldlace
#fdf5e6		 olive
#808000		 olivedrab
#6b8e23
orange
#ffa500		 orangered
#ff4500		 orchid
#da70d6		 palegoldenrod
#eee8aa		 palegreen
#98fb98
paleturquoise
#afeeee		 palevioletred
#db7093		 papayawhip
#ffefd5		 peachpuff
#ffdab9		 peru
#cd853f
pink
#ffc0cb		 plum
#dda0dd		 powderblue
#b0e0e6		 purple
#800080		 rebeccapurple
#663399
red
#f00		 rosybrown
#bc8f8f		 royalblue
#4169e1		 saddlebrown
#8b4513		 salmon
#fa8072
sandybrown
#f4a460		 seagreen
#2e8b57		 seashell
#fff5ee		 sienna
#a0522d		 silver
#c0c0c0
skyblue
#87ceeb		 slateblue
#6a5acd		 slategray
#708090		 slategrey
#708090		 snow
#fffafa
springgreen
#00ff7f		 steelblue
#4682b4		 tan
#d2b48c		 teal
#008080		 thistle
#d8bfd8
tomato
#ff6347		 turquoise
#40e0d0		 violet
#ee82ee		 wheat
#f5deb3		 white
#ffffff
whitesmoke
#f5f5f5		 yellow
#ffff00		 yellowgreen
#9acd32		    

Red-Green-Blue (RGB) Hexadecimal (hex) Value

Color as hexadecimal value in the format #RRGGBB.
R=red, G=green, b=blue hexadecimal value between 0 and FF (equals decimal 255)

 

Samples:

HTML: <div style="color:#efef00;">

CSS: .classname {color:#efef00;}

 

#000000
(black)		 #FF0000
(red)		 #00FF00
(green)		 #0000FF
(blue)

 

The hex value can be shortened to #RGB, e.g. #F00 = #FF0000.

Red-Green-Blue rgb() Functional Notation

Color as decimal value in the form: rgb(R,G,B)
R=red, G=green, b=blue decimal value between 0 and 255 (equals hex FF)

 

Samples:

HTML: <div style="color:rgb(128,128,64);">

CSS: .classname {color:rgb(128,128,64);}

 

rgb(0,0,0)
(black)		 rgb(255,0,0)
(red)		 rgb(0,255,0)
(green)		 rgb(0,0,255)
(blue)

Red-Green-Blue-Alpha rgba() Functional Notation

Color as decimal value in the form: rgba(R,G,B,A)
R=red, G=green, b=blue decimal value between 0 and 255 (equals hex FF)
A=alpha (transparency) value between 0.0 (fully-transparent/invisible) and 1.0 (non-transparent)

 

Samples:

HTML: <div style="color:rgba(128,128,64,1.0);">

CSS: .classname {color:rgba(128,128,64,1.0);}

 

rgba(0,0,0,1.0)
(black 100%)		 rgba(255,0,0,1.0)
(red 100%)		 rgba(0,255,0,1.0)
(green 100%)		 rgba(0,0,255,1.0)
(blue 100%)

 

 

Alpha Sample: Blue on a white background

 

rgba(0,0,255,1.0)
(blue 100%)		 rgba(0,0,255,0.75)
(blue 75%)		 rgba(0,0,255,0.5)
(blue 50%)		 rgba(0,0,255,0.25)
(blue 25%)

Hue-Saturation-Lightness hsl() Functional Notation

The hsl model uses the rainbow color circle (hue) combined with color saturation and lightness in the format: hsl(H,S,L)
H (Hue) = Angle of the color circle from 0 to 360
S (Saturation) = Color saturation from 0% to 100% (100% is full saturation, 0% is a shade of grey)
L (Lightness) = Lightness from 0% to 100% (50% is normal, 100% is white, 0% is black)

 

Samples:

HTML: <div style="color:hsl(240,100%,50%);">

CSS: .classname {color:hsl(240,100%,50%);}

 

hsl(0,0%,0%)
(black)		 hsl(0,100%,50%)
(red)		 hsl(120,100%,50%)
(green)		 hsl(240,100%,50%)
(blue)

 

 

Saturation Sample (normal 50% lightness):

 

hsl(240,100%,50%)
(blue 100% saturation)

blue		 hsl(240,75%,50%)
(blue 75% saturation)		 hsl(240,50%,50%)
(blue 50% saturation)		 hsl(240,25%,50%)
(blue 25% saturation)		 hsl(240,0%,50%)
(blue 0% saturation)

shade of gray

 

 

Lightness Sample (100% saturation):

 

hsl(240,100%,100%)
(blue 100% lightness)

white		 hsl(240,100%,75%)
(blue 75% lightness)		 hsl(240,100%,50%)
(blue 50% lightness)

normal		 hsl(240,100%,25%)
(blue 25% lightness)		 hsl(240,100%,0%)
(blue 0% lightness)

black

Hue-Saturation-Lightness-Alpha hsla() Functional Notation

The hsla model uses the rainbow color circle (hue) combined with color saturation, lightness and alpha in the format: hsla(H,S,L,A).
H (Hue) = Angle of the color circle from 0 to 360
S (Saturation) = Color saturation from 0% to 100% (100% is full saturation, 0% is a shade of grey)
L (Lightness) = Lightness from 0% to 100% (50% is normal, 100% is white, 0% is black)
A (Alpha) = Alpha (transparency) value between 0.0 (fully-transparent/invisible) and 1.0 (non-transparent)

 

Samples:

HTML: <div style="color:hsla(240,100%,50%,1.0);">

CSS: .classname {color:hsla(240,100%,50%,1.0);}

 

hsla(0,0%,0%,1.0)
(black)		 hsla(0,100%,50%,1.0)
(red)		 hsla(120,100%,50%,1.0)
(green)		 hsla(240,100%,50%,1.0)
(blue)

 

 

Saturation Sample (normal 50% lightness, no transparency):

 

hsla(240,100%,50%,1.0)
(blue 100% saturation)

blue		 hsla(240,75%,50%,1.0)
(blue 75% saturation)		 hsla(240,50%,50%,1.0)
(blue 50% saturation)		 hsla(240,25%,50%,1.0)
(blue 25% saturation)		 hsla(240,0%,50%,1.0)
(blue 0% saturation)

shade of gray

 

 

Lightness Sample (100% saturation, no transparency):

 

hsla(240,100%,100%,1.0)
(blue 100% lightness)

white		 hsla(240,100%,75%,1.0)
(blue 75% lightness)		 hsla(240,100%,50%,1.0)
(blue 50% lightness)

normal		 hsla(240,100%,25%,1.0)
(blue 25% lightness)		 hsla(240,100%,0%,1.0)
(blue 0% lightness)

black

 

 

Alpha Sample (normal 50% lightness, 100% saturation): Green on a white background

 

hsla(120,100%,50%,1.0)
(green 100%)		 hsla(120,100%,50%,0.75)
(green 75%)		 hsla(120,100%,50%,0.5)
(green 50%)		 hsla(120,100%,50%,0.25)
(green 25%)
Disclaimer: The information, code snippets and samples on this page are provided "as is" without warranty of any kind. Further, Arclab Software OHG does not warrant, guarantee, or make any representations regarding the use, or the results of use, in terms of correctness, accuracy, reliability, currentness, or otherwise.