Palette Daddy

Color palette generator for design systems.

Palette Daddy is a free color palette generator that turns any HEX, OKLCH, or HSL color into a complete 11-step accessible UI scale for design systems. It uses APCA, the perceptual contrast algorithm being adopted for WCAG 3, to keep contrast consistent across the scale — then exports the result as a Design Tokens (DTCG) JSON file you can drop straight into Figma.

Color

Matisse

Color Palette Examples

Skill Assessment
Operating System
AndroidiOSMacOSWindows
$55,024
MonTueWedThuFri
Training shoes

Training shoes

$49.99

Training shoes are designed for comfort and support during workouts.

Expenses
$ 14,919
Household
$ 5,222
Groceries
$ 3,431
Rent
$ 6,266
Energy Activity
Calories
1,623/2,000 kcal
Steps
8,328/10,000 steps
Exercise
25/120 min
Calories
700 kcal
Shoes
Price Range
$100
$500
Size
Total Revenue
3.3%
$228,441
Mo
Tu
We
Th
Fr
Sa
Su
Daily Active Users
12,543
Scooter Saving
$150 of $350
Blog
Pink gerbera daisy in side profile against a soft gray gradient background
Productivity Hacks for Life on the Road
Work
Orange citrus-slice pool float drifting on bright blue swimming pool water
The Ultimate Digital Nomad Toolkit
Travel
Arctic seascape with floating ice and distant icebergs under a clear blue sky
Design in Cross-Functional Teams
Design
Young woman in a white wide-brim hat and tank top under a deep blue twilight sky
Building a Side Project That Ships
Engineering
Close-up portrait of a woman in warm low-key lighting with her eyes downcast
Coffee Shops Worth the Detour
Lifestyle

Color Schemes

Pairings drawn from classic color theory — lock the ones you like and respin to discover new combinations.

How It Works

From one input color to a production-ready scale in under thirty seconds — no spreadsheets, no contrast guesswork.

  1. 01

    Pick a color

    Drop in a HEX, OKLCH, or HSL value — or noodle on the sliders until it feels right.

  2. 02

    Generate the scale

    We build a full set of 11 accessible UI shades (50–950) anchored to the color you chose. Pick Tailwind-style or APCA-tuned contrast.

  3. 03

    Ship to Figma

    Hit export to download a Token Studio JSON file. Drop it into Figma and your design system gets the new palette in seconds.

Frequently Asked Questions

Everything designers and design system folks ask before they start generating.

What is a color palette generator?
A color palette generator turns one input color into a full set of related shades — typically 9 to 11 steps from very light to very dark — that work together as a system. Designers use them to build brand palettes, UI color scales for design systems, and accessible color schemes without hand-mixing every shade.
How do I generate a color palette for my design system?
Pick the brand or seed color you want to anchor your scale, choose which step it should map to (500 is the default), and let the generator build the lighter and darker shades around it. Palette Daddy gives you Tailwind-style aesthetics or APCA-tuned contrast — either way, you get a complete, production-ready scale you can drop into a design system.
Are the generated colors accessible?
Yes — every shade is checked against APCA, the modern perceptual contrast algorithm being adopted for WCAG 3. The text and indicator colors on each swatch are picked automatically for legibility, and our APCA mode produces scales where white text on dark shades and dark text on light shades reliably hit usable contrast.
Can I export the palette to Figma?
One click. Palette Daddy exports a Design Tokens (DTCG) JSON file that's compatible with Figma Token Studio and any other tool that reads the design tokens spec. Import the file in Figma and your variables, color styles, and tokens are ready to use.
What's the difference between the Tailwind and APCA modes?
Tailwind mode emulates the visual character of Tailwind's color scales — vibrant, balanced, and aesthetically pleasing. APCA mode trades a bit of vibrance for contrast consistency: shades are tuned so that, for example, white text on the 600 shade always lands at a similar APCA Lc value, regardless of the hue. APCA is great for SaaS interfaces where you need predictable contrast across the whole system.
Does it work for dark mode?
The tool itself ships with a light/dark toggle so you can preview the palette on both surfaces. The generated scale is theme-agnostic — you can use the lighter shades as backgrounds in light mode and the darker shades as backgrounds in dark mode. The example components on the page automatically re-skin to show you both contexts.
Is Palette Daddy free?
Yes — generating, copying, and exporting palettes is free. No login, no watermark, no daily limit.

New Color Tools - No Spam

Occasional notes when we ship a new feature, a new export format, or a fresh batch of palette presets. Unsubscribe in one click.