Generate an exploratory color scale

Create a light-to-dark ramp around one base hue with bounded OKLCH adjustments.

Base HEX

Steps

CSS variables

The scale preserves a practical hue/chroma relationship but converts back to sRGB for display, so out-of-gamut values can clip. Labels are generated steps, not official Tailwind/Material framework colors.

Connected color workflow

v10.74 keeps the established color/conversion widgets intact while connecting picking, palette generation, contrast review, visual preview, scales and CSS/JSON reuse. Color work stays in the browser, and recent palettes can be stored locally without an account.

Color and accessibility boundaries

HEX/RGB/HSL/HSV/OKLCH conversions are numerical color-model operations. CMYK output is an RGB-derived approximation rather than ICC-profiled print proofing. WCAG contrast ratios measure luminance contrast only and do not certify a full interface. Color-blindness previews are design simulations, not medical tests.

How to use this Color Scale Generator

Generate a light-to-dark color scale from one base color using bounded OKLCH adjustments, preview every step, and copy CSS variables.

Enter, paste, upload, or choose the inputs shown in the tool above.
Adjust the available options for the result you need.
Review the output before copying, downloading, or using it elsewhere.

What this tool does

Create an exploratory 5–15 step color ramp locally with explicit limits around gamut clipping and framework naming.

Practical tips and limits

Review the inputs and result before using the output elsewhere. Keep the original data when the operation changes or replaces content.