Ever needed a grayscale color palette for different surfaces, shadows, or states in your web app? I created a little utility to generate such palette.
tl;dr: Scroll to the end to get the list of colors
I'm glad you asked. I could have just simply created a palette that started from black
#000000, and stepped through to white
#ffffff with let's say increments of
#080808. So something like (remember hexadecimal):
But this feels a bit off, mostly because we humans don't perceive colors as hexadecimal representations. Qualities like hue, saturation and lightness are much better interpretations of human color perception. When you compare two different gray colors against each other they will only differ in lightness. A common method to measure difference in lightness is calculating the contrast ratio.
The WCAG contrast ratio definition says:
(L1 + 0.05) / (L2 + 0.05), where
- L1 is the relative luminance of the lighter of the colors, and
- L2 is the relative luminance of the darker of the colors.
Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).
Actually, I already wrote an in-depth article about calculating the color contrast ratio, see below if you're interested:
All in all, the method to calculate the contrast ratio was already given.
My goal was to create a gray color palette on which each color against its adjacent color has the same contrast ratio. To generate such palette I only needed to step through the gray RGB space and store the colors that had enough contrast against the previous palette color. I picked the default contrast value of
1.10362 (that is roughly
1.1) so that the palette spans from
#000000 to exactly
#ffffff and consists of 30 individual colors. You can see the result in the embedded CodePen below, but feel free to play around by opening the Pen in Edit mode and modifying the value of
CONTRAST_RATIO in the first line of JS 🙂