The CSS color values can be expressed in a variety of ways. Learn how to become a master of color values in CSS and apply them to your project.
#RRGGBB
This is a hex-pair notation familiar to authors using traditional HTML. In this format, the first pair of digits corresponds to the red level, the second pair to the green, and the third pair to the blue.
Each pair is in hexadecimal notation in the range 00–FF (decimal 0–255). Thus, a “pure” blue is written #0000FF, a “pure” red is written #FF0000, and so on.
#RGB
This is a shorter form of the six-digit notation described previously. In this format, each digit is replicated to arrive at an equivalent six-digit value; thus, #F8C becomes #FF88CC.
#RRGGBBAA
An extension of the #RRGGBB notation which adds an alpha channel. As with the R, G, and B values, the A (alpha) value is in hexadecimal notation in the range 00– FF.
These are mapped from hexadecimal to decimal in the range 0–1; thus, #00FF0099 is equivalent to the color #00FF00 (light green) with an opacity of 0.6.
The opacity here is derived by converting hexadecimal 99 to decimal 153, and then dividing 153 by 255 to get 0.6. Put another way, #00FF0099 is exactly equivalent to rgba(0,255,0,0.6).
Note: support for this notation first emerged in early 2016.
#RGBA
This is a shorter form of the eight-digit #RRGGBBAA notation described previously. In this format, each digit is replicated to arrive at an equivalent eight-digit value; thus, #F8C6 becomes #FF88CC66.
Note: support for this notation first emerged in early 2016.
rgb(rrr,ggg,bbb)
This format allows the author to use RGB values in the range 0–255; only integers are permitted. Not coincidentally, this range is the decimal equivalent of 00–FF in hexadecimal.
In this format, “pure” green is rgb(0,255,0), and white is represented as rgb(255,255,255).
rgb(rrr.rr%,ggg.gg%,bbb.bb%)
This format allows the author to use RGB values in the range 0% to 100%, with decimal values allowed (e.g., 75.5%).
The value for black is thus rgb(0%,0%,0%), whereas “pure” blue is rgb(0%,0%,100%).
hsl(hhh.hh,sss.ss%,lll.ll%)
This format permits authors to specify a CSS color by its hue angle, saturation, and lightness (HSL). A hue angle is always a unitless number or a <degree> value in the range 0 to 360, and the saturation and brightness values are always percentages.
Hue angles 0 and 360 are equivalent and are both red. Hue angles greater than 360 can be declared, but they are normalized to the 0–360 range; thus, setting a hue angle of 454 is equivalent to setting an angle of 94.
Read more: Become A Master of CSS Length Values: Simple Explanation
Any HSL value, regardless of color angle, will be rendered as a shade of gray if the saturation value is 0%; the exact shade will depend on the lightness value.
Any HSL value, regardless of the hue angle, will be rendered solid black if lightness is 0% and solid white if lightness is 100%. The “normal” lightness value—that is, the value associated with most common colors—is 50%.
rgba(rrr,ggg,bbb,a.aa), rgba(rrr.rr%,ggg.gg%,bbb.bb%,a.aa), hsla(hhh.hh,sss.ss%,lll.ll%,a.aa)
These extend the previous three formats to include an alpha (opacity) value. The alpha value must be a real number between 0 and 1 inclusive; percentages are not permitted for the alpha value.
Thus, rgba(255,0,0,0.5) and rgba(100%,0%,0%,0.5) and hsla(0,100%,50%,0.5) are all equivalent half-opaque red.
<keyword>
One of 16 recognized keywords based on the original Windows VGA colors.
These keywords are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Browsers generally also recognize the 148 color keywords documented in the CSS Color Module Level 4 specification, referred to for historical reasons as “the X11 colors” (though the list does not precisely replicate X11’s colors).
currentColor
A special keyword that represents the current computed value of the element’s CSS color property.
This means you can declare background-color: currentColor and set the element’s background to be the same color as its foreground (not recommended).
When applied to the color property, it is equivalent to declaring color: inherit. It can also be used on borders; border: 1px solid is equivalent to border: 1px solid currentColor. This can be quite useful when (un)setting a border’s color via DOM scripting.
transparent
A special keyword that is (just barely) a shorthand for rgba(0,0,0,0), which is the computed value any time transparent is used.
