Skip to main content
Vefapp · ColorsColor studio · 2026

Build a color palette, watch it come alive in Tailwind.

Intro

Pick a base color: paste a hex value, drag the color picker or choose one from the Tailwind palette. We generate a full 50–950 Tailwind scale, color-theory harmonies and the nearest Tailwind color, with ready-made @theme and config code you can copy straight into your project. Everything runs in your browser; nothing is stored.

Base color

Hex value, the color picker or a random color. Everything is computed from this color.

Basesky-600

#2B7DBA

oklch 0.57 0.122 245° · Δ0.026 from sky-600

Hex value
#

Palette

Shuffle a five-colour set, then click one to load it as the base. The scale below rebuilds from it.

Vefapp. palette

The first swatch is the base colour. The rest follow it. Click any colour to make it the base · the lock keeps a swatch when you shuffle.

Use these colours in a quote

Tailwind scale

A full 50–950 scale generated from your base color. Click a shade to copy its hex value.

Preview · @theme

@theme {
  --color-brand-50: #ecf7ff;
  --color-brand-100: #daecfd;
  --color-brand-200: #beddf9;
  --color-brand-300: #97c6ee;
  --color-brand-400: #65a6dc;
  --color-brand-500: #4292d0;
  --color-brand-600: #2b7dba;
  --color-brand-700: #1b6aa1;
  --color-brand-800: #195886;
  --color-brand-900: #184a70;
  --color-brand-950: #022641;
}

Color harmonies

Classic color-theory schemes, computed in OKLCH. Click to copy.

Complementary

2

Analogous

3

Triadic

3

Tetradic

4

Split-complementary

3

Monochromatic

5

Tailwind palette

Every default Tailwind color. The nearest match to your base is marked.

Click a swatch to make it your base color.

50
100
200
300
400
500
600
700
800
900
950
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

How it works

01

Perceptual color math

The scale and harmonies are computed in OKLCH, the same color space Tailwind v4 uses, so tones stay perceptually even instead of drifting muddy or over-saturated.

02

Anchored to the right shade

Your base color is pinned into the exact 50–950 slot that matches its lightness, and the rest of the scale is built around it.

03

Nearest Tailwind color

We compare your color against every default Tailwind color and show you the closest name and shade, so you can stay on the standard palette if you want to.

04

Ready to copy

Copy a full @theme block for Tailwind v4 or a classic config object, and paste it straight into your project.

More free tools

Next step

Need help turning these colors into a real website? We design and build websites and web apps with Tailwind, Next.js and Supabase.

Request a quote