Accessible color scales, the open-source way.
Add to Penpot
Open source, open standards
UI Color Palette reaches an open-source design tool built on open standards like design tokens.
Everything, with tokens
The full generate → master → deploy flow — styles, modes, export — with your palette delivered as tokens (W3C DTCG, Tokens Studio, Style Dictionary).
Generate, master, and deploy accessible color scales end to end — with every shade delivered as tokens, right where Penpot expects them.
Design tokens, Tailwind & CSS export
Production-ready handoff.
Code
(14)
Tailwind v4 (CSS)
@import "tailwindcss";@theme { --color-*: initial; /* Light - Primary */ --color-light-primary-source: #fff700; --color-light-primary-80: #0b0100; --color-light-primary-70: #240d00; --color-light-primary-60: #452900; --color-light-primary-50: #6a4d00; --color-light-primary-40: #937500; --color-light-primary-30: #b99e00; --color-light-primary-20: #dbc400; --color-light-primary-10: #f6e127; /* Light - Neutral */ --color-light-neutral-source: #212003; --color-light-neutral-80: #050300; --color-light-neutral-70: #171401; --color-light-neutral-60: #333013; --color-light-neutral-50: #555231; --color-light-neutral-40: #7c7856;
WCAG & APCA contrast checks
Go from a rough idea to a complete scale in seconds, no color theory required.
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
AI-powered generation
Themes like Cyberpunk, Minimalist, Corporate…
Cyberpunk futuristic interface with neon accents
Cyberpunk
Minimalist
Pastel
Corporate
Nature
Vintage
Landing page
Blog
Resume
Portfolio
Generate documentation
E-commerce
Generate colors (⌃⏎ or ⌘⏎)
Switch platform
See the dowloads →
Compare plans
See the pricing →
Explore the features
See the capabilities →
Accessible color scales, the open-source way.
Add to Penpot
Open source, open standards
UI Color Palette reaches an open-source design tool built on open standards like design tokens.
Everything, with tokens
The full generate → master → deploy flow — styles, modes, export — with your palette delivered as tokens (W3C DTCG, Tokens Studio, Style Dictionary).
Generate, master, and deploy accessible color scales end to end — with every shade delivered as tokens, right where Penpot expects them.
Design tokens, Tailwind & CSS export
Production-ready handoff.
Code
(14)
Tailwind v4 (CSS)
@import "tailwindcss";@theme { --color-*: initial; /* Light - Primary */ --color-light-primary-source: #fff700; --color-light-primary-80: #0b0100; --color-light-primary-70: #240d00; --color-light-primary-60: #452900; --color-light-primary-50: #6a4d00; --color-light-primary-40: #937500; --color-light-primary-30: #b99e00; --color-light-primary-20: #dbc400; --color-light-primary-10: #f6e127; /* Light - Neutral */ --color-light-neutral-source: #212003; --color-light-neutral-80: #050300; --color-light-neutral-70: #171401; --color-light-neutral-60: #333013; --color-light-neutral-50: #555231; --color-light-neutral-40: #7c7856;
WCAG & APCA contrast checks
Go from a rough idea to a complete scale in seconds, no color theory required.
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
AI-powered generation
Themes like Cyberpunk, Minimalist, Corporate…
Cyberpunk futuristic interface with neon accents
Cyberpunk
Minimalist
Pastel
Corporate
Nature
Vintage
Landing page
Blog
Resume
Portfolio
Generate documentation
E-commerce
Generate colors (⌃⏎ or ⌘⏎)
Switch platform
See the dowloads →
Compare plans
See the pricing →
Explore the features
See the capabilities →
Accessible color scales, the open-source way.
Add to Penpot
Open source, open standards
UI Color Palette reaches an open-source design tool built on open standards like design tokens.
Everything, with tokens
The full generate → master → deploy flow — styles, modes, export — with your palette delivered as tokens (W3C DTCG, Tokens Studio, Style Dictionary).
Generate, master, and deploy accessible color scales end to end — with every shade delivered as tokens, right where Penpot expects them.
Design tokens, Tailwind & CSS export
Production-ready handoff.
Code
(14)
Tailwind v4 (CSS)
@import "tailwindcss";@theme { --color-*: initial; /* Light - Primary */ --color-light-primary-source: #fff700; --color-light-primary-80: #0b0100; --color-light-primary-70: #240d00; --color-light-primary-60: #452900; --color-light-primary-50: #6a4d00; --color-light-primary-40: #937500; --color-light-primary-30: #b99e00; --color-light-primary-20: #dbc400; --color-light-primary-10: #f6e127; /* Light - Neutral */ --color-light-neutral-source: #212003; --color-light-neutral-80: #050300; --color-light-neutral-70: #171401; --color-light-neutral-60: #333013; --color-light-neutral-50: #555231; --color-light-neutral-40: #7c7856;
WCAG & APCA contrast checks
Go from a rough idea to a complete scale in seconds, no color theory required.
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
AI-powered generation
Themes like Cyberpunk, Minimalist, Corporate…
Cyberpunk futuristic interface with neon accents
Cyberpunk
Minimalist
Pastel
Corporate
Nature
Vintage
Landing page
Blog
Resume
Portfolio
Generate documentation
E-commerce
Generate colors (⌃⏎ or ⌘⏎)
Switch platform
See the dowloads →
Compare plans
See the pricing →
Explore the features
See the capabilities →
Accessible color scales, the open-source way.
Add to Penpot
Everything, with tokens
The full generate → master → deploy flow — styles, modes, export — with your palette delivered as tokens (W3C DTCG, Tokens Studio, Style Dictionary).
Generate, master, and deploy accessible color scales end to end — with every shade delivered as tokens, right where Penpot expects them.
Open source, open standards
UI Color Palette reaches an open-source design tool built on open standards like design tokens.
Design tokens, Tailwind & CSS export
Production-ready handoff.
Code
(14)
Tailwind v4 (CSS)
@import "tailwindcss";@theme { --color-*: initial; /* Light - Primary */ --color-light-primary-source: #fff700; --color-light-primary-80: #0b0100; --color-light-primary-70: #240d00; --color-light-primary-60: #452900; --color-light-primary-50: #6a4d00; --color-light-primary-40: #937500; --color-light-primary-30: #b99e00; --color-light-primary-20: #dbc400; --color-light-primary-10: #f6e127; /* Light - Neutral */ --color-light-neutral-source: #212003; --color-light-neutral-80: #050300; --color-light-neutral-70: #171401; --color-light-neutral-60: #333013; --color-light-neutral-50: #555231; --color-light-neutral-40: #7c7856;
WCAG & APCA contrast checks
go from a rough idea to a complete scale in seconds, no color theory required.
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
AI-powered generation
Themes like Cyberpunk, Minimalist, Corporate…
Cyberpunk futuristic interface with neon accents
Cyberpunk
Minimalist
Pastel
Corporate
Nature
Vintage
Landing page
Blog
Resume
Portfolio
Generate documentation
E-commerce
Generate colors (⌃⏎ or ⌘⏎)
Switch platform
See the dowloads →
Compare plans
See the pricing →
Explore the features
See the capabilities →