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
Hue from 0° to 360°

Luminance = 0.24
Saturation = 0.47
Luminance = 0.5
Saturation = 1
Luminance = 0.5
Saturation = 0.29
Luminance = 0.65
Saturation = 0.71
Luminance = 0.76
Saturation = 0.47
Luminance = 0.94
Saturation = 0.12
Hue in DegreesRGB CodeRGB CodeRGB CodeRGB CodeRGB CodeRGB Code
001780000FF0000A54B4BFF4B4BFF8787FFE1E1
002780800FF1100A5514BFF574BFF8F87FFE3E1
003781000FF2200A5574BFF634BFF9787FFE5E1
00412°781800FF3300A55D4BFF6F4BFF9F87FFE7E1
00516°782000FF4400A5634BFF7B4BFFA787FFE9E1
00620°782800FF5500A5694BFF874BFFAF87FFEBE1
00724°783000FF6600A56F4BFF934BFFB787FFEDE1
00828°783800FF7700A5754BFF9F4BFFBF87FFEFE1
00932°784000FF8800A57B4BFFAB4BFFC787FFF1E1
01036°784800FF9900A5814BFFB74BFFCF87FFF3E1
01140°785000FFAA00A5874BFFC34BFFD787FFF5E1
01244°785800FFBB00A58D4BFFCF4BFFDF87FFF7E1
01348°786000FFCC00A5934BFFDB4BFFE787FFF9E1
01452°786800FFDD00A5994BFFE74BFFEF87FFFBE1
01556°787000FFEE00A59F4BFFF34BFFF787FFFDE1
01660°787800FFFF00A5A54BFFFF4BFFFF87FFFFE1
01764°707800EEFF009FA54BF3FF4BF7FF87FDFFE1
01868°687800DDFF0099A54BE7FF4BEFFF87FBFFE1
01972°607800CCFF0093A54BDBFF4BE7FF87F9FFE1
02076°587800BBFF008DA54BCFFF4BDFFF87F7FFE1
02180°507800AAFF0087A54BC3FF4BD7FF87F5FFE1
02284°48780099FF0081A54BB7FF4BCFFF87F3FFE1
02388°40780088FF007BA54BABFF4BC7FF87F1FFE1
02492°38780077FF0075A54B9FFF4BBFFF87EFFFE1
02596°30780066FF006FA54B93FF4BB7FF87EDFFE1
026100°28780055FF0069A54B87FF4BAFFF87EBFFE1
027104°20780044FF0063A54B7BFF4BA7FF87E9FFE1
028108°18780033FF005DA54B6FFF4B9FFF87E7FFE1
029112°10780022FF0057A54B63FF4B97FF87E5FFE1
030116°08780011FF0051A54B57FF4B8FFF87E3FFE1
031120°00780000FF004BA54B4BFF4B87FF87E1FFE1
032124°00780800FF114BA5514BFF5787FF8FE1FFE3
033128°00781000FF224BA5574BFF6387FF97E1FFE5
034132°00781800FF334BA55D4BFF6F87FF9FE1FFE7
035136°00782000FF444BA5634BFF7B87FFA7E1FFE9
036140°00782800FF554BA5694BFF8787FFAFE1FFEB
037144°00783000FF664BA56F4BFF9387FFB7E1FFED
038148°00783800FF774BA5754BFF9F87FFBFE1FFEF
039152°00784000FF884BA57B4BFFAB87FFC7E1FFF1
040156°00784800FF994BA5814BFFB787FFCFE1FFF3
041160°00785000FFAA4BA5874BFFC387FFD7E1FFF5
042164°00785800FFBB4BA58D4BFFCF87FFDFE1FFF7
043168°00786000FFCC4BA5934BFFDB87FFE7E1FFF9
044172°00786800FFDD4BA5994BFFE787FFEFE1FFFB
045176°00787000FFEE4BA59F4BFFF387FFF7E1FFFD
046180°00787800FFFF4BA5A54BFFFF87FFFFE1FFFF
047184°00707800EEFF4B9FA54BF3FF87F7FFE1FDFF
048188°00687800DDFF4B99A54BE7FF87EFFFE1FBFF
049192°00607800CCFF4B93A54BDBFF87E7FFE1F9FF
050196°00587800BBFF4B8DA54BCFFF87DFFFE1F7FF
051200°00507800AAFF4B87A54BC3FF87D7FFE1F5FF
052204°0048780099FF4B81A54BB7FF87CFFFE1F3FF
053208°0040780088FF4B7BA54BABFF87C7FFE1F1FF
054212°0038780077FF4B75A54B9FFF87BFFFE1EFFF
055216°0030780066FF4B6FA54B93FF87B7FFE1EDFF
056220°0028780055FF4B69A54B87FF87AFFFE1EBFF
057224°0020780044FF4B63A54B7BFF87A7FFE1E9FF
058228°0018780033FF4B5DA54B6FFF879FFFE1E7FF
059232°0010780022FF4B57A54B63FF8797FFE1E5FF
060236°0008780011FF4B51A54B57FF878FFFE1E3FF
061240°0000780000FF4B4BA54B4BFF8787FFE1E1FF
062244°0800781100FF514BA5574BFF8F87FFE3E1FF
063248°1000782200FF574BA5634BFF9787FFE5E1FF
064252°1800783300FF5D4BA56F4BFF9F87FFE7E1FF
065256°2000784400FF634BA57B4BFFA787FFE9E1FF
066260°2800785500FF694BA5874BFFAF87FFEBE1FF
067264°3000786600FF6F4BA5934BFFB787FFEDE1FF
068268°3800787700FF754BA59F4BFFBF87FFEFE1FF
069272°4000788800FF7B4BA5AB4BFFC787FFF1E1FF
070276°4800789900FF814BA5B74BFFCF87FFF3E1FF
071280°500078AA00FF874BA5C34BFFD787FFF5E1FF
072284°580078BB00FF8D4BA5CF4BFFDF87FFF7E1FF
073288°600078CC00FF934BA5DB4BFFE787FFF9E1FF
074292°680078DD00FF994BA5E74BFFEF87FFFBE1FF
075296°700078EE00FF9F4BA5F34BFFF787FFFDE1FF
076300°780078FF00FFA54BA5FF4BFFFF87FFFFE1FF
077304°780070FF00EEA54B9FFF4BF3FF87F7FFE1FD
078308°780068FF00DDA54B99FF4BE7FF87EFFFE1FB
079312°780060FF00CCA54B93FF4BDBFF87E7FFE1F9
080316°780058FF00BBA54B8DFF4BCFFF87DFFFE1F7
081320°780050FF00AAA54B87FF4BC3FF87D7FFE1F5
082324°780048FF0099A54B81FF4BB7FF87CFFFE1F3
083328°780040FF0088A54B7BFF4BABFF87C7FFE1F1
084332°780038FF0077A54B75FF4B9FFF87BFFFE1EF
085336°780030FF0066A54B6FFF4B93FF87B7FFE1ED
086340°780028FF0055A54B69FF4B87FF87AFFFE1EB
087344°780020FF0044A54B63FF4B7BFF87A7FFE1E9
088348°780018FF0033A54B5DFF4B6FFF879FFFE1E7
089352°780010FF0022A54B57FF4B63FF8797FFE1E5
090356°780008FF0011A54B51FF4B57FF878FFFE1E3
091360°780000FF0000A54B4BFF4B4BFF8787FFE1E1




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