Do locked colors change when I shuffle?

No. Locked colors keep their exact value, alpha and position. Shuffle regenerates only the unlocked slots, and harmony or seed changes also leave locked colors untouched.

Which harmony modes are supported?

Analogous, complementary, split complementary, triadic, tetradic and monochromatic. Hue offsets are calculated in OKLCH, so each mode produces a visibly different palette structure.

How is the 50–950 tonal scale generated?

The seed color is converted to OKLCH and placed on eleven fixed lightness targets from 50 to 950. Lightness always descends from 50 to 950, and any tone outside sRGB has its chroma reduced until it fits.

Which export formats are available?

CSS custom properties, SCSS variables, a Tailwind v3 theme extension, JSON design tokens and a plain array. Exports use a sanitized namespace such as primary, so the output is always syntactically valid.

Color Palette Generator

Runs locally in your browser

Build lockable harmony palettes, OKLCH tonal scales and design tokens

Seed Color

Accepts HEX with alpha, RGB, HSL, OKLCH and named CSS colors.

HarmonyColors

Palette Colors

Color 1
Select for Gradient
Color 2
Select for Gradient
Color 3
Select for Gradient
Color 4
Mapped to sRGB by reducing chroma.
Select for Gradient
Color 5
Select for Gradient

Inspector & Tokens

Inspect

Color 1

HEX: #6366F1
RGB: rgb(99 102 241)
HSL: hsl(238.732 83.529% 66.667%)
OKLCH: oklch(58.54% 0.2041 277.117)

Tints

#767FF5
#8B96F8
#A1ADFA
#B9C2FC
#D1D8FD

Shades

#5154C6
#40439D
#303376
#202351
#12142E

Open in Color Converter

Contrast

Text Size

Opaque Backdrop

Ratios describe these color combinations, not page certification. Normal text AA 4.5:1 and AAA 7:1. Transparent pairs are composited over the backdrop.

Contrast: Foreground / Background (Normal Text)
Foreground \ Background	1	2	3	4	5
1 `#6366F1`	1.00 Fail	1.18 Fail	1.23 Fail	1.42 Fail	1.49 Fail
2 `#3C69C0`	1.18 Fail	1.00 Fail	1.45 Fail	1.20 Fail	1.76 Fail
3 `#8F72EA`	1.23 Fail	1.45 Fail	1.00 Fail	1.74 Fail	1.22 Fail
4 `#0063A3`	1.42 Fail	1.20 Fail	1.74 Fail	1.00 Fail	2.11 Fail
5 `#B27FE0`	1.49 Fail	1.76 Fail	1.22 Fail	2.11 Fail	1.00 Fail

Export

Token OutputExport Source

Namespace

Colors in Export: 5 (Regular Palette)

:root {
  --primary-1: #6366F1;
  --primary-2: #3C69C0;
  --primary-3: #8F72EA;
  --primary-4: #0063A3;
  --primary-5: #B27FE0;
}

Import

Palette Data

Paste an exported CSS/SCSS, Tailwind v3 JSON config, JSON design tokens, array, or comma/newline color list. Eleven-tone imports must be ordered from light to dark.

Integration

Gradient selection: 0 / 6

Select 2–6 colors in your desired order. No colors are silently truncated.

All generation, contrast and exports run locally. No colors are uploaded.

Color ConverterConvert colors across CSS, mobile, and design-token formats Gradient GeneratorBrowse curated CSS gradients or build linear, radial, and conic ones Image Color ExtractorPick exact pixel colors and extract dominant palettes from any image

Color Palette Generator

Generate editable, lockable color systems with perceptual OKLCH tones and usable design tokens.

Options

Choose a seed or random workflow, inspect/edit colors and lock the ones to preserve before Shuffle. Harmony groups generate perceptual hue offsets; manual locks can override them. Tonal Scale preserves the regular palette and produces exactly 50–950. Its fixed lightness targets need not place the seed at 500. Inspect tints/shades and four formats, review contrast, then copy or download one of five token formats.

Contrast

Source alpha is retained; contrast composites background then foreground over the chosen opaque backdrop. Results describe pairs, not accessibility certification. Eleven-tone imports must descend in lightness. Color data stays local; browser storage is optional. Select 2–6 colors explicitly for a locale-aware gradient handoff. Reset and imports can be undone.

Color Palette Generator

Palette Colors

Inspector & Tokens

Inspect

Contrast

Export

Integration

Related Tools