Palette Generator
Build palettes and export a full light + dark theme as CSS variables or Tailwind tokens.
About the Palette Generator
Pick a base color and generate complementary, analogous, triadic, tetradic or monochromatic palettes. Every palette also produces a 50-950 shade scale and a complete light and dark theme — background, foreground, primary, secondary, muted, accent, destructive, border, input and ring — with readable text colors chosen by contrast. Export as CSS custom properties, Tailwind v4 @theme, a Tailwind v3 config object, SCSS variables or JSON design tokens.
Examples
Complementary from indigo
#6366f1Output
#6366f1, #a9a663Keyboard shortcuts
- Copy the main outputCtrl / ⌘ + Shift + C
- Download the resultCtrl / ⌘ + S
- Share this toolCtrl / ⌘ + Shift + S
- Reset the inputsAlt + R
- Open the tool search paletteCtrl / ⌘ + K
Related tools
Color Blindness Simulator
Color
Simulate how a palette looks with common color vision deficiencies.
Color Converter
Color
Convert colors between HEX, RGB, HSL, HWB, OKLCH and CMYK.
Color Mixer
Color
Blend two colors with a ratio slider and preview CSS blend modes.
Contrast Checker
Color
Check WCAG 2.1 contrast ratio between two colors.
Gradient Palette Extractor
Color
Extract and normalize colors from CSS gradients or lists.
Hex to SwiftUI & UIColor Converter
Color
Turn a hex color into SwiftUI, UIKit and asset catalog code.
Frequently asked questions
Read more
- From one brand colour to a full light and dark theme
How a single hex value becomes a 50-950 shade scale and a complete light and dark token set — and how to export it as CSS variables or Tailwind theme tokens.
Version 2.0.0 · Updated 2026-09-10 · Runs entirely in your browser