Color Ramp Generator

Generate and analyze color ramps for design systems with accessibility in mind. Instantly check contrast, export palettes, and ensure WCAG compliance.

How the Color Ramp Generator Works

The generator creates color ramps based on contrast ratio targets against a background color.

The Algorithm Explained

• Color Variation Generation: The algorithm creates hundreds of color variations from your reference colors by adjusting brightness, saturation, and lightness while preserving the original color character. These variations serve as the building blocks for all other methods. Example: A vibrant green reference color generates variations from very light to very dark, all maintaining the green hue and vibrancy. These variations are then used for interpolation and adjustment methods.
• Smart Color Selection: For each target contrast ratio, the algorithm finds the best color using three methods in order of preference: Interpolation (mixes two color variations), Adjustment (tweaks brightness/saturation), and Generation (creates new colors using the average hue/saturation).
• Vibrancy Preservation: The algorithm maintains the vibrancy of your reference colors throughout the ramp, especially for darker shades. Darker colors get boosted saturation, lighter colors get moderate saturation, ensuring the ramp maintains visual consistency.
• Locked Color Placement: Locked colors are automatically placed in the slots that best match their actual contrast ratios, ensuring they appear where they make the most sense in the ramp. Example: A locked color with 3.2:1 contrast will be placed in the 3.3:1 slot, not necessarily slot 1.

How to Use the Generator

1. Set Background Color: Choose the background color that your ramp will be used against (usually white or black).
2. Define Contrast Targets: Set the contrast ratios you want to achieve. Common targets: 1.5, 3, 4.5, 7, 21.
3. Add Reference Colors: Provide specific colors you want to include in the ramp. These will be preserved exactly.
4. Lock Important Colors: Use the lock icon to prevent specific colors from being modified during generation.
5. Generate and Review: Click "Generate Ramp" to create your color ramp and add it to your collection.

Understanding the Preview

• Target Ratio: The contrast ratio you specified for this slot
• Actual Ratio: The real contrast ratio of the generated color
• Method: How the color was created (interpolation, adjustment, or generation)
• Lock Icon: Shows when a color is locked and won't be modified

Don't worry if actual ratios don't exactly match targets - the algorithm prioritizes creating usable, visually pleasing color ramps.