DEV Community

Discussion on: Grayscale Color Palette with Equal Contrast Ratios

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.