Color Scale Generator

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

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.

Accessible scale workspace

Audit contrast, preview a small UI and export the exact generated scale

This workspace reuses the same OKLCH scale generated above. It adds white/black contrast evidence, scale-pair statistics, a live interface preview and portable CSS/JSON/Tailwind-style exports.

Export formatToken prefixPreview emphasis

—Scale steps

—AA pairs in scale

—White-text AA steps

—Black-text AA steps

Step	HEX	White	Black	Best text

Palette preview

Readable hierarchy from the same scale

Check text, surface and action contrast together before exporting tokens.

Surface card

Secondary surface

Export preview

Refresh after changing the base HEX or step count above.

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.

Practical guide and verification

Treat the scale as a design system candidate

The workspace reuses the exact OKLCH-derived scale above, then shows contrast evidence, an interface preview and export formats. Generated step labels are local tokens, not claims that the colors match Tailwind, Material or another framework’s official palette.

Check foreground and background pairs, not colors in isolation

Accessibility depends on the luminance contrast between two colors used together. The evidence table reports white and black text ratios for each swatch and the pair count within the scale, but the actual interface still needs the intended font sizes, states and non-text contrast reviewed.

Use the preview to catch hierarchy problems

A technically valid set of colors can still produce weak visual hierarchy. Inspect buttons, body text, borders and surfaces together and confirm that important actions remain distinguishable without relying only on hue differences.

Expect gamut and device differences

The scale is calculated and displayed in browser color models and converted to sRGB values. Out-of-gamut adjustments, displays, operating-system color management and print workflows can change appearance, so a screen preview is not a physical color proof.

Export tokens only after naming the role

CSS, JSON or Tailwind-style exports make the values portable, but token names should reflect their intended semantic role in the consuming system. Keep the generated numeric scale as a starting point and map it to primary, surface, text or status roles after the contrast and hierarchy review.