Splish Splash Color Scale

Not Accessible

Base Color: Accessible

Live Component Preview

See how your colors work in real UI components

Buttons & Actions

Forms & Inputs

Cards & Containers

Card Title

This is a sample card with your color scheme applied.

Alerts & Messages

Success! Your action was completed successfully.

Warning! Please review your input.

Error! Something went wrong.

Typography & Text

Main Heading (H1)

Section Heading (H2)

Subsection (H3)

This is a paragraph of body text that demonstrates how your color scheme works with different text elements. Here's a link within the text.

Muted text for secondary information.

Navigation

Preview in Dark Mode Use Accessible Colors

Export Your Color Scale

Export Format:

Include Dark Mode Scale Include Original Scale (Non-Accessible)

How the Color Scale Generator Works

The Accessibility-First Foundation

Your input color becomes Level 400 - the accessible foundation of the entire scale.
This base color is validated against WCAG AA standards for both black and white text, ensuring perfect readability.
From this proven accessible anchor, the entire color scale is mathematically derived to maintain visual harmony while preserving accessibility relationships.

Core Features

Scale Generation

Choose your base color and scale configuration (1, 3, 5, 7, or 9 levels). The generator creates harmonious color variations using advanced HSL interpolation.

Accessibility First

Level 400 is automatically validated against all WCAG AA criteria (normal/large text × black/white backgrounds). The entire color scale is built from this accessibility-verified base color.

Smart Dark Mode

When your base color doesn't pass all accessibility tests, the tool generates accessible light and dark mode alternatives automatically.

Export Ready

Export your color scales in 10+ formats including CSS variables, Tailwind config, Figma tokens, Swift, Android XML, and more.

Technical Implementation

Color Science: Uses HSL color space with piecewise linear interpolation for natural color progression.

Accessibility Testing: Full WCAG AA compliance testing with 4 criteria validation (normal/large text × black/white backgrounds).

Scale Configurations: Flexible level systems from minimal (1 level) to extended (9 levels) with proper base level handling.

Real-time Updates: Debounced color picker input with smooth transitions and copy-to-clipboard functionality.

Enhanced Color Scale Generator ECSG