Color Codes › HSL Chart
HSL color codes chart
Common colours with their HSL values. Click any swatch to copy its HSL code. Need to convert a specific colour? Use the converter.
hsl(9, 100%, 64%)
#FF0000
hsl(0, 100%, 50%)
#FF7F50
hsl(16, 100%, 66%)
#FFA500
hsl(39, 100%, 50%)
#FFD700
hsl(51, 100%, 50%)
#FFFF00
hsl(60, 100%, 50%)
#9ACD32
hsl(80, 61%, 50%)
#00FF00
hsl(120, 100%, 50%)
#008000
hsl(120, 100%, 25%)
#00CED1
hsl(181, 100%, 41%)
#00FFFF
hsl(180, 100%, 50%)
#1E90FF
hsl(210, 100%, 56%)
#0000FF
hsl(240, 100%, 50%)
#000080
hsl(240, 100%, 25%)
#4B0082
hsl(275, 100%, 25%)
#8A2BE2
hsl(271, 76%, 53%)
#EE82EE
hsl(300, 76%, 72%)
#FF00FF
hsl(300, 100%, 50%)
#FF1493
hsl(328, 100%, 54%)
#DC143C
hsl(348, 83%, 47%)
#A52A2A
hsl(0, 59%, 41%)
#000000
hsl(0, 0%, 0%)
#808080
hsl(0, 0%, 50%)
#C0C0C0
hsl(0, 0%, 75%)
#FFFFFF
hsl(0, 0%, 100%)
What is HSL?
HSL describes a colour by hue (0-360 degrees), saturation (0-100%) and lightness (0-100%). It maps closely to how people think about colour, making tweaks intuitive.
In CSS, write hsl(9, 100%, 64%) or the modern hsl(9 100% 64%). Lowering saturation mutes a colour; raising lightness brightens it.
Converting HSL
To turn any HSL value into HEX, HSL, OKLCH or another format, paste it into the colour converter — it reads HSL and every other common format. Or pick a colour visually in the picker and read its HSL value live.
Popular colours
Sage green
Navy blue
Teal
Coral
Burgundy
Terracotta
Mint green
Shades of blue
Shades of pink
All colour codes →