OKLCH color space creates colors that are perceptually uniform, but that doesn't mean they look vibrant.
So, think of the "Vibrancy Boost" as a way to make your colors "pop" more.
It works by slightly increasing the chroma of the ramp colors, which makes them more vibrant without
compromising accessibility. The base color is not affected.
Why is this needed?
It's not particularly "needed", but I wanted to provide designers with an extremely easy way to make
their OKLCH color ramps simulate the vibrant colors of the HSL color space while still making ramps
fully compliant with WCAG accessibility standards.
What are those percentages?
- 0% means there is no change in the "natural" chroma progression.
- 50% means the chroma of the ramp is increased by 1.5.
- 100% means the chroma of the ramp is increased by 2.
Note: The base color may or may not be affected by the Vibrancy Boost. If it gets affected, that's
because the chroma of the base color is too low, and the algorithm needs to increase it to make the
ramp consistent.
Dang!
Color-Ramp.com is the only app that gives you these features in an INCREDIBLY-EASY-TO-USE interface.
There is no other ramp generator, color palette generator, or any other tool out there that does what
Color-Ramp.com does. Not even Figma plugins.
OKLCH
My Ramps (OKLCH)