MetaTools

Palette

Step 1 · Base color

Paste a hex value or pick a color from the selector.

Presets

Step 2 · Harmony mode

Step 3 · Export tokens

:root {
  --palette-1: #14CBDB;
  --palette-2: #249EEB;
  --palette-3: #2463EB;
  --palette-4: #4649E7;
  --palette-5: #501CD4;
}

Interactive controls

Drag around the wheel to change hue. Then drag inside the tone panel to tune saturation and lightness. The harmony markers update live.

Active color

Hue
221°
Saturation
83%
Lightness
53%

Tip

Click any palette card to copy its hex, or use it as the new base to explore variations quickly.

Preview card

Interface palette

A quick visual check for surface tone, readable text, and accent contrast.

Accent

Base

#14CBDB

Support

#249EEB

Surface

#2463EB

Accent

#4649E7

Highlight

#501CD4

Generated palette

#14CBDB

rgb(20, 203, 219)

hsl(185, 83%, 47%)

#249EEB

rgb(36, 158, 235)

hsl(203, 83%, 53%)

#2463EB

rgb(36, 99, 235)

hsl(221, 83%, 53%)

#4649E7

rgb(70, 73, 231)

hsl(239, 77%, 59%)

#501CD4

rgb(80, 28, 212)

hsl(257, 77%, 47%)

Overview

Generate design palettes from a base color using analogous, complementary, triadic, split-complementary, and monochrome modes.

Generate harmonious color palettes from one base color and export them as reusable tokens.

Common workflows

  • Generate shades, tints, and alternate color formats from one base color.
  • Build palette harmonies and compare them in a UI preview before exporting values.
  • Create CSS-ready gradients, radius values, shadow layers, and typography scales for frontend implementation.

FAQ

Which palette types are included?

The generator supports analogous, complementary, triadic, split-complementary, and monochrome palette modes.

Can I export the palette for CSS?

Yes. You can copy the full palette as CSS custom properties for design system or frontend use.