[ Home ] > [ Information ] > [ Technical Links ]







Bauhausschule Professor Johannes Itten discovered that people naturally try to color using its own cheek color as reference.
Because the eye has three color filters, there are four ways to color: winter, spring, summer and autumn.
If one clothes himself with ones season, he underlines his face with his clothing.
Otherwise he underlines his clothing and gets faceless.

Physically you can localize every color in the color space
by using 4 colors as references at the corners of a color tetrahedron.
Using Summer (grey), Winter (blue),
Autumn (red-orange) and Spring (green-green-bluegreen) as Reference Colors
you can localize every color through its reference color and two color tones.
Exception, the pure Reference colors, the corners of the color Tetrahedron
and the black/white axis because they do not have two color tones.

Reference: Itten, Johannes; Kunst der Farbe, Ravensburger Buchverlag, 1970.

Personal Advice:
Try to color your site or at least each page with only colors of one season.
Do not use colors inside the Complementary Colors Triangle.
Avoid buying clothes for people of another season or
for people of the same season when you are ill.
Avoid doing web design of another season than yours.


Summer, reference color grey,
whiteness 6/ 24, H center,
avoid colors around: white, L 24/ 24, H center;
and inside planes: L 12/ 24, H 15°, C 100%; L 12/ 24, H 135°, C 100%;
L 12/ 24, H 255°, C 100%; L 18/ 24; H center.

Autumn, reference color red-orange,
whiteness 18/ 24, H 0°- 30°, C 50%,
avoid colors around: blue-green-grey, L 5/ 24, H 195°, C 100%;
and inside planes: L 55/ 240, H 15°, C 91/ 240; L 165/ 240, H 125°, C 60/ 240;
L 165/ 240, H 270°, C 60/ 240; L 85/ 240; H 195°, C 91/ 240.

Winter, reference color blue-blue-violet,
whiteness 18/ 24, H 240°- 270°, C 50%,
avoid colors around: red-green-grey, L 5/ 24, H 75°, C 100%;
and inside planes: L 55/ 240, H 255°, C 91/ 240; L 165/ 240, H 0°, C 60/ 240;
L 165/ 240, H 150°, C 60/ 240; L 85/ 240; H 75°, C 91/ 240.

Spring, reference color green-green-bluegreen,
whiteness 18/ 24, H 120°- 150°, C 50%,
avoid colors around: red-blue-grey, L 5/ 24, H 315°, C 100%;
and inside planes: L 55/ 240, H 135°, C 91/ 240; L 165/ 240, H 240°, C 60/ 240;
L 165/ 240, H 30°, C 60/ 240; L 85/ 240; H 315°, C 91/ 240.

Reference: triangle equilateral, tetrahedron.
L: Whiteness, H: Hue, C: Color Saturation.



Display Colors:
Internet Safe Colors: 256 Colors
High Colors: 256 times 256
True Colors: 256 (Red) times 256 (Green) times 256 (Blue)

Golden Proportion:
61.8%/ 100% = 38.2%/ 61.8%, where 0.382 + 0.618 = 1 = 100/ 100 = 100%




Reference
Color
Complementary
Colors
15° 135° 255°
Summer
7F7F7F
FFFFFF
C0C0C0
FF4000
00FF40
4000FF
Ref. Compl. 195° 15° 125° 270°
Autumn
DFAF9F
00506A
386B7C
513024
9BC49E
AF9BC4
Ref. Compl. 75° 255° 150°
Winter
AF9FDF
506A00
6B7C38
302451
C49B9B
9BC4A6
Ref. Compl. 315° 135° 30° 240°
Spring
9FDFAF
6A0050
7C386B
245130
C4AF9B
9B9BC4
AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA




Saturation 100%

0°/ 360° 060° 120° 180° 240° 300° Center
Whiteness
 
 
Red
 
 
Yellow
 
 
Green
 
 
Cyan,
Bluegreen
 
Blue
 
 
Magenta,
Violet,
Purpur
Grey
 
 
010/ 240
150000
151500
001500
001515
000015
150015
0A0A0A
020/ 240
2B0000
2B2B00
002B00
002B2B
00002B
2B002B
151515
030/ 240
400000
404000
004000
004040
000040
400040
1F1F1F
040/ 240
550000
555500
005500
005555
000055
550055
2A2A2A
050/ 240
6A0000
6A6A00
006A00
006A6A
00006A
6A006A
353535
060/ 240
800000
808000
008000
008080
000080
800080
3F3F3F
070/ 240
950000
959500
009500
009595
000095
950095
4A4A4A
080/ 240
AA0000
AAAA00
00AA00
00AAAA
0000AA
AA00AA
555555
090/ 240
BF0000
BFBF00
00BF00
00BFBF
0000BF
BF00BF
5F5F5F
100/ 240
D50000
D5D500
00D500
00D5D5
0000D5
D500D5
6A6A6A
110/ 240
EA0000
EAEA00
00EA00
00EAEA
0000EA
EA00EA
747474
115/ 240
F40000
F4F400
00F400
00F4F4
0000F4
F400F4
7A7A7A
120/ 240
FF0000
FFFF00
00FF00
00FFFF
0000FF
FF00FF
808080
210/ 240A AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA




Saturation 2/3

0°/ 360° 060° 120° 180° 240° 300° Center
Whiteness Red Yellow Green Bluegreen Blue Violet Grey
021/ 240
210B0B
21210B
0B210B
0B2121
0B0B21
210B21
161616
030/ 240
301010
303010
103010
103030
101030
301030
1F1F1F
040/ 240
3F1515
3F3F15
153F15
153F3F
15153F
3F153F
2A2A2A
051/ 240
511B1B
51511B
1B511B
1B5151
1B1B51
511B51
363636
060/ 240
602020
606020
206020
206060
202060
602060
3F3F3F
070/ 240
6F2525
6F6F25
256F25
256F6F
25256F
6F256F
4A4A4A
081/ 240
812B2B
81812B
2B812B
2B8181
2B2B81
812B81
565656
090/ 240
903030
909030
309030
309090
303090
903090
5F5F5F
100/ 240
9F3535
9F9F35
359F35
359F9F
35359F
9F359F
6A6A6A
111/ 240
B13B3B
B1B13B
3BB13B
3BB1B1
3B3BB1
B13BB1
757575
119/ 240
BD3F3F
BDBD3F
3FBD3F
3FBDBD
3F3FBD
BD3FBD
7E7E7E
130/ 240
CF4545
CFCF45
45CF45
45CFCF
4545CF
CF45CF
8A8A8A
134/ 240
D54747
D5D547
47D547
47D5D5
4747D5
D547D5
8E8E8E
141/ 240
E14B4B
E1E14B
4BE14B
4BE1E1
4B4BE1
E14BE1
959595
145/ 240
E74D4D
E7E74D
4DE74D
4DE7E7
4D4DE7
E74DE7
9A9A9A
151/ 240
F05050
F0F050
50F050
50F0F0
5050F0
F050F0
A0A0A0
160/ 240
FF5555
FFFF55
55FF55
55FFFF
5555FF
FF55FF
AAAAAA
210/ 240A AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA




Saturation 50%:

HEX CC/ 2= HEX 66, 204/ 2= 102, Use MS Windows Hexadecimal Calculator

0°/ 360° 060° 120° 180° 240° 300° Center
Whiteness Copper Yellow Green Bluegreen Blue Violet Grey
011/ 240
100808
101008
081008
081010
080810
100810
0B0B0B
021/ 240
1E0F0F
1E1E0F
0F1E0F
0F1E1E
0F0F1E
1E0F1E
161616
030/ 240
2A1515
2A2A15
152A15
152A2A
15152A
2A152A
1F1F1F
040/ 240
381C1C
38381C
1C381C
1C3838
1C1C38
381C38
2A2A2A
051/ 240
482424
484824
244824
244848
242448
482448
363636
061/ 240
562B2B
56562B
2B562B
2B5656
2B2B56
562B56
404040
071/ 240
643232
646432
326432
326464
323264
643264
4B4B4B
080/ 240
723939
727239
397239
397272
393972
723972
555555
090/ 240
804040
808040
408040
408080
404080
804080
5F5F5F
100/ 240
8E4747
8E8E47
478E47
478E8E
47478E
8E478E
6A6A6A
110/ 240
9C4E4E
9C9C4E
4E9C4E
4E9C9C
4E4E9C
9C4E9C
747474
119/ 240
A85454
A8A854
54A854
54A8A8
5454A8
A854A8
7E7E7E
128/ 240
B65B5B
B6B65B
5BB65B
5BB6B6
5B5BB6
B65BB6
888888
134/ 240
BE5F5F
BEBE5F
5FBE5F
5FBEBE
5F5FBE
BE5FBE
8E8E8E
138/ 240
C46262
C4C462
62C462
62C4C4
6262C4
C462C4
929292
144/ 240
CC6666
CCCC66
66CC66
66CCCC
6666CC
CC66CC
999999
148/ 240
D26969
D2D269
69D269
69D2D2
6969D2
D269D2
9D9D9D
158/ 240
E07070
E0E070
70E070
70E0E0
7070E0
E070E0
A7A7A7
168/ 240
EE7777
EEEE77
77EE77
77EEEE
7777EE
EE77EE
B2B2B2
178/ 240
FC7E7E
FCFC7E
7EFC7E
7EFCFC
7E7EFC
FC7EFC
BDBDBD
179/ 240
FE7F7F
FEFE7F
7FFE7F
7FFEFE
7F7FFE
FE7FFE
BEBEBE
210/ 240A AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA




Saturation 1/3

0°/ 360° 060° 120° 180° 240° 300° Center
Whiteness Copper Yellow Green Bluegreen Blue Violet Grey
031/ 240
271A1A
27271A
1A271A
1A2727
1A1A27
271A27
202020
040/ 240
332222
333322
223322
223333
222233
332233
2A2A2A
049/ 240
3F2A2A
3F3F2A
2A3F2A
2A3F3F
2A2A3F
3F2A3F
343434
059/ 240
4B3232
4B4B32
324B32
324B4B
32324B
4B324B
3E3E3E
071/ 240
5A3C3C
5A5A3C
3C5A3C
3C5A5A
3C3C5A
5A3C5A
4B4B4B
081/ 240
664646
666646
466646
466666
464666
664666
565656
089/ 240
724C4C
72724C
4C724C
4C7272
4C4C72
724C72
5E5E5E
101/ 240
815656
818156
568156
568181
565681
815681
6B6B6B
111/ 240
8D5E5E
8D8D5E
5E8D5E
5E8D8D
5E5E8D
8D5E8D
757575
120/ 240
996666
999966
669966
669999
666699
996699
808080
129/ 240
A56E6E
A5A56E
6EA56E
6EA5A5
6E6EA5
A56EA5
898989
141/ 240
B47878
B4B478
78B478
78B4B4
7878B4
B478B4
949494
150/ 240
BF8080
BFBF80
80BF80
80BFBF
8080BF
BF80BF
9F9F9F
158/ 240
C98686
C9C986
86C986
86C9C9
8686C9
C986C9
A7A7A7
169/ 240
D89090
D8D890
90D890
90D8D8
9090D8
D890D8
B3B3B3
181/ 240
E79A9A
E7E79A
9AE79A
9AE7E7
9A9AE7
E79AE7
C0C0C0
191/ 240
F3A2A2
F3F3A2
A2F3A2
A2F3F3
A2A2F3
F3A2F3
CACACA
200/ 240
FFAAAA
FFFFAA
AAFFAA
AAFFFF
AAAAFF
FFAAFF
D4D4D4
210/ 240A AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA




Maximum Saturation

0°/ 360° 060° 120° 180° 240° 300° Center G in R
Whiteness Red Yellow Green Bluegreen Blue Violet Grey DEC Hue %
125/ 240
FF0B0B
FFFF0B
0BFF0B
0BFFFF
0B0BFF
FF0BFF
848484
11 96
130/ 240
FF1515
FFFF15
15FF15
15FFFF
1515FF
FF15FF
8A8A8A
21 92
140/ 240
FF2B2B
FFFF2B
2BFF2B
2BFFFF
2B2BFF
FF2BFF
949494
43 83
150/ 240
FF4040
FFFF40
40FF40
40FFFF
4040FF
FF40FF
9F9F9F
64 75
160/ 240
FF5555
FFFF55
55FF55
55FFFF
5555FF
FF55FF
AAAAAA
85 67
170/ 240
FF6A6A
FFFF6A
6AFF6A
6AFFFF
6A6AFF
FF6AFF
B4B4B4
106 58
180/ 240
FF8080
FFFF80
80FF80
80FFFF
8080FF
FF80FF
BFBFBF
128 50
190/ 240
FF9595
FFFF95
95FF95
95FFFF
9595FF
FF95FF
C9C9C9
149 42
200/ 240
FFAAAA
FFFFAA
AAFFAA
AAFFFF
AAAAFF
FFBFFF
D4D4D4
170 33
210/ 240
FFBFBF
FFFFBF
BFFFBF
BFFFFF
BFBFFF
FFBFFF
DFDFDF
191 25
220/ 240
FFD5D5
FFFFD5
D5FFD5
D5FFFF
D5D5FF
FFD5FF
E9E9E9
213 16
230/ 240
FFEAEA
FFFFEA
EAFFEA
EAFFFF
EAEAFF
FFEAFF
F4F4F4
234 8
210/ 240A AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA




Saturation 100%

300° 320° 330° 340° 0°/ 360° 020° 030° 040° 060°
Whiteness Violet 1 R 2/3 B 1 R 1/3 B Red 1 R 1/3 Y 1 R 2/3 Y Yellow
075/ 240
 
9F006A
9F004F
9F0035
9F
9F3500
9F4F00
9F6A00
 
080/ 240
 
AB0072
AB0055
AB0039
 
AB3900
AB5500
AB7200
 
090/ 240
 
C00080
C00060
C00040
 
C04000
C06000
C08000
 
100/ 240
 
D5008E
D5006A
D50047
 
D54700
D56A00
D58E00
 
110/ 240
 
EA009C
EA0075
EA004E
 
EA4E00
EA7500
EA9C00
 
120/ 240
 
FF00AA
FF007F
FF0055
 
FF5500
FF7F00
FFAA00
 
210/ 240A Bluegreen AAAAAAAA AAAAAAAA AAAAAAAA AAA AAAAAAAA AAAAAAAA AAAAAAAA Bluegreen




Saturation 100%

060° 080° 090° 100° 120° 140° 150° 160° 180°
Whiteness Yellow 1 G 2/3 R 1 G 1/3 R Green 1 G 1/3 B 1 G 2/3 B Bluegreen
075/ 240
 
6A9F00
4F9F00
359F00
9F
009F35
009F4F
009F6A
 
080/ 240
 
72AB00
55AB00
39AB00
 
00AB39
00AB55
00AB72
 
090/ 240
 
80C000
60C000
40C000
 
00C040
00C060
00C080
 
100/ 240
 
8ED500
6AD500
47D500
 
00D547
00D56A
00D58E
 
110/ 240
 
9CEA00
75EA00
4EEA00
 
00EA4E
00EA75
00EA9C
 
120/ 240
 
AAFF00
7FFF00
55FF00
 
00FF55
00FF7F
00FFAA
 
210/ 240A Bluegreen AAAAAAAA AAAAAAAA AAAAAAAA AAA AAAAAAAA AAAAAAAA AAAAAAAA Bluegreen




Saturation 100%

180° 200° 210° 220° 240° 260° 270° 280° 300°
Whiteness Bluegreen 1 B 2/3 G 1 B 1/3 G Blue 1 B 1/3 R 1 B 2/3 R Violet
075/ 240
 
006A9F
004F9F
006A9F
9F
35009F
4F009F
6A009F
 
080/ 240
 
0072AB
0055AB
0039AB
 
3900AB
5500AB
7200AB
 
090/ 240
 
0080C0
0060C0
0040C0
 
4000C0
6000C0
8000C0
 
100/ 240
 
008ED5
006AD5
0047D5
 
4700D5
6A00D5
8E00D5
 
110/ 240
 
009CEA
0075EA
004EEA
 
4E00EA
7500EA
9C00EA
 
120/ 240
 
00AAFF
00AAFF
0055FF
 
5500FF
7F00FF
AA00FF
 
210/ 240A Bluegreen AAAAAAAA AAAAAAAA AAAAAAAA AAA AAAAAAAA AAAAAAAA AAAAAAAA Bluegreen




Purpur Study, Saturation 100%

300° 305° 310° 315° 320° 325° 330°
200 204/ 240 207/ 240 210/ 240 213/ 240 217/ 240 220/ 240
Whiteness Violet 1 R 2/3 B
075/ 240
 
9F0091
9F0084
9F0077
9F006A
9F005C
9F004F
080/ 240
 
AA009B
AA008D
AA0080
AB0072
AB0063
AB0055
090/ 240
 
BF00AF
BF009F
BF008F
C00080
C00070
C00060
100/ 240
 
D500C3
D500B1
D5009F
D5008E
D5007C
D5006A
110/ 240
 
EA00D6
EA00C3
EA00AF
EA009C
EA0088
EA0075
120/ 240
 
FF00E9
FF00D4
FF00BF
FF00AA
FF0094
FF007F
210/ 240A Bluegreen AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA

Suggestion:
cyan: 210°, violet: 270°, bishop purpur: 300°; magenta: 310°, pink: 315° and wine red: 330°.




Saturation 100%

210° 240° 270° 300°
120/ 240
00AAFF
0000FF
9300FF
FF00FF
210/ 240A Bluegreen AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA
310° 315° 320° 330°
120/ 240
FF00D4
FF00BF
FF00B8
FF007F
210/ 240A Bluegreen AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA

Suggestion:
cyan: 210°, violet: 270°, bishop purpur: 300°; magenta: 310°, pink: 315° and wine red: 330°.

 
 
 AAAAAAAA

&&&&&&&&&  Background:  3%, 070707; Font:  60°, 50%, FFFF00  &&&&&&&&&


&&&&&&&&&  Background: 97%, F8F8F8; Font: 240°, 20%, 000066  &&&&&&&&&


&&&&&&&&&  Background:   0°, 40%, CC0000; Font:  180°, 70%, 66FFFF  &&&&&&&&&


&&&&&&&&&  Background:  30°, FF7F00; Font: 240°, 20%, 000066  &&&&&&&&&


&&&&&&&&&  Background:  60°, FFFF00; Font: 240°, 20%, 000066  &&&&&&&&&


&&&&&&&&&  Background:  90°, 7FFF00; Font: 240°, 20%, 000066  &&&&&&&&&


&&&&&&&&&  Background: 120°, 00FF00; Font: 300°, 20%, 660066  &&&&&&&&&


&&&&&&&&&  Background: 97%, F7F7F7; Font: 300°, 27%, 8A008A  &&&&&&&&&


&&&&&&&&&  Background: 135°, 00FF44; Font: 0°, 20%, 660000  &&&&&&&&&


&&&&&&&&&  Background: 150°, 00FF7F; Font: 0°, 20%, 660000  &&&&&&&&&


&&&&&&&&&  Background: 180°, 00FFFF; Font:   0°, 20%, 660000  &&&&&&&&&


&&&&&&&&&  Background: 210°, 007FFF; Font:  0°, 20%, 660000  &&&&&&&&&


&&&&&&&&&  Background: 240°, 40%, 0000CC; Font:  60°, 70%, FFFF66  &&&&&&&&&


&&&&&&&&&  Background: 270°, 7F00FF; Font:  120°, 10%, 003300  &&&&&&&&&


&&&&&&&&&  Background: 300°, FF00FF; Font: 120°, 10%, 003300  &&&&&&&&&


&&&&&&&&&  Background: 315°, FF00BF; Font: 120°, 10%, 003300  &&&&&&&&&


&&&&&&&&&  Background: 315°, FF00BF; Font: 240°, 20%, 000066  &&&&&&&&&


&&&&&&&&&  Background: 330°, FF007F; Font: 240°, 20%, 000066  &&&&&&&&&


 
 
 AAAAAAAA





&&& F8F8F8 Grey: 234/ 240  Background:  2.5% 248Delta
&&& F9F9F9 Grey: 234/ 240  Background:  2.5% 249Delta
&&& F0F0F0 Grey: 226/ 240  Background:  2.5%

&&& C0C0C0 Grey: 181/ 240  Background: 97.5%
&&& BFBFBF Grey: 180/ 240  Background: 97.5%

&&& EAEAEA Grey: 220/ 240  Background: 97.5% 234Delta
&&& E8E8E8 Grey: 219/ 240  Background: 97.5% 233Delta
&&& E9E9E9 Grey: 219/ 240  Background: 97.5% 233Delta

&&& BFBFBF Grey: 180/ 240  Background: 97.5%
&&& 9F9F9F Grey: 150/ 240  Background: 97.5%
&&& 808080 Grey: 120/ 240  Background: 97.5%

&&& 747474 Grey: 110/ 240  Background: 97.5%
&&& 6A6A6A Grey: 100/ 240  Background: 97.5%
&&& 5F5F5F Grey: 090/ 240  Background: 97.5%

&&& 3F3F3F Grey: 060/ 240  Background: 97.5%
&&& 1F1F1F Grey: 030/ 240  Background: 97.5%

 
 
 
 
 
 AAAAAAAA
White: DEC 255 HEX FF Whiteness 240/ 240
Black: DEC 000 HEX 00 Whiteness 0/ 240



Calculations, suggestion, approx.:
FF (100%), 0° and FF(100%), 120° gives: FF(100%), 60° (Result)
Light Power equals 120 times (Result/255 and NN/255)






[Essay]
[Summary]
[Complementary Color Tetrahedron/ Continue]
[yahoo.com]
[Alt: Web Safe Colors, ge]
[Physics]