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...
For further actions, you may consider blocking this person and/or reporting abuse
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?
Hey Daniel, you can use any contrast ratio you would like, you don't need to go 5 decimals. Try
1.1, or1.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 is0.05(black) and the last is1.05(white). So the scale factor is0.05and 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 of1.05/0.05 = 21, which will always be a Real Number.Nice palette! Have you seen ColorBox by Lyft Design? Also great for creating non-linear stepped palettes.
Thanks! I haven't seen it yet, but OMG it's an amazing tool!