HSL Color Chart

HSL Color Chart

Pick the right color with these HSL color charts. Displays the hue, saturation, and lightness values.

The following charts use the HSL method to define the colors. These can be used on any CSS property that accepts a color value.

There are four HSL color charts below. On each chart, each row increases the hue by 5. Each chart then uses different lightness or saturation levels.

Decreasing Saturation

In this first chart, the lightness remains constant at 50%, but each column decreases the saturation.

Click on an HSL value to open that color and its code in an online editor.

0,100%,50% 5,100%,50% 10,100%,50% 15,100%,50% 20,100%,50% 25,100%,50% 30,100%,50% 35,100%,50% 40,100%,50% 45,100%,50% 50,100%,50% 55,100%,50% 60,100%,50% 65,100%,50% 70,100%,50% 75,100%,50% 80,100%,50% 85,100%,50% 90,100%,50% 95,100%,50% 100,100%,50% 105,100%,50% 110,100%,50% 115,100%,50% 120,100%,50% 125,100%,50% 130,100%,50% 135,100%,50% 140,100%,50% 145,100%,50% 150,100%,50% 155,100%,50% 160,100%,50% 165,100%,50% 170,100%,50% 175,100%,50% 180,100%,50% 185,100%,50% 190,100%,50% 195,100%,50% 200,100%,50% 205,100%,50% 210,100%,50% 215,100%,50% 220,100%,50% 225,100%,50% 230,100%,50% 235,100%,50% 240,100%,50% 245,100%,50% 250,100%,50% 255,100%,50% 260,100%,50% 265,100%,50% 270,100%,50% 275,100%,50% 280,100%,50% 285,100%,50% 290,100%,50% 295,100%,50% 300,100%,50% 305,100%,50% 310,100%,50% 315,100%,50% 320,100%,50% 325,100%,50% 330,100%,50% 335,100%,50% 340,100%,50% 345,100%,50% 350,100%,50% 355,100%,50% 0,75%,50% 5,75%,50% 10,75%,50% 15,75%,50% 20,75%,50% 25,75%,50% 30,75%,50% 35,75%,50% 40,75%,50% 45,75%,50% 50,75%,50% 55,75%,50% 60,75%,50% 65,75%,50% 70,75%,50% 75,75%,50% 80,75%,50% 85,75%,50% 90,75%,50% 95,75%,50% 100,75%,50% 105,75%,50% 110,75%,50% 115,75%,50% 120,75%,50% 125,75%,50% 130,75%,50% 135,75%,50% 140,75%,50% 145,75%,50% 150,75%,50% 155,75%,50% 160,75%,50% 165,75%,50% 170,75%,50% 175,75%,50% 180,75%,50% 185,75%,50% 190,75%,50% 195,75%,50% 200,75%,50% 205,75%,50% 210,75%,50% 215,75%,50% 220,75%,50% 225,75%,50% 230,75%,50% 235,75%,50% 240,75%,50% 245,75%,50% 250,75%,50% 255,75%,50% 260,75%,50% 265,75%,50% 270,75%,50% 275,75%,50% 280,75%,50% 285,75%,50% 290,75%,50% 295,75%,50% 300,75%,50% 305,75%,50% 310,75%,50% 315,75%,50% 320,75%,50% 325,75%,50% 330,75%,50% 335,75%,50% 340,75%,50% 345,75%,50% 350,75%,50% 355,75%,50% 0,50%,50% 5,50%,50% 10,50%,50% 15,50%,50% 20,50%,50% 25,50%,50% 30,50%,50% 35,50%,50% 40,50%,50% 45,50%,50% 50,50%,50% 55,50%,50% 60,50%,50% 65,50%,50% 70,50%,50% 75,50%,50% 80,50%,50% 85,50%,50% 90,50%,50% 95,50%,50% 100,50%,50% 105,50%,50% 110,50%,50% 115,50%,50% 120,50%,50% 125,50%,50% 130,50%,50% 135,50%,50% 140,50%,50% 145,50%,50% 150,50%,50% 155,50%,50% 160,50%,50% 165,50%,50% 170,50%,50% 175,50%,50% 180,50%,50% 185,50%,50% 190,50%,50% 195,50%,50% 200,50%,50% 205,50%,50% 210,50%,50% 215,50%,50% 220,50%,50% 225,50%,50% 230,50%,50% 235,50%,50% 240,50%,50% 245,50%,50% 250,50%,50% 255,50%,50% 260,50%,50% 265,50%,50% 270,50%,50% 275,50%,50% 280,50%,50% 285,50%,50% 290,50%,50% 295,50%,50% 300,50%,50% 305,50%,50% 310,50%,50% 315,50%,50% 320,50%,50% 325,50%,50% 330,50%,50% 335,50%,50% 340,50%,50% 345,50%,50% 350,50%,50% 355,50%,50% 0,25%,50% 5,25%,50% 10,25%,50% 15,25%,50% 20,25%,50% 25,25%,50% 30,25%,50% 35,25%,50% 40,25%,50% 45,25%,50% 50,25%,50% 55,25%,50% 60,25%,50% 65,25%,50% 70,25%,50% 75,25%,50% 80,25%,50% 85,25%,50% 90,25%,50% 95,25%,50% 100,25%,50% 105,25%,50% 110,25%,50% 115,25%,50% 120,25%,50% 125,25%,50% 130,25%,50% 135,25%,50% 140,25%,50% 145,25%,50% 150,25%,50% 155,25%,50% 160,25%,50% 165,25%,50% 170,25%,50% 175,25%,50% 180,25%,50% 185,25%,50% 190,25%,50% 195,25%,50% 200,25%,50% 205,25%,50% 210,25%,50% 215,25%,50% 220,25%,50% 225,25%,50% 230,25%,50% 235,25%,50% 240,25%,50% 245,25%,50% 250,25%,50% 255,25%,50% 260,25%,50% 265,25%,50% 270,25%,50% 275,25%,50% 280,25%,50% 285,25%,50% 290,25%,50% 295,25%,50% 300,25%,50% 305,25%,50% 310,25%,50% 315,25%,50% 320,25%,50% 325,25%,50% 330,25%,50% 335,25%,50% 340,25%,50% 345,25%,50% 350,25%,50% 355,25%,50%

Decreasing Lightness

In this second chart, each column uses a different lightness value (but saturation remains at 100%).

Click on an HSL value to open that color and its code in an online editor.

0,100%,80% 5,100%,80% 10,100%,80% 15,100%,80% 20,100%,80% 25,100%,80% 30,100%,80% 35,100%,80% 40,100%,80% 45,100%,80% 50,100%,80% 55,100%,80% 60,100%,80% 65,100%,80% 70,100%,80% 75,100%,80% 80,100%,80% 85,100%,80% 90,100%,80% 95,100%,80% 100,100%,80% 105,100%,80% 110,100%,80% 115,100%,80% 120,100%,80% 125,100%,80% 130,100%,80% 135,100%,80% 140,100%,80% 145,100%,80% 150,100%,80% 155,100%,80% 160,100%,80% 165,100%,80% 170,100%,80% 175,100%,80% 180,100%,80% 185,100%,80% 190,100%,80% 195,100%,80% 200,100%,80% 205,100%,80% 210,100%,80% 215,100%,80% 220,100%,80% 225,100%,80% 230,100%,80% 235,100%,80% 240,100%,80% 245,100%,80% 250,100%,80% 255,100%,80% 260,100%,80% 265,100%,80% 270,100%,80% 275,100%,80% 280,100%,80% 285,100%,80% 290,100%,80% 295,100%,80% 300,100%,80% 305,100%,80% 310,100%,80% 315,100%,80% 320,100%,80% 325,100%,80% 330,100%,80% 335,100%,80% 340,100%,80% 345,100%,80% 350,100%,80% 355,100%,80% 0,100%,60% 5,100%,60% 10,100%,60% 15,100%,60% 20,100%,60% 25,100%,60% 30,100%,60% 35,100%,60% 40,100%,60% 45,100%,60% 50,100%,60% 55,100%,60% 60,100%,60% 65,100%,60% 70,100%,60% 75,100%,60% 80,100%,60% 85,100%,60% 90,100%,60% 95,100%,60% 100,100%,60% 105,100%,60% 110,100%,60% 115,100%,60% 120,100%,60% 125,100%,60% 130,100%,60% 135,100%,60% 140,100%,60% 145,100%,60% 150,100%,60% 155,100%,60% 160,100%,60% 165,100%,60% 170,100%,60% 175,100%,60% 180,100%,60% 185,100%,60% 190,100%,60% 195,100%,60% 200,100%,60% 205,100%,60% 210,100%,60% 215,100%,60% 220,100%,60% 225,100%,60% 230,100%,60% 235,100%,60% 240,100%,60% 245,100%,60% 250,100%,60% 255,100%,60% 260,100%,60% 265,100%,60% 270,100%,60% 275,100%,60% 280,100%,60% 285,100%,60% 290,100%,60% 295,100%,60% 300,100%,60% 305,100%,60% 310,100%,60% 315,100%,60% 320,100%,60% 325,100%,60% 330,100%,60% 335,100%,60% 340,100%,60% 345,100%,60% 350,100%,60% 355,100%,60% 0,100%,40% 5,100%,40% 10,100%,40% 15,100%,40% 20,100%,40% 25,100%,40% 30,100%,40% 35,100%,40% 40,100%,40% 45,100%,40% 50,100%,40% 55,100%,40% 60,100%,40% 65,100%,40% 70,100%,40% 75,100%,40% 80,100%,40% 85,100%,40% 90,100%,40% 95,100%,40% 100,100%,40% 105,100%,40% 110,100%,40% 115,100%,40% 120,100%,40% 125,100%,40% 130,100%,40% 135,100%,40% 140,100%,40% 145,100%,40% 150,100%,40% 155,100%,40% 160,100%,40% 165,100%,40% 170,100%,40% 175,100%,40% 180,100%,40% 185,100%,40% 190,100%,40% 195,100%,40% 200,100%,40% 205,100%,40% 210,100%,40% 215,100%,40% 220,100%,40% 225,100%,40% 230,100%,40% 235,100%,40% 240,100%,40% 245,100%,40% 250,100%,40% 255,100%,40% 260,100%,40% 265,100%,40% 270,100%,40% 275,100%,40% 280,100%,40% 285,100%,40% 290,100%,40% 295,100%,40% 300,100%,40% 305,100%,40% 310,100%,40% 315,100%,40% 320,100%,40% 325,100%,40% 330,100%,40% 335,100%,40% 340,100%,40% 345,100%,40% 350,100%,40% 355,100%,40% 0,100%,20% 5,100%,20% 10,100%,20% 15,100%,20% 20,100%,20% 25,100%,20% 30,100%,20% 35,100%,20% 40,100%,20% 45,100%,20% 50,100%,20% 55,100%,20% 60,100%,20% 65,100%,20% 70,100%,20% 75,100%,20% 80,100%,20% 85,100%,20% 90,100%,20% 95,100%,20% 100,100%,20% 105,100%,20% 110,100%,20% 115,100%,20% 120,100%,20% 125,100%,20% 130,100%,20% 135,100%,20% 140,100%,20% 145,100%,20% 150,100%,20% 155,100%,20% 160,100%,20% 165,100%,20% 170,100%,20% 175,100%,20% 180,100%,20% 185,100%,20% 190,100%,20% 195,100%,20% 200,100%,20% 205,100%,20% 210,100%,20% 215,100%,20% 220,100%,20% 225,100%,20% 230,100%,20% 235,100%,20% 240,100%,20% 245,100%,20% 250,100%,20% 255,100%,20% 260,100%,20% 265,100%,20% 270,100%,20% 275,100%,20% 280,100%,20% 285,100%,20% 290,100%,20% 295,100%,20% 300,100%,20% 305,100%,20% 310,100%,20% 315,100%,20% 320,100%,20% 325,100%,20% 330,100%,20% 335,100%,20% 340,100%,20% 345,100%,20% 350,100%,20% 355,100%,20%

Reducing Saturation with Increased Lightness

This chart is the same as the first chart (where we adjust the saturation, while keeping the lightness at 50%), but in this one we increase the lightness to 75%.

Click on an HSL value to open that color and its code in an online editor.

0,100%,75% 5,100%,75% 10,100%,75% 15,100%,75% 20,100%,75% 25,100%,75% 30,100%,75% 35,100%,75% 40,100%,75% 45,100%,75% 50,100%,75% 55,100%,75% 60,100%,75% 65,100%,75% 70,100%,75% 75,100%,75% 80,100%,75% 85,100%,75% 90,100%,75% 95,100%,75% 100,100%,75% 105,100%,75% 110,100%,75% 115,100%,75% 120,100%,75% 125,100%,75% 130,100%,75% 135,100%,75% 140,100%,75% 145,100%,75% 150,100%,75% 155,100%,75% 160,100%,75% 165,100%,75% 170,100%,75% 175,100%,75% 180,100%,75% 185,100%,75% 190,100%,75% 195,100%,75% 200,100%,75% 205,100%,75% 210,100%,75% 215,100%,75% 220,100%,75% 225,100%,75% 230,100%,75% 235,100%,75% 240,100%,75% 245,100%,75% 250,100%,75% 255,100%,75% 260,100%,75% 265,100%,75% 270,100%,75% 275,100%,75% 280,100%,75% 285,100%,75% 290,100%,75% 295,100%,75% 300,100%,75% 305,100%,75% 310,100%,75% 315,100%,75% 320,100%,75% 325,100%,75% 330,100%,75% 335,100%,75% 340,100%,75% 345,100%,75% 350,100%,75% 355,100%,75% 0,75%,75% 5,75%,75% 10,75%,75% 15,75%,75% 20,75%,75% 25,75%,75% 30,75%,75% 35,75%,75% 40,75%,75% 45,75%,75% 50,75%,75% 55,75%,75% 60,75%,75% 65,75%,75% 70,75%,75% 75,75%,75% 80,75%,75% 85,75%,75% 90,75%,75% 95,75%,75% 100,75%,75% 105,75%,75% 110,75%,75% 115,75%,75% 120,75%,75% 125,75%,75% 130,75%,75% 135,75%,75% 140,75%,75% 145,75%,75% 150,75%,75% 155,75%,75% 160,75%,75% 165,75%,75% 170,75%,75% 175,75%,75% 180,75%,75% 185,75%,75% 190,75%,75% 195,75%,75% 200,75%,75% 205,75%,75% 210,75%,75% 215,75%,75% 220,75%,75% 225,75%,75% 230,75%,75% 235,75%,75% 240,75%,75% 245,75%,75% 250,75%,75% 255,75%,75% 260,75%,75% 265,75%,75% 270,75%,75% 275,75%,75% 280,75%,75% 285,75%,75% 290,75%,75% 295,75%,75% 300,75%,75% 305,75%,75% 310,75%,75% 315,75%,75% 320,75%,75% 325,75%,75% 330,75%,75% 335,75%,75% 340,75%,75% 345,75%,75% 350,75%,75% 355,75%,75% 0,50%,75% 5,50%,75% 10,50%,75% 15,50%,75% 20,50%,75% 25,50%,75% 30,50%,75% 35,50%,75% 40,50%,75% 45,50%,75% 50,50%,75% 55,50%,75% 60,50%,75% 65,50%,75% 70,50%,75% 75,50%,75% 80,50%,75% 85,50%,75% 90,50%,75% 95,50%,75% 100,50%,75% 105,50%,75% 110,50%,75% 115,50%,75% 120,50%,75% 125,50%,75% 130,50%,75% 135,50%,75% 140,50%,75% 145,50%,75% 150,50%,75% 155,50%,75% 160,50%,75% 165,50%,75% 170,50%,75% 175,50%,75% 180,50%,75% 185,50%,75% 190,50%,75% 195,50%,75% 200,50%,75% 205,50%,75% 210,50%,75% 215,50%,75% 220,50%,75% 225,50%,75% 230,50%,75% 235,50%,75% 240,50%,75% 245,50%,75% 250,50%,75% 255,50%,75% 260,50%,75% 265,50%,75% 270,50%,75% 275,50%,75% 280,50%,75% 285,50%,75% 290,50%,75% 295,50%,75% 300,50%,75% 305,50%,75% 310,50%,75% 315,50%,75% 320,50%,75% 325,50%,75% 330,50%,75% 335,50%,75% 340,50%,75% 345,50%,75% 350,50%,75% 355,50%,75% 0,25%,75% 5,25%,75% 10,25%,75% 15,25%,75% 20,25%,75% 25,25%,75% 30,25%,75% 35,25%,75% 40,25%,75% 45,25%,75% 50,25%,75% 55,25%,75% 60,25%,75% 65,25%,75% 70,25%,75% 75,25%,75% 80,25%,75% 85,25%,75% 90,25%,75% 95,25%,75% 100,25%,75% 105,25%,75% 110,25%,75% 115,25%,75% 120,25%,75% 125,25%,75% 130,25%,75% 135,25%,75% 140,25%,75% 145,25%,75% 150,25%,75% 155,25%,75% 160,25%,75% 165,25%,75% 170,25%,75% 175,25%,75% 180,25%,75% 185,25%,75% 190,25%,75% 195,25%,75% 200,25%,75% 205,25%,75% 210,25%,75% 215,25%,75% 220,25%,75% 225,25%,75% 230,25%,75% 235,25%,75% 240,25%,75% 245,25%,75% 250,25%,75% 255,25%,75% 260,25%,75% 265,25%,75% 270,25%,75% 275,25%,75% 280,25%,75% 285,25%,75% 290,25%,75% 295,25%,75% 300,25%,75% 305,25%,75% 310,25%,75% 315,25%,75% 320,25%,75% 325,25%,75% 330,25%,75% 335,25%,75% 340,25%,75% 345,25%,75% 350,25%,75% 355,25%,75%

Decreasing Lightness with Reduced Saturation

This chart is the same as the second chart (where we adjust the lightness, while keeping full saturation), but in this one we reduce the saturation to 50%.

Click on an HSL value to open that color and its code in an online editor.

0,50%,80% 5,50%,80% 10,50%,80% 15,50%,80% 20,50%,80% 25,50%,80% 30,50%,80% 35,50%,80% 40,50%,80% 45,50%,80% 50,50%,80% 55,50%,80% 60,50%,80% 65,50%,80% 70,50%,80% 75,50%,80% 80,50%,80% 85,50%,80% 90,50%,80% 95,50%,80% 100,50%,80% 105,50%,80% 110,50%,80% 115,50%,80% 120,50%,80% 125,50%,80% 130,50%,80% 135,50%,80% 140,50%,80% 145,50%,80% 150,50%,80% 155,50%,80% 160,50%,80% 165,50%,80% 170,50%,80% 175,50%,80% 180,50%,80% 185,50%,80% 190,50%,80% 195,50%,80% 200,50%,80% 205,50%,80% 210,50%,80% 215,50%,80% 220,50%,80% 225,50%,80% 230,50%,80% 235,50%,80% 240,50%,80% 245,50%,80% 250,50%,80% 255,50%,80% 260,50%,80% 265,50%,80% 270,50%,80% 275,50%,80% 280,50%,80% 285,50%,80% 290,50%,80% 295,50%,80% 300,50%,80% 305,50%,80% 310,50%,80% 315,50%,80% 320,50%,80% 325,50%,80% 330,50%,80% 335,50%,80% 340,50%,80% 345,50%,80% 350,50%,80% 355,50%,80% 0,50%,60% 5,50%,60% 10,50%,60% 15,50%,60% 20,50%,60% 25,50%,60% 30,50%,60% 35,50%,60% 40,50%,60% 45,50%,60% 50,50%,60% 55,50%,60% 60,50%,60% 65,50%,60% 70,50%,60% 75,50%,60% 80,50%,60% 85,50%,60% 90,50%,60% 95,50%,60% 100,50%,60% 105,50%,60% 110,50%,60% 115,50%,60% 120,50%,60% 125,50%,60% 130,50%,60% 135,50%,60% 140,50%,60% 145,50%,60% 150,50%,60% 155,50%,60% 160,50%,60% 165,50%,60% 170,50%,60% 175,50%,60% 180,50%,60% 185,50%,60% 190,50%,60% 195,50%,60% 200,50%,60% 205,50%,60% 210,50%,60% 215,50%,60% 220,50%,60% 225,50%,60% 230,50%,60% 235,50%,60% 240,50%,60% 245,50%,60% 250,50%,60% 255,50%,60% 260,50%,60% 265,50%,60% 270,50%,60% 275,50%,60% 280,50%,60% 285,50%,60% 290,50%,60% 295,50%,60% 300,50%,60% 305,50%,60% 310,50%,60% 315,50%,60% 320,50%,60% 325,50%,60% 330,50%,60% 335,50%,60% 340,50%,60% 345,50%,60% 350,50%,60% 355,50%,60% 0,50%,40% 5,50%,40% 10,50%,40% 15,50%,40% 20,50%,40% 25,50%,40% 30,50%,40% 35,50%,40% 40,50%,40% 45,50%,40% 50,50%,40% 55,50%,40% 60,50%,40% 65,50%,40% 70,50%,40% 75,50%,40% 80,50%,40% 85,50%,40% 90,50%,40% 95,50%,40% 100,50%,40% 105,50%,40% 110,50%,40% 115,50%,40% 120,50%,40% 125,50%,40% 130,50%,40% 135,50%,40% 140,50%,40% 145,50%,40% 150,50%,40% 155,50%,40% 160,50%,40% 165,50%,40% 170,50%,40% 175,50%,40% 180,50%,40% 185,50%,40% 190,50%,40% 195,50%,40% 200,50%,40% 205,50%,40% 210,50%,40% 215,50%,40% 220,50%,40% 225,50%,40% 230,50%,40% 235,50%,40% 240,50%,40% 245,50%,40% 250,50%,40% 255,50%,40% 260,50%,40% 265,50%,40% 270,50%,40% 275,50%,40% 280,50%,40% 285,50%,40% 290,50%,40% 295,50%,40% 300,50%,40% 305,50%,40% 310,50%,40% 315,50%,40% 320,50%,40% 325,50%,40% 330,50%,40% 335,50%,40% 340,50%,40% 345,50%,40% 350,50%,40% 355,50%,40% 0,50%,20% 5,50%,20% 10,50%,20% 15,50%,20% 20,50%,20% 25,50%,20% 30,50%,20% 35,50%,20% 40,50%,20% 45,50%,20% 50,50%,20% 55,50%,20% 60,50%,20% 65,50%,20% 70,50%,20% 75,50%,20% 80,50%,20% 85,50%,20% 90,50%,20% 95,50%,20% 100,50%,20% 105,50%,20% 110,50%,20% 115,50%,20% 120,50%,20% 125,50%,20% 130,50%,20% 135,50%,20% 140,50%,20% 145,50%,20% 150,50%,20% 155,50%,20% 160,50%,20% 165,50%,20% 170,50%,20% 175,50%,20% 180,50%,20% 185,50%,20% 190,50%,20% 195,50%,20% 200,50%,20% 205,50%,20% 210,50%,20% 215,50%,20% 220,50%,20% 225,50%,20% 230,50%,20% 235,50%,20% 240,50%,20% 245,50%,20% 250,50%,20% 255,50%,20% 260,50%,20% 265,50%,20% 270,50%,20% 275,50%,20% 280,50%,20% 285,50%,20% 290,50%,20% 295,50%,20% 300,50%,20% 305,50%,20% 310,50%,20% 315,50%,20% 320,50%,20% 325,50%,20% 330,50%,20% 335,50%,20% 340,50%,20% 345,50%,20% 350,50%,20% 355,50%,20%