Colors in HTML

Okay, so I'm not quite sure why I'm putting this in. Just thought maybe I'd explain a little how colors in HTML documents work? I don't know. Okay, so I was bored.

Anyway, I was so bored I figured I'd type out the numbers in binary from 0 to 255. Actually, originally I was going to do 0 to 4,294,967,296 but then decided I wasn't that bored. Then I decided I should put in the decimal equivalents. Then I figured, hey, each channel in RGB is 8-bit, and in HTML they're shown in hex from 00-FF, so why not put them in hex too? So I did that too.

What I had when I was finished looked like this:

00000000	  0	00
00000001	  1	01
00000010	  2	02
00000011	  3	03
00000100	  4	04
00000101	  5	05
00000110	  6	06
00000111	  7	07
00001000	  8	08
00001001	  9	09
00001010	 10	0A
00001011	 11	0B
00001100	 12	0C
00001101	 13	0D
00001110	 14	0E
00001111	 15	0F
00010000	 16	10
00010001	 17	11
00010010	 18	12
00010011	 19	13
00010100	 20	14
00010101	 21	15
00010110	 22	16
00010111	 23	17
00011000	 24	18
00011001	 25	19
00011010	 26	1A
00011011	 27	1B
00011100	 28	1C
00011101	 29	1D
00011110	 30	1E
00011111	 31	1F
00100000	 32	20
00100001	 33	21
00100010	 34	22
00100011	 35	23
00100100	 36	24
00100101	 37	25
00100110	 38	26
00100111	 39	27
00101000	 40	28
00101001	 41	29
00101010	 42	2A
00101011	 43	2B
00101100	 44	2C
00101101	 45	2D
00101110	 46	2E
00101111	 47	2F
00110000	 48	30
00110001	 49	31
00110010	 50	32
00110011	 51	33
00110100	 52	34
00110101	 53	35
00110110	 54	36
00110111	 55	37
00111000	 56	38
00111001	 57	39
00111010	 58	3A
00111011	 59	3B
00111100	 60	3C
00111101	 61	3D
00111110	 62	3E
00111111	 63	3F
01000000	 64	40
01000001	 65	41
01000010	 66	42
01000011	 67	43
01000100	 68	44
01000101	 69	45
01000110	 70	46
01000111	 71	47
01001000	 72	48
01001001	 73	49
01001010	 74	4A
01001011	 75	4B
01001100	 76	4C
01001101	 77	4D
01001110	 78	4E
01001111	 79	4F
01010000	 80	50
01010001	 81	51
01010010	 82	52
01010011	 83	53
01010100	 84	54
01010101	 85	55
01010110	 86	56
01010111	 87	57
01011000	 88	58
01011001	 89	59
01011010	 90	5A
01011011	 91	5B
01011100	 92	5C
01011101	 93	5D
01011110	 94	5E
01011111	 95	5F
01100000	 96	60
01100001	 97	61
01100010	 98	62
01100011	 99	63
01100100	100	64
01100101	101	65
01100110	102	66
01100111	103	67
01101000	104	68
01101001	105	69
01101010	106	6A
01101011	107	6B
01101100	108	6C
01101101	109	6D
01101110	110	6E
01101111	111	6F
01110000	112	70
01110001	113	71
01110010	114	72
01110011	115	73
01110100	116	74
01110101	117	75
01110110	118	76
01110111	119	77
01111000	120	78
01111001	121	79
01111010	122	7A
01111011	123	7B
01111100	124	7C
01111101	125	7D
01111110	126	7E
01111111	127	7F
10000000	128	80
10000001	129	81
10000010	130	82
10000011	131	83
10000100	132	84
10000101	133	85
10000110	134	86
10000111	135	87
10001000	136	88
10001001	137	89
10001010	138	8A
10001011	139	8B
10001100	140	8C
10001101	141	8D
10001110	142	8E
10001111	143	8F
10010000	144	90
10010001	145	91
10010010	146	92
10010011	147	93
10010100	148	94
10010101	149	95
10010110	150	96
10010111	151	97
10011000	152	98
10011001	153	99
10011010	154	9A
10011011	155	9B
10011100	156	9C
10011101	157	9D
10011110	158	9E
10011111	159	9F
10100000	160	A0
10100001	161	A1
10100010	162	A2
10100011	163	A3
10100100	164	A4
10100101	165	A5
10100110	166	A6
10100111	167	A7
10101000	168	A8
10101001	169	A9
10101010	170	AA
10101011	171	AB
10101100	172	AC
10101101	173	AD
10101110	174	AE
10101111	175	AF
10110000	176	B0
10110001	177	B1
10110010	178	B2
10110011	179	B3
10110100	180	B4
10110101	181	B5
10110110	182	B6
10110111	183	B7
10111000	184	B8
10111001	185	B9
10111010	186	BA
10111011	187	BB
10111100	188	BC
10111101	189	BD
10111110	190	BE
10111111	191	BF
11000000	192	C0
11000001	193	C1
11000010	194	C2
11000011	195	C3
11000100	196	C4
11000101	197	C5
11000110	198	C6
11000111	199	C7
11001000	200	C8
11001001	201	C9
11001010	202	CA
11001011	203	CB
11001100	204	CC
11001101	205	CD
11001110	206	CE
11001111	207	CF
11010000	208	D0
11010001	209	D1
11010010	210	D2
11010011	211	D3
11010100	212	D4
11010101	213	D5
11010110	214	D6
11010111	215	D7
11011000	216	D8
11011001	217	D9
11011010	218	DA
11011011	219	DB
11011100	220	DC
11011101	221	DD
11011110	222	DE
11011111	223	DF
11100000	224	E0
11100001	225	E1
11100010	226	E2
11100011	227	E3
11100100	228	E4
11100101	229	E5
11100110	230	E6
11100111	231	E7
11101000	232	E8
11101001	233	E9
11101010	234	EA
11101011	235	EB
11101100	236	EC
11101101	237	ED
11101110	238	EE
11101111	239	EF
11110000	240	F0
11110001	241	F1
11110010	242	F2
11110011	243	F3
11110100	244	F4
11110101	245	F5
11110110	246	F6
11110111	247	F7
11111000	248	F8
11111001	249	F9
11111010	250	FA
11111011	251	FB
11111100	252	FC
11111101	253	FD
11111110	254	FE
11111111	255	FF

(And no, I did not type that all out again. Cut & Paste is a wonderful thing.)

Most people who have designed web pages (and not just let some HTML editor do it for them) know how colors work for web documents. There's a red channel, a green channel, and a blue channel. If you didn't know that, you do now. That's how colors work for any computer graphics, or indeed anything light-based. In print, it's CMYK (Cyan Magenta Yellow blacK [don't ask me why K for Black cuz I don't know but I think it has to do with not confusing black with blue]), but those are subtractive colors while RGB is additive.

Now that I've really confused you, I'll explain a bit about additive and subtractive colors. Light has three primary colors: red, green, and blue. When you mix red and green, you get yellow; green and blue get you cyan; and red and blue get you magenta. When you mix all three, you get white. This is additive color, and it's how the colors work in HTML. The colors are in hex, and the first pair is the red channel, the second is the green channel, and the third is the blue channel. When you have 0s for all three, you get black, and when you have FFs for all three you get white. Probably didn't help much, so I'll give you an illustration:

[Additive Colors]

You can see how the colors mix where they overlap.

Print, on the other hand, is subtractive color. It also has three primary colors: magenta, cyan, and yellow. When you mix magenta and cyan you get blue; cyan and yellow make green; and magenta and yellow make red. When you mix all three, you get black. Again, an illustration:

[Subtractive Colors]

You'll probably notice that the subtractive set isn't as bright as the additive; that's the nature of how they work.

This explains why I prefer web pages with dark backgrounds to ones with light ones. Back in the land of all character prompts, text was usually a light grey (or amber or green, for really old systems) on black. I still use a light grey on black display whenever possible; even as I type this, it's grey on black (what you're reading isn't, because you're seeing my text color of #7700FF, or 119,0,255, or <giggle> 011101110000000011111111). Paper is using subtractive color, which is why it's usually black on white. No ink is white, all colors of ink is black. Computers: no light is black, all colors of light is white.

Then when people started making GUIs (Graphical User Interfaces, for those who missed that page), they decided they wanted it "user-friendly" and people wanted to see what they were used to with paper, which was black on white. So any word processer you load in a GUI will be black on white, just about any sort of application will be black on white. It hurts my eyes. It's like trying to color a piece of paper black everywhere except where you want the writing. Harder on the monitor too. (Though admittedly, the monitor doesn't really complain once you get past 2-bit capability.)