The Color Cone
Variant of the HSL model


RGB color space, a cartesian (XYZ) representation of colors
A color space which is described using an orthogonal 3D coordinate system, like in the RGB color space, with the three axis for the brightness values for Red, Green and Blue, is an effective way to define a particular color.
HSL, a polar (spherical) representation of colors
However a more intuitive way to decribe the colors is to arrange them by color (Hue), color intensity (Saturation), and how much white or black has been mixed into the color (Luminance).

The colors are are arranged along a circle reflecting the cyclic nature of the perceived color spectrum. The colors are therefore indicated with the attribute Hue in degrees ranging from 0° to 360°.

The Luminance is in this model a relative measure of whiteness. Because it is relative to the absolute luminance of a white point Luminance is ranging from 0 to 1.

The Saturation is a measure of color intensity it is ranging from 0 to 1.
The maximum value of Saturation is depending on the value for Luminance as illustrated in the righthand figure below.

Please note
In the HTML code language the RGB color values are expressed in integer decimal or integer hexadecimal numbers.
The color values in the HSL model are expressed in real numbers, meaning that it also covers all the color values in between the RGB integer color values.

Moreover if we use a granular HSL model in which both the Luminance and the Saturation are expressed in multiple units of 0.01 and the Hue in integer values for degrees, these values will not exactly correspond with the integer RGB values. So the possibilities to identify the proper integer RGB values in the examples of the color sequences according to the HSL model as shown below are limited.

In practice approximations are used in the calculations to convert HSL color values into RGB color values and vice versa. The introduced color differences are distinguishable for systems which uses a color resolution or color depth beyond 24-bit (true color). But these color difference are indistinguishable for the human eye which can discrminate up to ten million color variations which is less then 224 which is equal to 16,772,216.
A 24-bit color depth is used by every personal computer and phone display. With a 24-bit color depth all the integer RGB values are covered.





Examples of the Color Wheel color sequence for various values of Luminance and Saturation
Hue from 0° to 360°

Lum = 0.06
Sat = 0.12
Lum = 0.18
Sat = 0.35
Lum = 0.29
Sat = 0.59
Lum = 0.41
Sat = 0.82
Lum = 0.5
Sat = 1
Lum = 0.5
Sat = 0.29
Lum = 0.59
Sat = 0.82
Lum = 0.71
Sat = 0.59
Lum = 0.82
Sat = 0.35
Lum = 0.94
Sat = 0.12
Hue in DegreesRGB CodeRGB CodeRGB CodeRGB CodeRGB CodeRGB CodeRGB CodeRGB CodeRGB CodeRGB Code
0011E00005A0000960000D20000FF0000A54B4BFF2D2DFF6969FFA5A5FFE1E1
0021E02005A0600960A00D20E00FF1100A5514BFF3B2DFF7369FFABA5FFE3E1
0031E04005A0C00961400D21C00FF2200A5574BFF492DFF7D69FFB1A5FFE5E1
00412°1E06005A1200961E00D22A00FF3300A55D4BFF572DFF8769FFB7A5FFE7E1
00516°1E08005A1800962800D23800FF4400A5634BFF652DFF9169FFBDA5FFE9E1
00620°1E0A005A1E00963200D24600FF5500A5694BFF732DFF9B69FFC3A5FFEBE1
00724°1E0C005A2400963C00D25400FF6600A56F4BFF812DFFA569FFC9A5FFEDE1
00828°1E0E005A2A00964600D26200FF7700A5754BFF8F2DFFAF69FFCFA5FFEFE1
00932°1E10005A3000965000D27000FF8800A57B4BFF9D2DFFB969FFD5A5FFF1E1
01036°1E12005A3600965A00D27E00FF9900A5814BFFAB2DFFC369FFDBA5FFF3E1
01140°1E14005A3C00966400D28C00FFAA00A5874BFFB92DFFCD69FFE1A5FFF5E1
01244°1E16005A4200966E00D29A00FFBB00A58D4BFFC72DFFD769FFE7A5FFF7E1
01348°1E18005A4800967800D2A800FFCC00A5934BFFD52DFFE169FFEDA5FFF9E1
01452°1E1A005A4E00968200D2B600FFDD00A5994BFFE32DFFEB69FFF3A5FFFBE1
01556°1E1C005A5400968C00D2C400FFEE00A59F4BFFF12DFFF569FFF9A5FFFDE1
01660°1E1E005A5A00969600D2D200FFFF00A5A54BFFFF2DFFFF69FFFFA5FFFFE1
01764°1C1E00545A008C9600C4D200EEFF009FA54BF1FF2DF5FF69F9FFA5FDFFE1
01868°1A1E004E5A00829600B6D200DDFF0099A54BE3FF2DEBFF69F3FFA5FBFFE1
01972°181E00485A00789600A8D200CCFF0093A54BD5FF2DE1FF69EDFFA5F9FFE1
02076°161E00425A006E96009AD200BBFF008DA54BC7FF2DD7FF69E7FFA5F7FFE1
02180°141E003C5A006496008CD200AAFF0087A54BB9FF2DCDFF69E1FFA5F5FFE1
02284°121E00365A005A96007ED20099FF0081A54BABFF2DC3FF69DBFFA5F3FFE1
02388°101E00305A0050960070D20088FF007BA54B9DFF2DB9FF69D5FFA5F1FFE1
02492°0E1E002A5A0046960062D20077FF0075A54B8FFF2DAFFF69CFFFA5EFFFE1
02596°0C1E00245A003C960054D20066FF006FA54B81FF2DA5FF69C9FFA5EDFFE1
026100°0A1E001E5A0032960046D20055FF0069A54B73FF2D9BFF69C3FFA5EBFFE1
027104°081E00185A0028960038D20044FF0063A54B65FF2D91FF69BDFFA5E9FFE1
028108°061E00125A001E96002AD20033FF005DA54B57FF2D87FF69B7FFA5E7FFE1
029112°041E000C5A001496001CD20022FF0057A54B49FF2D7DFF69B1FFA5E5FFE1
030116°021E00065A000A96000ED20011FF0051A54B3BFF2D73FF69ABFFA5E3FFE1
031120°001E00005A0000960000D20000FF004BA54B2DFF2D69FF4BA5FFA5E1FFE1
032124°001E02005A0600960A00D20E00FF114BA5512DFF3B69FF73A5FFABE1FFE3
033128°001E04005A0C00961400D21C00FF224BA5572DFF4969FF7DA5FFB1E1FFE5
034132°001E06005A1200961E00D22A00FF334BA55D2DFF5769FF87A5FFB7E1FFE7
035136°001E08005A1800962800D23800FF444BA5632DFF6569FF91A5FFBDE1FFE9
036140°001E0A005A1E00963200D24600FF554BA5692DFF7369FF9BA5FFC3E1FFEB
037144°001E0C005A2400963C00D25400FF664BA56F2DFF8169FFA5A5FFC9E1FFED
038148°001E0E005A2A00964600D26200FF774BA5752DFF8F69FFAFA5FFCFE1FFEF
039152°001E10005A3000965000D27000FF884BA57B2DFF9D69FFB9A5FFD5E1FFF1
040156°001E12005A3600965A00D27E00FF994BA5812DFFAB69FFC3A5FFDBE1FFF3
041160°001E14005A3C00966400D28C00FFAA4BA5872DFFB969FFCDA5FFE1E1FFF5
042164°001E16005A4200966E00D29A00FFBB4BA58D2DFFC769FFD7A5FFE7E1FFF7
043168°001E18005A4800967800D2A800FFCC4BA5932DFFD569FFE1A5FFEDE1FFF9
044172°001E1A005A4E00968200D2B600FFDD4BA5992DFFE369FFEBA5FFF3E1FFFB
045176°001E1C005A5400968C00D2C400FFEE4BA59F2DFFF169FFF5A5FFF9E1FFFD
046180°001E1E005A5A00969600D2D200FFFF4BA5A52DFFFF69FFFFA5FFFFE1FFFF
047184°001C1E00725A008C9600C4D200EEFF4B9FA52DF1FF69F5FFA5F9FFE1FDFF
048188°001A1E006C5A00829600B6D200DDFF4B99A52DE3FF69EBFFA5F3FFE1FBFF
049192°00181E00665A00789600A8D200CCFF4B93A52DD5FF69E1FFA5EDFFE1F9FF
050196°00161E00605A006E96009AD200BBFF4B8DA52DC7FF69D7FFA5E7FFE1F7FF
051200°00141E005A5A006496008CD200AAFF4B87A52DB9FF69CDFFA5E1FFE1F5FF
052204°00121E00545A005A96007ED20099FF4B81A52DABFF69C3FFA5DBFFE1F3FF
053208°00101E004E5A0050960070D20088FF4B7BA52D9DFF69B9FFA5D5FFE1F1FF
054212°000E1E00485A0046960062D20077FF4B75A52D8FFF69AFFFA5CFFFE1EFFF
055216°000C1E00425A003C960054D20066FF4B6FA52D81FF69A5FFA5C9FFE1EDFF
056220°000A1E003C5A0032960046D20055FF4B69A52D73FF699BFFA5C3FFE1EBFF
057224°00081E00365A0028960038D20044FF4B63A52D65FF6991FFA5BDFFE1E9FF
058228°00061E00305A001E96002AD20033FF4B5DA52D57FF6987FFA5B7FFE1E7FF
059232°00041E002A5A001496001CD20022FF4B57A52D49FF697DFFA5B1FFE1E5FF
060236°00021E00245A000A96000ED20011FF4B51A52D3BFF6973FFA5ABFFE1E3FF
061240°00001E001E5A0000960000D20000FF4B4BA52D2DFF6969FFA5A5FFE1E1FF
062244°02001E08005A0A00960E00D21100FF514BA53B2DFF7369FFABA5FFE3E1FF
063248°04001E10005A1400961C00D22200FF574BA5492DFF7D69FFB1A5FFE5E1FF
064252°06001E12005A1E00962A00D23300FF5D4BA5572DFF8769FFB7A5FFE7E1FF
065256°08001E18005A2800963800D24400FF634BA5652DFF9169FFBDA5FFE9E1FF
066260°0A001E1E005A3200964600D25500FF694BA5732DFF9B69FFC3A5FFEBE1FF
067264°0C001E24005A3C00965400D26600FF6F4BA5812DFFA569FFC9A5FFEDE1FF
068268°0E001E2A005A4600966200D27700FF754BA58F2DFFAF69FFCFA5FFEFE1FF
069272°10001E30005A5000967000D28800FF7B4BA59D2DFFB969FFD5A5FFF1E1FF
070276°12001E36005A5A00967E00D29900FF814BA5AB2DFFC369FFDBA5FFF3E1FF
071280°14001E3C005A6400968C00D2AA00FF874BA5B92DFFCD69FFE1A5FFF5E1FF
072284°16001E42005A6E00969A00D2BB00FF8D4BA5C72DFFD769FFE7A5FFF7E1FF
073288°18001E48005A780096A800D2CC00FF934BA5D52DFFE169FFEDA5FFF9E1FF
074292°1A001E4E005A820096B600D2DD00FF994BA5E32DFFEB69FFF3A5FFFBE1FF
075296°1C001E54005A8C0096C400D2EE00FF9F4BA5F12DFFF569FFF9A5FFFDE1FF
076300°1E001E5A005A960096D200D2FF00FFA54BA5FF2DFFFF69FFFFA5FFFFE1FF
077304°1E001C5A005496008CD200C4FF00EEA54B9FFF2DF1FF69F5FFA5F9FFE1FD
078308°1E001A5A004E960082D200B6FF00DDA54B99FF2DE3FF69EBFFA5F3FFE1FB
079312°1E00185A0048960078D200A8FF00CCA54B93FF2DD5FF69E1FFA5EDFFE1F9
080316°1E00165A004296006ED2009AFF00BBA54B8DFF2DC7FF69D7FFA5E7FFE1F7
081320°1E00145A003C960064D2008CFF00AAA54B87FF2DB9FF69CDFFA5E1FFE1F5
082324°1E00125A003696005AD2007EFF0099A54B81FF2DABFF69C3FFA5DBFFE1F3
083328°1E00105A0030960050D20070FF0088A54B7BFF2D9DFF69B9FFA5D5FFE1F1
084332°1E000E5A002A960046D20062FF0077A54B75FF2D8FFF69AFFFA5CFFFE1EF
085336°1E000C5A002496003CD20054FF0066A54B6FFF2D81FF69A5FFA5C9FFE1ED
086340°1E000A5A001E960032D20046FF0055A54B69FF2D73FF699BFFA5C3FFE1EB
087344°1E000B5A0018960028D20038FF0044A54B63FF2D65FF6991FFA5BDFFE1E9
088348°1E00065A001296001ED2002AFF0033A54B5DFF2D57FF6987FFA5B7FFE1E7
089352°1E00045A000C960014D2001CFF0022A54B57FF2D49FF697DFFA5B1FFE1E5
090356°1E00025A000696000AD2000EFF0011A54B51FF2D3BFF6973FFA5ABFFE1E3
091360°1E00005A0000960000D20000FF0000A54B4BFF2D2DFF6969FFA5A5FFE1E1




Luminance and Saturation for Hue = 0° (Red)

FF0000
F00000 F80808 FF0F0F
D20000 E10F0F E91717 F01E1E FF2D2D
B40000 C30F0F D21E1E DA2626 E12D2D F03C3C FF4B4B
960000 A50F0F B41E1E C32D2D CB3535 D23C3C E14B4B F05A5A FF6969
780000 870F0F 961E1E A52D2D B43C3C BC4444 C34B4B D25A5A E16969 F07878 FF8787
5A0000 690F0F 781E1E 872D2D 963C3C A54B4B AD5353 B45A5A C36969 D27878 E18787 F09696 FFA5A5
3C0000 4B0F0F 5A1E1E 692D2D 783C3C 874B4B 965A5A 9E6262 A56969 B47878 C38787 D29696 E1A5A5 F0B4B4 FFC3C3
1E0000 2D0F0F 3C1E1E 4B2D2D 5A3C3C 694B4B 785A5A 876969 8F7171 967878 A58787 B49696 C3A5A5 D2B4B4 E1C3C3 F0D2D2 FFE1E1
000000 0F0F0F 1E1E1E 2D2D2D 3C3C3C 4B4B4B 5A5A5A 696969 787878 808080 878787 969696 A5A5A5 B4B4B4 C3C3C3 D2D2D2 E1E1E1 F0F0F0 FFFFFF
0
1
15
2
30
3
45
4
60
5
75
6
90
7
105
8
120
9
>128<
>10<
135
11
150
12
165
13
180
14
195
15
210
16
225
17
240
18
255
19




Luminance and Saturation for Hue = 60° (Yellow)

FFFF00
F0F000 F8F808 FFFF0F
D2D200 E1E10F E9E917 F0F01E FFFF2D
B4B400 C3C30F D2D21E DADA26 E1E12D F0F03C FFFF4B
969600 A5A50F B4B41E C3C32D CBCB35 D2D23C E1E14B F0F05A FFFF69
787800 87870F 96961E A5A52D B4B43C BCBC44 C3C34B D2D25A E1E169 F0F078 FFFF87
5A5A00 69690F 78781E 87872D 96963C A5A54B ADAD53 B4B45A C3C369 D2D278 E1E187 F0F096 FFFFA5
3C3C00 4B4B0F 5A5A1E 69692D 78783C 87874B 96965A 9E9E62 A5A569 B4B478 C3C387 D2D296 E1E1A5 F0F0B4 FFFFC3
1E1E00 2D2D0F 3C3C1E 4B4B2D 5A5A3C 69694B 78785A 878769 8F8F71 969678 A5A587 B4B496 C3C3A5 D2D2B4 E1E1C3 F0F0D2 FFFFE1
000000 0F0F0F 1E1E1E 2D2D2D 3C3C3C 4B4B4B 5A5A5A 696969 787878 808080 878787 969696 A5A5A5 B4B4B4 C3C3C3 D2D2D2 E1E1E1 F0F0F0 FFFFFF
0
1
15
2
30
3
45
4
60
5
75
6
90
7
105
8
120
9
>128<
>10<
135
11
150
12
165
13
180
14
195
15
210
16
225
17
240
18
255
19




Luminance and Saturation for Hue = 120° (Green)

00FF00
00F000 08F808 0FFF0F
00D200 0FE10F 17E917 1EF01E 2DFF2D
00B400 0FC30F 1ED21E 26DA26 2DE12D 3CF03C 4BFF4B
009600 0FA50F 1EB41E 2DC32D 35CB35 3CD23C 4BE14B 5AF05A 69FF69
007800 0F870F 1E961E 2DA52D 3CB43C 44BC44 4BC34B 5AD25A 69E169 78F078 87FF87
005A00 0F690F 1E781E 2D872D 3C963C 4BA54B 53AD53 5AB45A 69C369 78D278 87E187 96F096 A5FFA5
003C00 0F4B0F 1E5A1E 2D692D 3C783C 4B874B 5A965A 629E62 69A569 78B478 87C387 96D296 A5E1A5 B4F0B4 C3FFC3
001E00 0F2D0F 1E3C1E 2D4B2D 3C5A3C 4B694B 5A785A 698769 718F71 789678 87A587 96B496 A5C3A5 B4D2B4 C3E1C3 D2F0D2 E1FFE1
000000 0F0F0F 1E1E1E 2D2D2D 3C3C3C 4B4B4B 5A5A5A 696969 787878 808080 878787 969696 A5A5A5 B4B4B4 C3C3C3 D2D2D2 E1E1E1 F0F0F0 FFFFFF
0
1
15
2
30
3
45
4
60
5
75
6
90
7
105
8
120
9
>128<
>10<
135
11
150
12
165
13
180
14
195
15
210
16
225
17
240
18
255
19




Luminance and Saturation for Hue = 180° (Cyan)

00FFFF
00F0F0 08F8F8 0FFFFF
00D2D2 0FE1E1 17E9E9 1EF0F0 2DFFFF
00B4B4 0FC3C3 1ED2D2 26DADA 2DE1E1 3CF0F0 4BFFFF
009696 0FA5A5 1EB4B4 2DC3C3 35CBCB 3CD2D2 4BE1E1 5AF0F0 69FFFF
007878 0F8787 1E9696 2DA5A5 3CB4B4 44BCBC 4BC3C3 5AD2D2 69E1E1 78F0F0 87FFFF
005A5A 0F6969 1E7878 2D8787 3C9696 4BA5A5 53ADAD 5AB4B4 69C3C3 78D2D2 87E1E1 96F0F0 A5FFFF
003C3C 0F4B4B 1E5A5A 2D6969 3C7878 4B8787 5A9696 629E9E 69A5A5 78B4B4 87C3C3 96D2D2 A5E1E1 B4F0F0 C3FFFF
001E1E 0F2D2D 1E3C3C 2D4B4B 3C5A5A 4B6969 5A7878 698787 718F8F 789696 87A5A5 96B4B4 A5C3C3 B4D2D2 C3E1E1 D2F0F0 E1FFFF
000000 0F0F0F 1E1E1E 2D2D2D 3C3C3C 4B4B4B 5A5A5A 696969 787878 808080 878787 969696 A5A5A5 B4B4B4 C3C3C3 D2D2D2 E1E1E1 F0F0F0 FFFFFF
0
1
15
2
30
3
45
4
60
5
75
6
90
7
105
8
120
9
>128<
>10<
135
11
150
12
165
13
180
14
195
15
210
16
225
17
240
18
255
19




Luminance and Saturation for Hue = 240° (Blue)

0000FF
0000F0 0808F8 0F0FFF
0000D2 0F0FE1 1717E9 1E1EF0 2D2DFF
0000B4 0F0FC3 1E1ED2 2626DA 2D2DE1 3C3CF0 4B4BFF
000096 0F0FA5 1E1EB4 2D2DC3 3535CB 3C3CD2 4B4BE1 5A5AF0 6969FF
000078 0F0F87 1E1E96 2D2DA5 3C3CB4 4444BC 4B4BC3 5A5AD2 6969E1 7878F0 8787FF
00005A 0F0F69 1E1E78 2D2D87 3C3C96 4B4BA5 5353AD 5A5AB4 6969C3 7878D2 8787E1 9696F0 A5A5FF
00003C 0F0F4B 1E1E5A 2D2D69 3C3C78 4B4B87 5A5A96 62699E 6969A5 7878B4 8787C3 9696D2 A5A5E1 B4B4F0 C3C3FF
00001E 0F0F2D 1E1E3C 2D2D4B 3C3C5A 4B4B69 5A5A78 696987 71718F 787896 8787A5 9696B4 A5A5C3 B4B4D2 C3C3E1 D2D2F0 E1E1FF
000000 0F0F0F 1E1E1E 2D2D2D 3C3C3C 4B4B4B 5A5A5A 696969 787878 808080 878787 969696 A5A5A5 B4B4B4 C3C3C3 D2D2D2 E1E1E1 F0F0F0 FFFFFF
0
1
15
2
30
3
45
4
60
5
75
6
90
7
105
8
120
9
>128<
>10<
135
11
150
12
165
13
180
14
195
15
210
16
225
17
240
18
255
19




Luminance and Saturation for Hue = 300° (Magenta)

FF00FF
F000F0 F808F8 FF0FFF
D200D2 E10FE1 E917E9 F01EF0 FF2DFF
B400B4 C30FC3 D21ED2 DA26DA E12DE1 F03CF0 FF4BFF
960096 A50FA5 B41EB4 C32DC3 CB35CB D23CD2 E14BE1 F05AF0 FF69FF
780078 870F87 961E96 A52DA5 B43CB4 BC44BC C34BC3 D25AD2 E169E1 F078F0 FF87FF
5A005A 690F69 781E78 872D87 963C96 A54BA5 AD53AD B45AB4 C369C3 D278D2 E187E1 F096F0 FFA5FF
3C003C 4B0F4B 5A1E5A 692D69 783C78 874B87 965A96 9E629E A569A5 B478B4 C387C3 D296D2 E1A5E1 F0B4F0 FFC3FF
1E001E 2D0F2D 3C1E3C 4B2D4B 5A3C5A 694B69 785A78 876987 8F718F 967896 A587A5 B496B4 C3A5C3 D2B4D2 E1C3E1 F0D2F0 FFE1FF
000000 0F0F0F 1E1E1E 2D2D2D 3C3C3C 4B4B4B 5A5A5A 696969 787878 808080 878787 969696 A5A5A5 B4B4B4 C3C3C3 D2D2D2 E1E1E1 F0F0F0 FFFFFF
0
1
15
2
30
3
45
4
60
5
75
6
90
7
105
8
120
9
>128<
>10<
135
11
150
12
165
13
180
14
195
15
210
16
225
17
240
18
255
19




Color characteristics: Shade, Tint and Tone




Site Map (the dots at bottom left) |  Change History