Color Ramp Generator

About this plugin

Introducing the Color Ramp Generator plugin - designed to streamline your workflow and ensure accessibility across all your designs. This tool allows you to generate a color ramp from any HEX color you provide, ensuring each color meets predefined contrast ratios for accessibility.

Simply enter your HEX code (with or without the “#”), give it a name and the plugin will automatically generate a 15-color gradient. It adjusts the lightness to meet the exact contrast ratios, while preserving the hue and saturation of your colors.

This color system integrates accessibility directly into your design process. In my past projects, clients often provided incomplete brand guidelines, especially regarding accessibility. To solve this, I created a method to generate accessible color ramps, assigning each shade a number for easy reference. I specifically built this system to support white-labeling requirements, enabling quick and easy customization for different brands while maintaining accessibility standards.

Each color in the palette is numbered from 5 to 100, with the darkest color assigned “5” and the brightest color assigned “100.”

Here’s the key feature: a points-based color system.

• A 40-point difference between shades meets a 3:1 contrast ratio.

• A 50-point difference meets a 4.5:1 ratio.

• A 60-point difference meets a 7:1 ratio.

This system allows you to easily achieve AA and AAA accessibility standards by assigning colors to objects accordingly.

Cross-Palette Accessibility: This feature ensures that colors from different palettes are also accessible when combined. For example, Color 30 from one palette and Color 80 from another palette will automatically have a 50-point difference, which meets the 4.5:1 contrast ratio requirement. This makes it easy to mix colors from different palettes while maintaining accessibility.

The output generated is clean and ready for use in your design system, ensuring that your designs not only meet accessibility standards but also look polished and professional.

With this system, you can reduce your toolkit setup time from days to under a minute, saving 99% of the time.