Shades of Grey

In CSS, when I need a shade of grey, I often use hex rgb like #cccccc, #eeeeee etc. (or in short form, #ccc, #eee) I posed myself a question today: If by using repeated hex notation, do we evenly divide the grey space from #000000 to #ffffff? What I found was very interesting.

Let us invert the problem and try to divide the grey space (0 to 255 each rgb component) into 15 equal intervals.

Each of the component will then be equal to 255/15. First surprise – turns out that 255 is divisible by 15, and equals to 17.

255 = 15 x 17 (recall (n+1)(n-1) = n^2 – 1)

So, each shade of grey = 17*i, where 0<=i<=15 In base 16, (17*i)₁₆ = (16i + i)₁₆ = (ii)₁₆

So we would have two repeating digits in base 16: 00, 11, 22, 33 .. ee, ff

For every 17 point step in decimal, we do a 11 step in hex. Very cool! So it does turn out that by writing shades of grey with repeated hex values indeed partition the grey space equally!

Another easy observation is that when we subtract two subsequent repeated digits in base 16, we end up with 11₁₆.

See the Pen HlJie by Raj Madhuram (@rmadhuram) on CodePen.