I'm not very good at math.

I have a range of colors. The lightness have a range of 100% down to 10%. It starts off very slow but then follows a more linear curve.

I made up these numbers by hand but it should probably be done mathematically. Is there a good formula for that?

I also think it would be better if the slow start is not linear but increasing up to 10% steps.

I would use the formula in javascript or something to generate all numbers in one go.

--red-1: oklch(100% 0.02 30);
--red-2: oklch(98% 0.03 30);
--red-3: oklch(96% 0.06 30);
--red-4: oklch(92% 0.12 30);
--red-5: oklch(80% 0.18 30);
--red-6: oklch(70% 0.2 30);
--red-7: oklch(60% 0.2 30);
--red-8: oklch(50% 0.2 30);
--red-9: oklch(40% 0.2 30);
--red-10: oklch(30% 0.2 30);
--red-11: oklch(20% 0.2 30);
--red-12: oklch(10% 0.2 30);

enter image description here



You must log in to answer this question.

Browse other questions tagged .