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%