Color Palette Generator

Press SPACE to generate new colors.

Keyboard Shortcuts

Speed up your workflow with these keys

SPACEGenerate New

CCopy Whole Palette

Design System Color Palette & Harmonies Workspace

Color variables form the foundation of accessible UI designs. This companion tool lets you calculate WCAG contrast ratings and scale color token systems instantly.

Figma Design Use Cases

•Defining semantic color tokens (Primary, Secondary, Success, Warning) for Figma libraries.
•Auditing color combinations against Web Content Accessibility Guidelines (WCAG 2.1) contrast boundaries.
•Generating color harmonies (complementary, split-complementary, triadic, analogous) from a single brand hex value.

Step-by-Step Walkthrough

1
Input your primary brand color in HEX, RGB, or HSL format inside the color inspector field.
2
Inspect the dynamically calculated accessibility contrast scores against white and dark backgrounds.
3
Explore the auto-generated visual harmony palettes under the palette preview grid.
4
Click on any generated hex code to copy the design token directly into your Figma color panel.

Practical Design Examples

Brand Primary Blue: HEX #0284c7 maps to HSL 201° 98% 39% (Excellent contrast on light backgrounds).

Triadic Harmony Set: For base color #ef4444 (Red), the tool suggests #4ade80 (Green) and #60a5fa (Blue) for UI visual accents.

Educational Concepts

Color models translate physical light wavelengths into computer coordinates. Unlike RGB (Red, Green, Blue) which is optimized for cathode ray tubes, HSL (Hue, Saturation, Lightness) organizes color coordinates logically for human designers, allowing you to create tints and shades simply by altering the Lightness parameters.

How It Compares to Alternatives

Feature	Our Web Companion Tool	Standard Alternatives / Plugins
Contrast Auditing	Instant, inline scoring	Needs separate Figma plugins
Harmonies Math	Calculated instantly on the fly	Manual manual color picking
Variables Scaling	Standardizes HSL tokens directly	Rough visual guesses

Frequently Asked Questions

How many colors should be in a design system palette?

A standard design system usually works with 3-5 core brand colors: a primary brand color, a secondary accent color, and supporting neutral/semantic shades.

What are locked colors in the generator?

Locking a color holds its HEX value constant. This allows you to generate new color combinations around that anchor hue, ensuring your primary theme remains unified.

What is the difference between custom and random palettes?

Random palettes spin all color values dynamically, while custom palettes are generated by locking specific core hues and allowing the algorithm to choose harmonic pairs.

How do I import these colors into Figma?

You can click Export and copy the HEX array, then paste individual HEX codes into the color input box in Figma's Fill properties panel, or map them as Variables.