CSS color values

CSS3 color values are used in many CSS properties like color, background-color, etc. CSS3 color values can be specified in many ways. Here is the list of various ways to specify color:

Format	Description	Examples
Predefined		e.g. red, blue, orange
RGB hexadecimal	# followed by 6 of 3 hex chars. 3 digit for #rgb is converted to #rrggbb by replicating digits	#ff0000, #f00
RGB function notation	rgb(integer, integer, integer) or RGB(percentage, percentage, percentage). Integer can be between 0 and 255. Percentage of 100% is equivalent to 255.	rgb(255,0,0), rgb(100%, 0%, 0%)
RGBA function notation	rgb(integer, integer, integer, alpha) or RGB(percentage, percentage, percentage, alpha). alpha can be between 0 and 1.0	rgb(255,0,0,1), rgb(100%,0%,0%,1)
transparent	Can be considered a shorthand for transparent black, rgba(0,0,0,0)	transparent
HSL value	(hue, saturation, lightness). hue is between 0 and 360 (0 inclusive, 360 exclusive). saturation, lightness are in percentage.	hsl(0, 100%, 50%) /red/ hsl(120, 100%, 25%) /dark green/
HSLA value	(hue, saturation, lightness, alpha)	hsla(240, 100%, 50%, 0.5) /* semi-transparent solid blue */

Examples – color values

In the following code, CSS property color can be changed to the following values

red
#00ff00
rgb(80%, 0%, 0%)
rgb(80%, 0%, 0%, 0.5)
transparent
hsl(0, 100%, 50%)
hsla(240, 100%, 50%, 0.5)

<style type="text/css">
.box {
  width: 100px; height: 100px;
  color:red;
}
</style>
<div class="box">
  Color of this text will change
</div>

color refresh

try it online

Specification and Browser compatibility

Specification	Status	Categories
CSS3 Colors	W3C Recommendation	CSS3

Desktop
Chrome	Firefox	IE	Edge	Safari	Opera
Yes 4+	Yes 3+	Yes 9+	Yes 12+	Yes 3.1+	Yes 10.0-10.1+

Mobile
Android Chrome	Android Firefox	iOS Safari	IE Mobile	Opera Mobile
Yes 47+	Yes 44+	Yes 3.2+	Yes 10+	Yes 10+

source: caniuse.com

Examples – color values

Related

Specification and Browser compatibility

Suggested posts: