Color Palette Editor

Create and manage your Tailwind CSS color palettes

Loading...
Loading...

gray

gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-950

red

red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-950

orange

orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-950

amber

amber-50
amber-100
amber-200
amber-300
amber-400
amber-500
amber-600
amber-700
amber-800
amber-900
amber-950

yellow

yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-950

lime

lime-50
lime-100
lime-200
lime-300
lime-400
lime-500
lime-600
lime-700
lime-800
lime-900
lime-950

green

green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-950

emerald

emerald-50
emerald-100
emerald-200
emerald-300
emerald-400
emerald-500
emerald-600
emerald-700
emerald-800
emerald-900
emerald-950

teal

teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
teal-950

cyan

cyan-50
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-950

sky

sky-50
sky-100
sky-200
sky-300
sky-400
sky-500
sky-600
sky-700
sky-800
sky-900
sky-950

Color Editor

Valid

Format: JSON object with color families as keys and color scales as nested objects.

Example: { "blue": { "500": "#3b82f6" } }