Color Theory
Color Wheel
Note: HTML uses the color schema #RGB, where R= red, G= green, B= blue, in
hexidecimal values. Therefore, converting from Hexicdecimal to Decimal, we
have: #00= 0, #50= 80, #78= 120, #86= 134, #A5= 165, #CF= 207, and #FF= 255.
Color Star
Note: The Primary Colors are Red, Yellow and Blue, the Secondary Colors are
Orange, Green and Violet, and the Tertiary Colors are mixtures of respective
Primary and Secondary Colors. That is, Red-Orange, #FF5000, is midway between
Red, #FF0000, and Orange, #FFA500.
Gray Scale
| #FFFFFF, White | |
| #F8F8F8 | |
| #F0F0F0 | |
| #E8E8E8 | |
| #E0E0E0 | |
| #D8D8D8 | |
| #D0D0D0 | |
| #C8C8C8 | |
| #C0C0C0 | |
| #B8B8B8 | |
| #B0B0B0 | |
| #A8A8A8 | |
| #A0A0A0 | |
| #989898 | |
| #909090 | |
| #888888 | |
| #808080 | |
| #787878 | |
| #707070 | |
| #686868 | |
| #606060 | |
| #585858 | |
| #505050 | |
| #484848 | |
| #404040 | |
| #383838 | |
| #303030 | |
| #282828 | |
| #202020 | |
| #181818 | |
| #101010 | |
| #080808 | |
| #000000, Black |
Primary Colors
| Red | #RGB | Yellow | #RGB | Blue | #RGB |
| #FF0000 | #FFFF00 | #0000FF | |||
| #F80000 | #F8F800 | #0000F8 | |||
| #F00000 | #F0F000 | #0000F0 | |||
| #E80000 | #E8E800 | #0000E8 | |||
| #E00000 | #E0E000 | #0000E0 | |||
| #D80000 | #D8D800 | #0000D8 | |||
| #D00000 | #D0D000 | #0000D0 | |||
| #C80000 | #C8C800 | #0000C8 | |||
| #C00000 | #C0C000 | #0000C0 | |||
| #B80000 | #B8B800 | #0000B8 | |||
| #B00000 | #B0B000 | #0000B0 | |||
| #A80000 | #A8A800 | #0000A8 | |||
| #A00000 | #A0A000 | #0000A0 | |||
| #980000 | #989800 | #000098 | |||
| #900000 | #909000 | #000090 | |||
| #880000 | #888800 | #000088 | |||
| #800000 | #808000 | #000080 | |||
| #780000 | #787800 | #000078 | |||
| #700000 | #707000 | #000070 | |||
| #680000 | #686800 | #000068 | |||
| #600000 | #606000 | #000060 | |||
| #580000 | #585800 | #000058 | |||
| #500000 | #505000 | #000050 | |||
| #480000 | #484800 | #000048 | |||
| #400000 | #404000 | #000040 | |||
| #380000 | #383800 | #000038 | |||
| #300000 | #303000 | #000030 | |||
| #280000 | #282800 | #000028 | |||
| #200000 | #202000 | #000020 | |||
| #180000 | #181800 | #000018 | |||
| #100000 | #101000 | #000010 | |||
| #080000 | #080800 | #000008 | |||
| #000000 | #000000 | #000000 |
Secondary Colors
| Orange | #RGB | Green | #RGB | Violet | #RGB |
| #FFA500 | #00FF00 | #FF00FF | |||
| #F8A100 | #00F800 | #F800F8 | |||
| #F09C00 | #00F000 | #F000F0 | |||
| #E89600 | #00E800 | #E800E8 | |||
| #E09100 | #00E000 | #E000E0 | |||
| #D88C00 | #00D800 | #D800D8 | |||
| #D08700 | #00D000 | #D000D0 | |||
| #C88200 | #00C800 | #C800C8 | |||
| #C07C00 | #00C000 | #C000C0 | |||
| #B87700 | #00B800 | #B800B8 | |||
| #B07200 | #00B000 | #B000B0 | |||
| #A86D00 | #00A800 | #A800A8 | |||
| #A06800 | #00A000 | #A000A0 | |||
| #986200 | #009800 | #980098 | |||
| #905D00 | #009000 | #900090 | |||
| #885800 | #008800 | #880088 | |||
| #805300 | #008000 | #800080 | |||
| #784E00 | #007800 | #780078 | |||
| #704800 | #007000 | #700070 | |||
| #684300 | #006800 | #680068 | |||
| #603E00 | #006000 | #600060 | |||
| #583900 | #005800 | #580058 | |||
| #503400 | #005000 | #500050 | |||
| #482E00 | #004800 | #480048 | |||
| #402900 | #004000 | #400040 | |||
| #382400 | #003800 | #380038 | |||
| #301F00 | #003000 | #300030 | |||
| #281A00 | #002800 | #280028 | |||
| #201400 | #002000 | #200020 | |||
| #180F00 | #001800 | #180018 | |||
| #100A00 | #001000 | #100010 | |||
| #080500 | #000800 | #080008 | |||
| #000000 | #000000 | #000000 |
Using the Above Tools to Create a Rainbow
Using Primary & Secondary Colors (ROYGBV)
Using 20 Divisions between Each Color
Note: With 40 divisions, the rainbow would have a more blended appearance.
The human eye can perceive changes at 20 divisions, but by 40, it loses this
ability. However, to include 40 divisions increases the contsruction by a
multiple: instead of creating 20x6 images, I need to create 40x6 images. Each
image would change from 5x20 pixels (shown here) to 2x20 pixels (5/2= 2.5,
but you have to choose between 2 and 3 pixels--there are no half pixels).
I did this work manually; perhaps the computer programmers out there know
how to use Javascript to let the computer do the heavy lifting?
HSV Color System
In the HSV Color System, H= Hue (color), S= Saturation (intensity), and V=
Value (luminescence). Think of the color wheel and color star, depicted at
the top of this page, as the top slice of this color volume. Hue is represented
by a value around the perimeter. The radius of each slice is represented by
the Saturation axis (from 0 to 1), and the angular height by the Value axis
(from 0 to 1). Let us take a vertical, triangular slice. This image happens
to take this slice at the Hue= Violet (#FF00FF). To keep the math simple,
I am going to take a slice (in the shape of a triangle) through Hue= Red (#FF0000).
Each of the colors represented in the tables above are taken as a peripheral
slice with the highest Value at the top, and the lowest Value (approaching
black) at the bottom. Notice that the gray scale is represented by the central
axis from White at the top to Black at the bottom.
This is the image slice through Hue= Red (#FF0000). Note that Saturation
is inversely proportional to the second and third hexidecimal values. Let
notation #H1H2H3 represent the three hexidecimal values, in this case H1=
FF, H2= 00, and H3= 00.
Across the top axis, from White (#FFFFFF) to Red (#FF0000), let H2= H3. As
Saturation rises from 0 to 1, H2 decreases from FF to 00.
Across the right axis, from Black (#000000) to Red (#FF0000), as Value rises
from 0 to 1, H1 rises from 00 to FF.
Therefore, any point on this surface may be represented by a point p(s,v),
where s= Saturation and v= Value. For example, p(0.19, 0.88) would have a
Hexidecimal value of #E1CFCF, where H1= E1 (0.88 x 256) and H2= H3= CF ([1
- 0.19] x 256). This point represents a slightly darkened pale pink color.
Using these principles, I have created the following table using Hue= Red
(#FF0000):
| #FFFFFF | #FF0000 | ||||||||||
| #E2E2E2 | #E20000 | ||||||||||
| #C6C6C6 | #C60000 | ||||||||||
| #A9A9A9 | #A90000 | ||||||||||
| #8D8D8D | #8D0000 | ||||||||||
| #707070 | #700000 | ||||||||||
| #545454 | #540000 | ||||||||||
| #373737 | #370000 | ||||||||||
| #1B1B1B | #1B0000 | ||||||||||
| #000000 |
Note: The values on the left are gray tones, and the values on the right
are the right-most red values. This table divides the space into 10 cells
in all directions: Saturation across the top, Value across the diagonal, and
Hue at the upper right. This can be replicated for any Hue (color).
Color Triangles
Red
| FFFFFF | FFEEEE | FFDDDD | FFCCCC | FFBBBB | FFAAAA | FF9999 | FF8888 | FF7777 | FF6666 | FF5555 | FF4444 | FF3333 | FF2222 | FF1111 | FF0000 |
| EEEEEE | EEDDDD | EECCCC | EEBBBB | EEAAAA | EE9999 | EE8888 | EE7777 | EE6666 | EE5555 | EE4444 | EE3333 | EE2222 | EE1111 | EE0000 | |
| DDDDDD | DDCCCC | DDBBBB | DDAAAA | DD9999 | DD8888 | DD7777 | DD6666 | DD5555 | DD4444 | DD3333 | DD2222 | DD1111 | DD0000 | ||
| CCCCCC | CCBBBB | CCAAAA | CC9999 | CC8888 | CC7777 | CC6666 | CC5555 | CC4444 | CC3333 | CC2222 | CC1111 | CC0000 | |||
| BBBBBB | BBAAAA | BB9999 | BB8888 | BB7777 | BB6666 | BB5555 | BB4444 | BB3333 | BB2222 | BB1111 | BB0000 | ||||
| AAAAAA | AA9999 | AA8888 | AA7777 | AA6666 | AA5555 | AA4444 | AA3333 | AA2222 | AA1111 | AA0000 | |||||
| 999999 | 998888 | 997777 | 996666 | 995555 | 994444 | 993333 | 992222 | 991111 | 990000 | ||||||
| 888888 | 887777 | 886666 | 885555 | 884444 | 883333 | 882222 | 881111 | 880000 | |||||||
| 777777 | 776666 | 775555 | 774444 | 773333 | 772222 | 771111 | 770000 | ||||||||
| 666666 | 665555 | 664444 | 663333 | 662222 | 661111 | 660000 | |||||||||
| 555555 | 554444 | 553333 | 552222 | 551111 | 550000 | ||||||||||
| 444444 | 443333 | 442222 | 441111 | 440000 | |||||||||||
| 333333 | 332222 | 331111 | 330000 | ||||||||||||
| 222222 | 221111 | 220000 | |||||||||||||
| 111111 | 110000 | ||||||||||||||
| 000000 |
Yellow
| FFFFFF | FFFFEE | FFFFDD | FFFFCC | FFFFBB | FFFFAA | FFFF99 | FFFF88 | FFFF77 | FFFF66 | FFFF55 | FFFF44 | FFFF33 | FFFF22 | FFFF11 | FFFF00 |
| EEEEEE | EEEEDD | EEEECC | EEEEBB | EEEEAA | EEEE99 | EEEE88 | EEEE77 | EEEE66 | EEEE55 | EEEE44 | EEEE33 | EEEE22 | EEEE11 | EEEE00 | |
| DDDDDD | DDDDCC | DDDDBB | DDDDAA | DDDD99 | DDDD88 | DDDD77 | DDDD66 | DDDD55 | DDDD44 | DDDD33 | DDDD22 | DDDD11 | DDDD00 | ||
| CCCCCC | CCCCBB | CCCCAA | CCCC99 | CCCC88 | CCCC77 | CCCC66 | CCCC55 | CCCC44 | CCCC33 | CCCC22 | CCCC11 | CCCC00 | |||
| BBBBBB | BBBBAA | BBBB99 | BBBB88 | BBBB77 | BBBB66 | BBBB55 | BBBB44 | BBBB33 | BBBB22 | BBBB11 | BBBB00 | ||||
| AAAAAA | AAAA99 | AAAA88 | AAAA77 | AAAA66 | AAAA55 | AAAA44 | AAAA33 | AAAA22 | AAAA11 | AAAA00 | |||||
| 999999 | 999988 | 999977 | 999966 | 999955 | 999944 | 999933 | 999922 | 999911 | 999900 | ||||||
| 888888 | 888877 | 888866 | 888855 | 888844 | 888833 | 888822 | 888811 | 888800 | |||||||
| 777777 | 777766 | 777755 | 777744 | 777733 | 777722 | 777711 | 777700 | ||||||||
| 666666 | 666655 | 666644 | 666633 | 666622 | 666611 | 666600 | |||||||||
| 555555 | 555544 | 555533 | 555522 | 555511 | 555500 | ||||||||||
| 444444 | 444433 | 444422 | 444411 | 444400 | |||||||||||
| 333333 | 333322 | 333311 | 333300 | ||||||||||||
| 222222 | 222211 | 222200 | |||||||||||||
| 111111 | 111100 | ||||||||||||||
| 000000 |
Blue
| FFFFFF | EEEEFF | DDDDFF | CCCCFF | BBBBFF | AAAAFF | 9999FF | 8888FF | 7777FF | 6666FF | 5555FF | 4444FF | 3333FF | 2222FF | 1111FF | 0000FF |
| EEEEEE | DDDDEE | CCCCEE | BBBBEE | AAAAEE | 9999EE | 8888EE | 7777EE | 6666EE | 5555EE | 4444EE | 3333EE | 2222EE | 1111EE | 0000EE | |
| DDDDDD | CCCCDD | BBBBDD | AAAADD | 9999DD | 8888DD | 7777DD | 6666DD | 5555DD | 4444DD | 3333DD | 2222DD | 1111DD | 0000DD | ||
| CCCCCC | BBBBCC | AAAACC | 9999CC | 8888CC | 7777CC | 6666CC | 5555CC | 4444CC | 3333CC | 2222CC | 1111CC | 0000CC | |||
| BBBBBB | AAAABB | 9999BB | 8888BB | 7777BB | 6666BB | 5555BB | 4444BB | 3333BB | 2222BB | 1111BB | 0000BB | ||||
| AAAAAA | 9999AA | 8888AA | 7777AA | 6666AA | 5555AA | 4444AA | 3333AA | 2222AA | 1111AA | 0000AA | |||||
| 999999 | 888899 | 777799 | 666699 | 555599 | 444499 | 333399 | 222299 | 111199 | 000099 | ||||||
| 888888 | 777788 | 666688 | 555588 | 444488 | 333388 | 222288 | 111188 | 000088 | |||||||
| 777777 | 666677 | 555577 | 444477 | 333377 | 222277 | 111177 | 000077 | ||||||||
| 666666 | 555566 | 444466 | 333366 | 222266 | 111166 | 000066 | |||||||||
| 555555 | 444455 | 333355 | 222255 | 111155 | 000055 | ||||||||||
| 444444 | 333344 | 222244 | 111144 | 000044 | |||||||||||
| 333333 | 222233 | 111133 | 000033 | ||||||||||||
| 222222 | 111122 | 000022 | |||||||||||||
| 111111 | 000011 | ||||||||||||||
| 000000 |
Orange
| FFFFFF | FFA5EE | FFA5DD | FFA5CC | FFA5BB | FFA5AA | FFA599 | FFA588 | FFA577 | FFA566 | FFA555 | FFA544 | FFA533 | FFA522 | FFA511 | FFA500 |
| EEEEEE | EE98DD | EE98CC | EE98BB | EE98AA | EE9899 | EE9888 | EE9877 | EE9866 | EE9855 | EE9844 | EE9833 | EE9822 | EE9811 | EE9800 | |
| DDDDDD | DD8DCC | DD8DBB | DD8DAA | DD8D99 | DD8D88 | DD8D77 | DD8D66 | DD8D55 | DD8D44 | DD8D33 | DD8D22 | DD8D11 | DD8D00 | ||
| CCCCCC | CC82BB | CC82AA | CC8299 | CC8288 | CC8277 | CC8266 | CC8255 | CC8244 | CC8233 | CC8222 | CC8211 | CC8200 | |||
| BBBBBB | BB77AA | BB7799 | BB7788 | BB7777 | BB7766 | BB7755 | BB7744 | BB7733 | BB7722 | BB7711 | BB7700 | ||||
| AAAAAA | AA6C99 | AA6C88 | AA6C77 | AA6C66 | AA6C55 | AA6C44 | AA6C33 | AA6C22 | AA6C11 | AA6C00 | |||||
| 999999 | 996188 | 996177 | 996166 | 996155 | 996144 | 996133 | 996122 | 996111 | 996100 | ||||||
| 888888 | 885777 | 885766 | 885755 | 885744 | 885733 | 885722 | 885711 | 885700 | |||||||
| 777777 | 774C66 | 774C55 | 774C44 | 774C33 | 774C22 | 774C11 | 774C00 | ||||||||
| 666666 | 664155 | 664144 | 664133 | 664122 | 664111 | 664100 | |||||||||
| 555555 | 553644 | 553633 | 553622 | 553611 | 553600 | ||||||||||
| 444444 | 442B33 | 442B22 | 442B11 | 442B00 | |||||||||||
| 333333 | 332022 | 332011 | 332000 | ||||||||||||
| 222222 | 221511 | 221500 | |||||||||||||
| 111111 | 110A00 | ||||||||||||||
| 000000 |
Green
| FFFFFF | EEFFEE | DDFFDD | CCFFCC | BBFFBB | AAFFAA | 99FF99 | 88FF88 | 77FF77 | 66FF66 | 55FF55 | 44FF44 | 33FF33 | 22FF22 | 11FF11 | 00FF00 |
| EEEEEE | DDEEDD | CCEECC | BBEEBB | AAEEAA | 99EE99 | 88EE88 | 77EE77 | 66EE66 | 55EE55 | 44EE44 | 33EE33 | 22EE22 | 11EE11 | 00EE00 | |
| DDDDDD | CCDDCC | BBDDBB | AADDAA | 99DD99 | 88DD88 | 77DD77 | 66DD66 | 55DD55 | 44DD44 | 33DD33 | 22DD22 | 11DD11 | 00DD00 | ||
| CCCCCC | BBCCBB | AACCAA | 99CC99 | 88CC88 | 77CC77 | 66CC66 | 55CC55 | 44CC44 | 33CC33 | 22CC22 | 11CC11 | 00CC00 | |||
| BBBBBB | AABBAA | 99BB99 | 88BB88 | 77BB77 | 66BB66 | 55BB55 | 44BB44 | 33BB33 | 22BB22 | 11BB11 | 00BB00 | ||||
| AAAAAA | 99AA99 | 88AA88 | 77AA77 | 66AA66 | 55AA55 | 44AA44 | 33AA33 | 22AA22 | 11AA11 | 00AA00 | |||||
| 999999 | 889988 | 779977 | 669966 | 559955 | 449944 | 339933 | 229922 | 119911 | 009900 | ||||||
| 888888 | 778877 | 668866 | 558855 | 448844 | 338833 | 228822 | 118811 | 008800 | |||||||
| 777777 | 667766 | 557755 | 447744 | 337733 | 227722 | 117711 | 007700 | ||||||||
| 666666 | 556655 | 446644 | 336633 | 226622 | 116611 | 006600 | |||||||||
| 555555 | 445544 | 335533 | 225522 | 115511 | 005500 | ||||||||||
| 444444 | 334433 | 224422 | 114411 | 004400 | |||||||||||
| 333333 | 223322 | 113311 | 003300 | ||||||||||||
| 222222 | 112211 | 002200 | |||||||||||||
| 111111 | 001100 | ||||||||||||||
| 000000 |
Violet
| FFFFFF | FFEEFF | FFDDFF | FFCCFF | FFBBFF | FFAAFF | FF99FF | FF88FF | FF77FF | FF66FF | FF55FF | FF44FF | FF33FF | FF22FF | FF11FF | FF00FF |
| EEEEEE | EEDDEE | EECCEE | EEBBEE | EEAAEE | EE99EE | EE88EE | EE77EE | EE66EE | EE55EE | EE44EE | EE33EE | EE22EE | EE11EE | EE00EE | |
| DDDDDD | DDCCDD | DDBBDD | DDAADD | DD99DD | DD88DD | DD77DD | DD66DD | DD55DD | DD44DD | DD33DD | DD22DD | DD11DD | DD00DD | ||
| CCCCCC | CCBBCC | CCAACC | CC99CC | CC88CC | CC77CC | CC66CC | CC55CC | CC44CC | CC33CC | CC22CC | CC11CC | CC00CC | |||
| BBBBBB | BBAABB | BB99BB | BB88BB | BB77BB | BB66BB | BB55BB | BB44BB | BB33BB | BB22BB | BB11BB | BB00BB | ||||
| AAAAAA | AA99AA | AA88AA | AA77AA | AA66AA | AA55AA | AA44AA | AA33AA | AA22AA | AA11AA | AA00AA | |||||
| 999999 | 998899 | 997799 | 996699 | 995599 | 994499 | 993399 | 992299 | 991199 | 990099 | ||||||
| 888888 | 887788 | 886688 | 885588 | 884488 | 883388 | 882288 | 881188 | 880088 | |||||||
| 777777 | 776677 | 775577 | 774477 | 773377 | 772277 | 771177 | 770077 | ||||||||
| 666666 | 665566 | 664466 | 663366 | 662266 | 661166 | 660066 | |||||||||
| 555555 | 554455 | 553355 | 552255 | 551155 | 550055 | ||||||||||
| 444444 | 443344 | 442244 | 441144 | 440044 | |||||||||||
| 333333 | 332233 | 331133 | 330033 | ||||||||||||
| 222222 | 221122 | 220022 | |||||||||||||
| 111111 | 110011 | ||||||||||||||
| 000000 |
top of page