Shades of Gray

March 30, 2010

Gray can be a useful color in Web design. Sometimes, I need a more subtle shade of gray, especially at the higher end of the value scale. Instead of guessing, I created some tables so I could see the variations.

Hexadecimal Grayscale with Even Numerical Pairs

The grayscale below uses even pairs of hexadecimals in each #RR-GG-BB position. But, maybe I want a more subtle shade of gray.

00	11	22	33	44	55	66	77	88	99	aa	bb	cc	dd	ee	ff

Finding the Variations

How do I go about finding more variations in grays?

f0	f1	f2	f3	f4	f5	f6	f7	f8	f9	fa	fb	fc	fd	fe	ff
e0	e1	e2	e3	e4	e5	e6	e7	e8	e9	ea	eb	ec	ed	ee	ef
d0	d1	d2	d3	d4	d5	d6	d7	d8	d9	da	db	dc	dd	de	df
b0	b1	b2	b3	b4	b5	b6	b7	b8	b9	ba	bb	bc	bd	be	bf
a0	a1	a2	a3	a4	a5	a6	a7	a8	a9	aa	ab	ac	ad	ae	af
90	91	92	93	94	95	96	97	98	99	9a	9b	9c	9d	9e	9f
80	81	82	83	84	85	86	87	88	89	8a	8b	8c	8d	8e	8f
70	71	72	73	74	75	76	77	78	79	7a	7b	7c	7d	7e	7f
60	61	62	63	64	65	66	67	68	69	6a	6b	6c	6d	6e	6f
50	51	52	53	54	55	56	57	58	59	5a	5b	5c	5d	5e	5f
40	41	42	43	44	45	46	47	48	49	4a	4b	4c	4d	4e	4f
30	31	32	33	34	35	36	37	38	39	3a	3b	3c	3d	3e	3f
20	21	22	23	24	25	26	27	28	29	2a	2b	2c	2d	2e	2f
10	11	12	13	14	15	16	17	18	19	1a	1b	1c	1d	1e	1f
00	01	02	03	04	05	06	07	08	09	0a	0b	0c	0d	0e	0f

I can start to see there isn’t much difference between these shades, and thus I probably won’t use them, unless there’s a special need. #eeeeee, #dddddd, #bbbbbb, and #aaaaaa will do just fine. It’s the highest values in the first mix that become useful.