CSS Color Formats

Demonstrating RGB, HEX, and HSL Color Functions

RGB Color

RGB Format

RGB stands for Red, Green, Blue. Each value ranges from 0 to 255.


Syntax: rgb(52, 152, 219)


This produces a blue color by mixing 52 Red, 152 Green, and 219 Blue values.

HEX Color

HEX Format

HEX uses a # followed by 6 hexadecimal digits (00-FF) for Red, Green, Blue.


Syntax: #e74c3c


This produces a red color: e7=Red, 4c=Green, 3c=Blue in hex notation.

HSL Color

HSL Format

HSL stands for Hue, Saturation, Lightness. Hue is 0-360°, others are percentages.


Syntax: hsl(145, 63%, 49%)


Hue 145° = Green, 63% saturated, 49% lightness.

More Color Examples

rgb(231,76,60)
rgb(46,204,113)
rgb(155,89,182)
#f39c12
#1abc9c
#e84393
hsl(210,79%,46%)
hsl(340,82%,52%)
hsl(48,89%,50%)