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;
<div class="box">
  Color of this text will change
color refresh


Specification and Browser compatibility

CSS3 ColorsW3C RecommendationCSS3
Yes 4+ Yes 3+ Yes 9+ Yes 12+ Yes 3.1+ Yes 10.0-10.1+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 3.2+ Yes 10+ Yes 10+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments