COLOR LAB

Palette generator & color wheel

Color Lab builds palettes with harmony theory, mood, and design-system shade ramps — not just random swatches.

Pick a harmony and mood, lock colors you like, press Space to regenerate the rest, then export tokens or open contrast checks.

  • SpaceNew palette
  • LLock swatch
  • 1–8Focus swatch

Palette generator

Pick a harmony and mood. Lock colors you like, then hit Space to regenerate the rest.

Harmony
Mood / style

Color wheel

Drag the ring for hue, and the inner square for saturation and brightness.

RGB 255, 107, 53

HSL 16° 100% 60%

HSV 16° 79% 100%

OKLCH —

OKLAB —

CMYK —

Prefer OKLCH/OKLAB for UI tokens; RGB for screens; CMYK only for print.

UI token system

Separate from academic harmony: Primary / Neutral / Surface ramps for design systems (50–950, OKLCH + hue-shift).

UI preview

Live context preview

Home Work Start designing

Nova Color Lab

The same palette, on a real interface

Nav, buttons, chips, and inputs — see how roles hold up before Figma, CSS, or Unity.

Primary Success Warning Error

WCAG contrast matrix

Contrast ratio for every text/background pair in the current palette.

Color vision check

Palette strip plus sample text per simulation — open the full simulator for detail.

Browse themed palettes → Full accessibility test → Color blindness simulator →

Go deeper

Why you’ll love this

Nova Lab Color Lab combines harmony theory, mood styles, shade ramps, UI preview, and token export so you can move from idea to usable palette without hopping between apps.

How to jump in

  1. Pick harmony and mood

    Choose analog, complementary, triad, or 60-30-10 and set a mood that fits the project.

  2. Lock keepers, regenerate the rest

    Hit Space for a new palette; lock colors you like so only unlocked swatches change.

  3. Check contrast and export

    Review Primary/Neutral ramps, scan contrast, then export CSS, SCSS, or Tailwind tokens.

What you walk away with

  • Free, no account required
  • Harmony, mood, and UI preview in one flow
  • Multi-format export for designers and developers
  • Deep links to contrast and CVD tools

Where it shines

UI and design systems

Build button, surface, and text roles, then export tokens for engineering handoff.

Brand and illustration

Explore harmonic options for logos, posters, and moodboards in minutes.

Classroom workshops

Practice color theory on a live palette with no install required.

Quick answers

Is the palette generator free?

Yes. The palette generator and color wheel are free to use in the browser without signing up.

How is this different from Coolors?

You also get harmony controls, design-system ramps, accessibility checks, and token export on the same page.

Can I use the output in Figma or code?

Copy HEX values or export CSS, SCSS, Tailwind, and design tokens from the Export menu.

Is my data uploaded?

Palette generation runs on your device; everyday use does not require uploading images.

You’ll probably want these too

◇ Product Design →
Themed palettes Browse ready-made 4-color palettes by mood — or describe a project topic and let AI generate fresh themes. Accessibility contrast checker Measure text and background contrast against WCAG 2.2 — for readability tests on body copy, headings, and UI parts. Color vision simulator See how palettes and UI screenshots look under red-, green-, and blue-cone deficiencies — then fix pairs that collapse and keep contrast checking separate.

All tools →