What is this site for?

To provide quick references for web designers who are looking for series of "equal" colors in different hue or saturation.

The HSL (Hue, Saturation & Luminosity) colors on this site are different from the CSS3 HSL/HSLA colors in which the "L" refers to Lightness (Luminance) or Brightness.

In short, our HSL colors are generated by applying luminosity masks to HSB colors in Adobe Photoshop to eliminate the "B" factor. To see the actual difference between the two, please check the chart HSL Color vs HSB Color–A and HSL Color vs HSB Color–B.

HSL Color vs HSB Color – A

HSL vs HSB / Saturation=10

10	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
10	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90

HSL vs HSB / Saturation=20

20	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
20	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90

HSL vs HSB / Saturation=30

30	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
30	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90

HSL vs HSB / Saturation=40

40	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
40	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90

HSL vs HSB / Saturation=50

50	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
50	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90

HSL vs HSB / Saturation=60

60	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
60	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90

HSL vs HSB / Saturation=70

70	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
70	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90

HSL vs HSB / Saturation=80

80	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
80	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90

HSL vs HSB / Saturation=90

90	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
90	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90

HSL vs HSB / Saturation=100

100	H=0		20		40		60		80		100		120		140		160		180		200		220		240		260		280		300		320		340
100	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB	HSL	HSB
L=10
20
30
40
50
60
70
80
90