DEV Community

Cover image for Grayscale Color Palette with Equal Contrast Ratios

Grayscale Color Palette with Equal Contrast Ratios

Bence Szabo on January 23, 2020

Ever needed a grayscale color palette for different surfaces, shadows, or states in your web app? I created a little utility to generate such palet...
Collapse
 
danroc profile image
Daniel da Rocha

Hey Ben, thanks for your tool and article!
However, I got a bit confused as to which contrast ration to use. Looking at your tool, I see I can adjust the contrast ratio, but that feels quite arbitrary to me. Especially when you have to use 5 decimal points for that.

Would it have the same effect if, instead, you asked: how many gray steps do you want? and derive a contrast ratio from that?

Collapse
 
finnhvman profile image
Bence Szabo

Hey Daniel, you can use any contrast ratio you would like, you don't need to go 5 decimals. Try 1.1, or 1.2, etc. The only reason I used such an arbitrary number is to span out the palette to exactly white #ffffff. Otherwise the last color will be something like #f8f8f8, I guess that could be good enough for most use-cases.

I thought about making it so that you would only need to input the number of steps, but that would require some more math (creating the inverse of a non-linear function, see my other post I embedded). In the end that would produce the same contrast ratio.

If you think about it, these colors are a Geometric Progression of (luminance value + 0.05), where the first number is 0.05 (black) and the last is 1.05 (white). So the scale factor is 0.05 and the common ratio of the geometric progression will be the contrast ratio we're looking for. To get n + 1 number of colors we only need to find the nth root of 1.05/0.05 = 21, which will always be a Real Number.

Collapse
 
txmur profile image
Thomas X. Murray

Nice palette! Have you seen ColorBox by Lyft Design? Also great for creating non-linear stepped palettes.

Collapse
 
finnhvman profile image
Bence Szabo

Thanks! I haven't seen it yet, but OMG it's an amazing tool!