New: Redesigned sidebar navigation
Accessible color palettes — generated in seconds, mastered with precision, deployed everywhere.
Generate
Create palettes in minutes with AI, images, color wheel, canvas, or 1M+ imported combinations.
Manage
Let the WCAG and APCA check Control every shade against WCAG & APCA. Filter, simulate color-blind vision, build light/dark modes.and advise
Deploy
Push to styles, variables, and tokens. Export Tailwind, CSS, and W3C Design Tokens — ready for production.
Create & Manage
Never starting with a blank palette
AI generation, image extraction, color wheel, canvas picker, or 1M+ imported combinations from Coolors, Realtime Colors, and Colour Lovers.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Cyberpunk futuristic interface with neon accents
Cyberpunk
Minimalist
Pastel
Corporate
Nature
Vintage
Landing page
Blog
Resume
Portfolio
Generate documentation
E-commerce
Generate colors (⌃⏎ or ⌘⏎)
Your colors at the same pace
Predefined lightness sets (Material 3, Tailwind, Ant Design) with your preferred color space — OKLCH, OKLAB, HSLuv, and more.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
Ease in
Sine
Distances and contrast mastering
Real-time WCAG 2.1 and APCA scores. Adjust every stop to reach the desired contrast ratio.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
UICP 20
Contrast playground
Preview text
The quick brown fox jumps over the lazy dog.
Font weight
Abc
Section title
Light foreground color
Dark foreground color
The quick brown fox jumps over the lazy dog.
WCAG 2.1 score
1.37
A
Fail
APCA score
Lc 20.6
Non-text
Fail
Readability score
19%
Minimum font size
777pt (400)
The quick brown fox jumps over the lazy dog.
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
Ease in
Sine
Light, Dark, and more
Unlimited color modes — light, dark, colorblindness simulations. Custom foreground colors for tailored ratios.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Color modes
(2)
Light
Dark
Design tokens
W3C (DTCG), Tokens Studio, Style Dictionary V3 & V4. Token sync with themes on Penpot.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Native tokens (JSON)
{ "$themes": [ { "name": "Light", "group": "Modes", "description": "", "selectedTokenSets": { "UICP Color Primitives/Light": "enabled" } }, { "name": "Dark", "group": "Modes", "description": "", "selectedTokenSets": { "UICP Color Primitives/Dark": "enabled" } } ], "$metadata": { "activeThemes": [], "tokenSetOrder": [ "uicp_color_primitives/light", "uicp_color_primitives/dark" ], "activeSets": [] }, "UICP Color Primitives/Light": { "primary.source": { "$type": "color", "$value": "#fff700", "$description": "Source color" }, "primary.80": { "neutral.source":
Local libraries
Create and update styles and variables directly from your palette.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
UICP Color Primitives
Published
Synchronize…
Sources
80
70
60
50
40
30
20
10
Primary
4.33
: 1
✗
4.85
: 1
✓
2.63
: 1
✗
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
4.47
: 1
✗
4.70
: 1
✓
2.68
: 1
✗
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
4.32
: 1
✗
4.86
: 1
✓
2.62
: 1
✗
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Sync with local styles
Sync with local variables
Sync & Export
Tailwind
V3 & V4 configs with CSS custom properties — copy, paste, ship.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
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;
Cloud sync
Push and pull palettes across Figma, Penpot, Sketch, and Framer.
Search palettes…
UICP Color Primitives
Shared
Custom, 1-10
3 source colors
・
64 shades/tints
・
2 color modes
The palettes list is complete
Publish
Community
Share your palettes with UI Color Palette users and find inspiration. Palettes froShare and discover palettes — Adobe Spectrum, Microsoft Fluent, and more.m Adobe Spectrum, Microsoft Fluent, and more — ready to use.
Search palettes…
Adobe・Spectrum 6.0.0・Neutral
Spectrum, Neutral 25-900 (Adobe)
1 source color
・
11 shades/tints
・
2 color modes
Bootstrap 5.3
Bootstrap, 100-900
11 source colors
・
104 shades/tints
・
No color mode
Microsoft・Fluent 2・Brand・Office Products
Fluent, 10-160 (Microsoft)
5 source colors
・
75 shades/tints
・
No color mode
Add to local
Load more palettes
Whether you're crafting a design system or shipping a side project — UICP meets you where you are.
Designers
You need accessible, consistent palettes that integrate seamlessly into your design workflow.
AI-powered color generation — from themes like Cyberpunk, Minimalist, Corporate, etc.
WCAG & APCA contrast checks — accessibility built into every shade
Native integration — sync styles and variables on Figma, Penpot, Sketch, and Framer
Developers
You want production-ready tokens and configurations, not a PNG screenshot of a palette.
Tailwind V3 & V4 configs — copy-paste CSS custom properties
W3C Design Tokens (DTCG) — standardized JSON for any token pipeline
CSS / SCSS export — ready for production
Extra extensible
Get the plugin close to your favorite environment. Use it on VSCode.
Simulations that empathize
Translate your color scale into different forms of color-blind vision — Red-weak, blue-weak, total blindness, etc.
More
Best-in-class presets
Scale your colors from existing color systems — Google Material, Tailwind, Ant Design, etc.
Colors in outer Spaces
Change the color space for perfect brightness and consistency — OKLCH, OKLAB, HSLuv, etc.
Ultra Handoff
Export your palettes in several formats to bootstrap your project for web, mobile—Apple SwiftUI, Android Compose, etc…
Retrospective 2025
2025 was a pivotal year for UI Color Palette. What started as a simple Figma plugin has transformed into a cross-platform mini-app.
Read more
News
New: Redesigned sidebar navigation
Accessible color palettes — generated in seconds, mastered with precision, deployed everywhere.
Book a demo
Get started
Generate
Create palettes in minutes with AI, images, color wheel, canvas, or 1M+ imported combinations.
Deploy
Push to styles, variables, and tokens. Export Tailwind, CSS, and W3C Design Tokens — ready for production.
Manage
Let the WCAG and APCA check Control every shade against WCAG & APCA. Filter, simulate color-blind vision, build light/dark modes.and advise
Create & Manage
Never starting with a blank palette
AI generation, image extraction, color wheel, canvas picker, or 1M+ imported combinations from Coolors, Realtime Colors, and Colour Lovers.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Cyberpunk futuristic interface with neon accents
Cyberpunk
Minimalist
Pastel
Corporate
Nature
Vintage
Landing page
Blog
Resume
Portfolio
Generate documentation
E-commerce
Generate colors (⌃⏎ or ⌘⏎)
AI-Generated colors
(5)
Alert
#FF0040
Primary
#00F0FF
Success
#00FF40
Text
#E0E0E0
Warning
#FF8000
Your colors at the same pace
Predefined lightness sets (Material 3, Tailwind, Ant Design) with your preferred color space — OKLCH, OKLAB, HSLuv, and more.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Sources
80
70
60
50
40
30
20
10
Primary
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
102.7
✓
Lc
0.0
✗
Lc
91.7
✓
Lc
17.1
✗
4.33
: 1
✗
Lc
75.3
✓
4.85
: 1
✓
Lc
34.3
✗
2.63
: 1
✗
Lc
56.2
✓
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
103.0
✓
Lc
0.0
✗
Lc
92.4
✓
Lc
0.0
✗
4.47
: 1
✗
Lc
76.5
✓
4.70
: 1
✓
Lc
33.0
✗
2.68
: 1
✗
Lc
57.3
✓
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
Lc
107.8
✓
Lc
0.0
✗
Lc
106.6
✓
Lc
0.0
✗
Lc
101.6
✓
Lc
0.0
✗
Lc
90.6
✓
Lc
18.2
✗
4.32
: 1
✗
Lc
74.9
✓
4.86
: 1
✓
Lc
34.6
✗
2.62
: 1
✗
Lc
56.0
✓
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
Lc
88.1
✗
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Color scale
(8)
Contrast mode
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
Ease in
Sine
Distances and contrast mastering
Real-time WCAG 2.1 and APCA scores. Adjust every stop to reach the desired contrast ratio.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Sources
80
70
60
50
40
30
20
10
Primary
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
102.7
✓
Lc
0.0
✗
Lc
91.7
✓
Lc
17.1
✗
4.33
: 1
✗
Lc
75.3
✓
4.85
: 1
✓
Lc
34.3
✗
2.63
: 1
✗
Lc
56.2
✓
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
103.0
✓
Lc
0.0
✗
Lc
92.4
✓
Lc
0.0
✗
4.47
: 1
✗
Lc
76.5
✓
4.70
: 1
✓
Lc
33.0
✗
2.68
: 1
✗
Lc
57.3
✓
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
Lc
107.8
✓
Lc
0.0
✗
Lc
106.6
✓
Lc
0.0
✗
Lc
101.6
✓
Lc
0.0
✗
Lc
90.6
✓
Lc
18.2
✗
4.32
: 1
✗
Lc
74.9
✓
4.86
: 1
✓
Lc
34.6
✗
2.62
: 1
✗
Lc
56.0
✓
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
Lc
88.1
✗
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
UICP 20
Contrast playground
Preview text
The quick brown fox jumps over the lazy dog.
Font weight
Abc
Contrast details
Light foreground color
Dark foreground color
The quick brown fox jumps over the lazy dog.
WCAG 2.1 score
1.37
A
Fail
APCA score
Lc 20.6
Non-text
Fail
Readability score
19%
Minimum font size
777pt (400)
The quick brown fox jumps over the lazy dog.
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
Ease in
Sine
Light, Dark, and more
Unlimited color modes — light, dark, colorblindness simulations. Custom foreground colors for tailored ratios.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Sources
80
70
60
50
40
30
20
10
Primary
4.33
: 1
✗
4.85
: 1
✓
2.63
: 1
✗
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
4.47
: 1
✗
4.70
: 1
✓
2.68
: 1
✗
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
4.32
: 1
✗
4.86
: 1
✓
2.62
: 1
✗
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Color modes
(2)
Light
Dark
Tailwind
V3 & V4 configs with CSS custom properties — copy, paste, ship.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
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;
Design tokens
Every color shade and tint is translated into a specific and standardized JSON, working with Tokens Studio or Penpot. Export tokens for Style Dictionary V3 and V4, working with DTCG tokens.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Code
(14)
Native tokens (JSON)
{ "$themes": [ { "name": "Light", "group": "Modes", "description": "", "selectedTokenSets": { "UICP Color Primitives/Light": "enabled" } }, { "name": "Dark", "group": "Modes", "description": "", "selectedTokenSets": { "UICP Color Primitives/Dark": "enabled" } } ], "$metadata": { "activeThemes": [], "tokenSetOrder": [ "uicp_color_primitives/light", "uicp_color_primitives/dark" ], "activeSets": [] }, "UICP Color Primitives/Light": { "primary.source": { "$type": "color", "$value": "#fff700", "$description": "Source color" }, "primary.80": { "neutral.source":
Local libraries
Create and update styles and variables directly from your palette.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
UICP Color Primitives
Published
Synchronize…
Sources
80
70
60
50
40
30
20
10
Primary
4.33
: 1
✗
4.85
: 1
✓
2.63
: 1
✗
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
4.47
: 1
✗
4.70
: 1
✓
2.68
: 1
✗
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
4.32
: 1
✗
4.86
: 1
✓
2.62
: 1
✗
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Sync with local styles
Sync with local variables
Sync & Export
Cloud sync
Push and pull palettes across Figma, Penpot, Sketch, and Framer.
My palettes
Starred
Organization
Community
Search palettes…
UICP Color Primitives
Shared
Custom, 1-10
3 source colors
・
64 shades/tints
・
2 color modes
Add to local
The palettes list is complete
Community
Share your palettes with UI Color Palette users and find inspiration. Palettes froShare and discover palettes — Adobe Spectrum, Microsoft Fluent, and more.m Adobe Spectrum, Microsoft Fluent, and more — ready to use.
My palettes
Starred
Organization
Community
Search palettes…
Adobe・Spectrum 6.0.0・Neutral
Spectrum, Neutral 25-900 (Adobe)
1 source color
・
11 shades/tints
・
2 color modes
Add to local
Bootstrap 5.3
Bootstrap, 100-900
11 source colors
・
104 shades/tints
・
No color mode
Add to local
Microsoft・Fluent 2・Brand・Office Products
Fluent, 10-160 (Microsoft)
5 source colors
・
75 shades/tints
・
No color mode
Add to local
Load more palettes
Publish
Whether you're crafting a design system or shipping a side project — UICP meets you where you are.
Designers
You need accessible, consistent palettes that integrate seamlessly into your design workflow.
AI-powered color generation — from themes like Cyberpunk, Minimalist, Corporate, etc.
WCAG & APCA contrast checks — accessibility built into every shade
Native integration — sync styles and variables on Figma, Penpot, Sketch, and Framer
Developers
You want production-ready tokens and configurations, not a PNG screenshot of a palette.
Tailwind V3 & V4 configs — copy-paste CSS custom properties
W3C Design Tokens (DTCG) — standardized JSON for any token pipeline
CSS / SCSS export — ready for production
Ultra Handoff
Export your palettes in several formats to bootstrap your project for web, mobile—Apple SwiftUI, Android Compose, etc…
Colors in outer Spaces
Change the color space for perfect brightness and consistency — OKLCH, OKLAB, HSLuv, etc.
Simulations that empathize
Translate your color scale into different forms of color-blind vision — Red-weak, blue-weak, total blindness, etc.
Best-in-class presets
Scale your colors from existing color systems — Google Material, Tailwind, Ant Design, etc.
More
Extra extensible
Get the plugin close to your favorite environment. Use it on VSCode.
New: Redesigned sidebar navigation
Accessible color palettes — generated in seconds, mastered with precision, deployed everywhere.
Book a demo
Get started
Generate
Create palettes in minutes with AI, images, color wheel, canvas, or 1M+ imported combinations.
Manage
Let the WCAG and APCA check Control every shade against WCAG & APCA. Filter, simulate color-blind vision, build light/dark modes.and advise
Deploy
Push to styles, variables, and tokens. Export Tailwind, CSS, and W3C Design Tokens — ready for production.
Create & Manage
Never starting with a blank palette
AI generation, image extraction, color wheel, canvas picker, or 1M+ imported combinations from Coolors, Realtime Colors, and Colour Lovers.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Cyberpunk futuristic interface with neon accents
Cyberpunk
Minimalist
Pastel
Corporate
Nature
Vintage
Landing page
Blog
Resume
Portfolio
Generate documentation
E-commerce
Generate colors (⌃⏎ or ⌘⏎)
AI-Generated colors
(5)
Alert
#FF0040
Primary
#00F0FF
Success
#00FF40
Text
#E0E0E0
Warning
#FF8000
Your colors at the same pace
Predefined lightness sets (Material 3, Tailwind, Ant Design) with your preferred color space — OKLCH, OKLAB, HSLuv, and more.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Sources
80
70
60
50
40
30
20
10
Primary
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
102.7
✓
Lc
0.0
✗
Lc
91.7
✓
Lc
17.1
✗
4.33
: 1
✗
Lc
75.3
✓
4.85
: 1
✓
Lc
34.3
✗
2.63
: 1
✗
Lc
56.2
✓
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
103.0
✓
Lc
0.0
✗
Lc
92.4
✓
Lc
0.0
✗
4.47
: 1
✗
Lc
76.5
✓
4.70
: 1
✓
Lc
33.0
✗
2.68
: 1
✗
Lc
57.3
✓
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
Lc
107.8
✓
Lc
0.0
✗
Lc
106.6
✓
Lc
0.0
✗
Lc
101.6
✓
Lc
0.0
✗
Lc
90.6
✓
Lc
18.2
✗
4.32
: 1
✗
Lc
74.9
✓
4.86
: 1
✓
Lc
34.6
✗
2.62
: 1
✗
Lc
56.0
✓
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
Lc
88.1
✗
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Color scale
(8)
Contrast mode
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
Ease in
Sine
Distances and contrast mastering
Real-time WCAG 2.1 and APCA scores. Adjust every stop to reach the desired contrast ratio.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Sources
80
70
60
50
40
30
20
10
Primary
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
102.7
✓
Lc
0.0
✗
Lc
91.7
✓
Lc
17.1
✗
4.33
: 1
✗
Lc
75.3
✓
4.85
: 1
✓
Lc
34.3
✗
2.63
: 1
✗
Lc
56.2
✓
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
103.0
✓
Lc
0.0
✗
Lc
92.4
✓
Lc
0.0
✗
4.47
: 1
✗
Lc
76.5
✓
4.70
: 1
✓
Lc
33.0
✗
2.68
: 1
✗
Lc
57.3
✓
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
Lc
107.8
✓
Lc
0.0
✗
Lc
106.6
✓
Lc
0.0
✗
Lc
101.6
✓
Lc
0.0
✗
Lc
90.6
✓
Lc
18.2
✗
4.32
: 1
✗
Lc
74.9
✓
4.86
: 1
✓
Lc
34.6
✗
2.62
: 1
✗
Lc
56.0
✓
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
Lc
88.1
✗
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
UICP 20
Contrast playground
Preview text
The quick brown fox jumps over the lazy dog.
Font weight
Abc
Contrast details
Light foreground color
Dark foreground color
The quick brown fox jumps over the lazy dog.
WCAG 2.1 score
1.37
A
Fail
APCA score
Lc 20.6
Non-text
Fail
Readability score
19%
Minimum font size
777pt (400)
The quick brown fox jumps over the lazy dog.
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
Ease in
Sine
Light, Dark, and more
Unlimited color modes — light, dark, colorblindness simulations. Custom foreground colors for tailored ratios.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Sources
80
70
60
50
40
30
20
10
Primary
4.33
: 1
✗
4.85
: 1
✓
2.63
: 1
✗
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
4.47
: 1
✗
4.70
: 1
✓
2.68
: 1
✗
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
4.32
: 1
✗
4.86
: 1
✓
2.62
: 1
✗
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Color modes
(2)
Light
Dark
Tailwind
V3 & V4 configs with CSS custom properties — copy, paste, ship.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
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;
Design tokens
W3C (DTCG), Tokens Studio, Style Dictionary V3 & V4. Token sync with themes on Penpot.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Code
(14)
Native tokens (JSON)
{ "$themes": [ { "name": "Light", "group": "Modes", "description": "", "selectedTokenSets": { "UICP Color Primitives/Light": "enabled" } }, { "name": "Dark", "group": "Modes", "description": "", "selectedTokenSets": { "UICP Color Primitives/Dark": "enabled" } } ], "$metadata": { "activeThemes": [], "tokenSetOrder": [ "uicp_color_primitives/light", "uicp_color_primitives/dark" ], "activeSets": [] }, "UICP Color Primitives/Light": { "primary.source": { "$type": "color", "$value": "#fff700", "$description": "Source color" }, "primary.80": { "neutral.source":
Local libraries
Create and update styles and variables directly from your palette.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
UICP Color Primitives
Published
Synchronize…
Sources
80
70
60
50
40
30
20
10
Primary
4.33
: 1
✗
4.85
: 1
✓
2.63
: 1
✗
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
4.47
: 1
✗
4.70
: 1
✓
2.68
: 1
✗
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
4.32
: 1
✗
4.86
: 1
✓
2.62
: 1
✗
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Sync with local styles
Sync with local variables
Sync & Export
Community
Share your palettes with UI Color Palette users and find inspiration. Palettes froShare and discover palettes — Adobe Spectrum, Microsoft Fluent, and more.m Adobe Spectrum, Microsoft Fluent, and more — ready to use.
My palettes
Starred
Organization
Community
Search palettes…
Adobe・Spectrum 6.0.0・Neutral
Spectrum, Neutral 25-900 (Adobe)
1 source color
・
11 shades/tints
・
2 color modes
Add to local
Bootstrap 5.3
Bootstrap, 100-900
11 source colors
・
104 shades/tints
・
No color mode
Add to local
Microsoft・Fluent 2・Brand・Office Products
Fluent, 10-160 (Microsoft)
5 source colors
・
75 shades/tints
・
No color mode
Add to local
Load more palettes
Cloud sync
Push and pull palettes across Figma, Penpot, Sketch, and Framer.
My palettes
Starred
Organization
Community
Search palettes…
UICP Color Primitives
Shared
Custom, 1-10
3 source colors
・
64 shades/tints
・
2 color modes
Add to local
The palettes list is complete
Publish
Whether you're crafting a design system or shipping a side project — UICP meets you where you are.
Designers
You need accessible, consistent palettes that integrate seamlessly into your design workflow.
AI-powered color generation — from themes like Cyberpunk, Minimalist, Corporate, etc.
WCAG & APCA contrast checks — accessibility built into every shade
Native integration — sync styles and variables on Figma, Penpot, Sketch, and Framer
Developers
You want production-ready tokens and configurations, not a PNG screenshot of a palette.
Tailwind V3 & V4 configs — copy-paste CSS custom properties
W3C Design Tokens (DTCG) — standardized JSON for any token pipeline
CSS / SCSS export — ready for production
Extra extensible
Get the plugin close to your favorite environment. Use it on VSCode.
Simulations that empathize
Translate your color scale into different forms of color-blind vision — Red-weak, blue-weak, total blindness, etc.
Best-in-class presets
Scale your colors from existing color systems — Google Material, Tailwind, Ant Design, etc.
More
Ultra Handoff
Export your palettes in several formats to bootstrap your project for web, mobile—Apple SwiftUI, Android Compose, etc…
Colors in outer Spaces
Change the color space for perfect brightness and consistency — OKLCH, OKLAB, HSLuv, etc.
New: Redesigned sidebar navigation
Accessible color palettes — generated in seconds, mastered with precision, deployed everywhere.
Book a demo
Get started
Generate
Create palettes in minutes with AI, images, color wheel, canvas, or 1M+ imported combinations.
Deploy
Push to styles, variables, and tokens. Export Tailwind, CSS, and W3C Design Tokens — ready for production.
Manage
Let the WCAG and APCA check Control every shade against WCAG & APCA. Filter, simulate color-blind vision, build light/dark modes.and advise
Create & Manage
Never starting with a blank palette
AI generation, image extraction, color wheel, canvas picker, or 1M+ imported combinations from Coolors, Realtime Colors, and Colour Lovers.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Cyberpunk futuristic interface with neon accents
Cyberpunk
Minimalist
Pastel
Corporate
Nature
Vintage
Landing page
Blog
Resume
Portfolio
Generate documentation
E-commerce
Generate colors (⌃⏎ or ⌘⏎)
AI-Generated colors
(5)
Alert
#FF0040
Primary
#00F0FF
Success
#00FF40
Text
#E0E0E0
Warning
#FF8000
Your colors at the same pace
Predefined lightness sets (Material 3, Tailwind, Ant Design) with your preferred color space — OKLCH, OKLAB, HSLuv, and more.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Sources
80
70
60
50
40
30
20
10
Primary
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
102.7
✓
Lc
0.0
✗
Lc
91.7
✓
Lc
17.1
✗
4.33
: 1
✗
Lc
75.3
✓
4.85
: 1
✓
Lc
34.3
✗
2.63
: 1
✗
Lc
56.2
✓
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
103.0
✓
Lc
0.0
✗
Lc
92.4
✓
Lc
0.0
✗
4.47
: 1
✗
Lc
76.5
✓
4.70
: 1
✓
Lc
33.0
✗
2.68
: 1
✗
Lc
57.3
✓
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
Lc
107.8
✓
Lc
0.0
✗
Lc
106.6
✓
Lc
0.0
✗
Lc
101.6
✓
Lc
0.0
✗
Lc
90.6
✓
Lc
18.2
✗
4.32
: 1
✗
Lc
74.9
✓
4.86
: 1
✓
Lc
34.6
✗
2.62
: 1
✗
Lc
56.0
✓
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
Lc
88.1
✗
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Color scale
(8)
Contrast mode
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
Ease in
Sine
Distances and contrast mastering
Real-time WCAG 2.1 and APCA scores. Adjust every stop to reach the desired contrast ratio.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Sources
80
70
60
50
40
30
20
10
Primary
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
102.7
✓
Lc
0.0
✗
Lc
91.7
✓
Lc
17.1
✗
4.33
: 1
✗
Lc
75.3
✓
4.85
: 1
✓
Lc
34.3
✗
2.63
: 1
✗
Lc
56.2
✓
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
Lc
107.9
✓
Lc
0.0
✗
Lc
107.1
✓
Lc
0.0
✗
Lc
103.0
✓
Lc
0.0
✗
Lc
92.4
✓
Lc
0.0
✗
4.47
: 1
✗
Lc
76.5
✓
4.70
: 1
✓
Lc
33.0
✗
2.68
: 1
✗
Lc
57.3
✓
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
Lc
107.8
✓
Lc
0.0
✗
Lc
106.6
✓
Lc
0.0
✗
Lc
101.6
✓
Lc
0.0
✗
Lc
90.6
✓
Lc
18.2
✗
4.32
: 1
✗
Lc
74.9
✓
4.86
: 1
✓
Lc
34.6
✗
2.62
: 1
✗
Lc
56.0
✓
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
Lc
88.1
✗
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
UICP 20
Contrast details
Light foreground color
Dark foreground color
The quick brown fox jumps over the lazy dog.
WCAG 2.1 score
1.37
A
Fail
APCA score
Lc 20.6
Non-text
Fail
Readability score
19%
Minimum font size
777pt (400)
The quick brown fox jumps over the lazy dog.
Custom, 10-100
80
70
60
50
40
30
20
10
Chroma
Hue
Ease in
Sine
Light, Dark, and more
Unlimited color modes — light, dark, colorblindness simulations. Custom foreground colors for tailored ratios.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Sources
80
70
60
50
40
30
20
10
Primary
4.33
: 1
✗
4.85
: 1
✓
2.63
: 1
✗
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
4.47
: 1
✗
4.70
: 1
✓
2.68
: 1
✗
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
4.32
: 1
✗
4.86
: 1
✓
2.62
: 1
✗
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Color modes
(2)
Light
Dark
Tailwind
V3 & V4 configs with CSS custom properties — copy, paste, ship.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
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;
Design tokens
W3C (DTCG), Tokens Studio, Style Dictionary V3 & V4. Token sync with themes on Penpot.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
Code
(14)
Native tokens (JSON)
{ "$themes": [ { "name": "Light", "group": "Modes", "description": "", "selectedTokenSets": { "UICP Color Primitives/Light": "enabled" } }, { "name": "Dark", "group": "Modes", "description": "", "selectedTokenSets": { "UICP Color Primitives/Dark": "enabled" } } ], "$metadata": { "activeThemes": [], "tokenSetOrder": [ "uicp_color_primitives/light", "uicp_color_primitives/dark" ], "activeSets": [] }, "UICP Color Primitives/Light": { "primary.source": { "$type": "color", "$value": "#fff700", "$description": "Source color" }, "primary.80": { "neutral.source":
Local libraries
Create and update styles and variables directly from your palette.
UI Color Palette・WCAG Color Palette Manager for Apps & Websites
UICP Color Primitives
Published
Synchronize…
Sources
80
70
60
50
40
30
20
10
Primary
4.33
: 1
✗
4.85
: 1
✓
2.63
: 1
✗
7.99
: 1
✓
Lc
53.0
✓
1.76
: 1
✗
Lc
36.0
✗
11.91
: 1
✓
Lc
71.8
✓
1.33
: 1
✗
Lc
18.4
✗
15.82
: 1
✓
Lc
87.6
✓
Neutral
4.47
: 1
✗
4.70
: 1
✓
2.68
: 1
✗
7.83
: 1
✓
Lc
51.9
✓
1.78
: 1
✗
Lc
37.0
✗
11.77
: 1
✓
Lc
70.9
✓
1.34
: 1
✗
Lc
19.4
✗
15.82
: 1
✓
Lc
86.7
✓
UICP
4.32
: 1
✗
4.86
: 1
✓
2.62
: 1
✗
8.02
: 1
✓
Lc
53.2
✓
1.75
: 1
✗
Lc
35.6
✗
12.02
: 1
✓
Lc
72.1
✓
1.32
: 1
✗
Lc
17.8
✗
15.96
: 1
✓
WCAG Δ
0.3
0.01
0.61
0.04
0.83
0.1
0.43
0.14
0.15
0.16
0.06
0.19
0.01
0.25
0.02
0.14
Light
Sync with local styles
Sync with local variables
Sync & Export
Community
Share your palettes with UI Color Palette users and find inspiration. Palettes froShare and discover palettes — Adobe Spectrum, Microsoft Fluent, and more.m Adobe Spectrum, Microsoft Fluent, and more — ready to use.
My palettes
Starred
Organization
Community
Search palettes…
Adobe・Spectrum 6.0.0・Neutral
Spectrum, Neutral 25-900 (Adobe)
1 source color
・
11 shades/tints
・
2 color modes
Add to local
Bootstrap 5.3
Bootstrap, 100-900
11 source colors
・
104 shades/tints
・
No color mode
Add to local
Microsoft・Fluent 2・Brand・Office Products
Fluent, 10-160 (Microsoft)
5 source colors
・
75 shades/tints
・
No color mode
Add to local
Load more palettes
Cloud sync
Push and pull palettes across Figma, Penpot, Sketch, and Framer.
My palettes
Starred
Organization
Community
Search palettes…
UICP Color Primitives
Shared
Custom, 1-10
3 source colors
・
64 shades/tints
・
2 color modes
Add to local
The palettes list is complete
Publish
Whether you're crafting a design system or shipping a side project — UICP meets you where you are.
Designers
You need accessible, consistent palettes that integrate seamlessly into your design workflow.
AI-powered color generation — from themes like Cyberpunk, Minimalist, Corporate, etc.
WCAG & APCA contrast checks — accessibility built into every shade
Native integration — sync styles and variables on Figma, Penpot, Sketch, and Framer
Developers
You want production-ready tokens and configurations, not a PNG screenshot of a palette.
Tailwind V3 & V4 configs — copy-paste CSS custom properties
W3C Design Tokens (DTCG) — standardized JSON for any token pipeline
CSS / SCSS export — ready for production
Extra extensible
Get the plugin close to your favorite environment. Use it on VSCode.
Colors in outer Spaces
Change the color space for perfect brightness and consistency — OKLCH, OKLAB, HSLuv, etc.
Simulations that empathize
Translate your color scale into different forms of color-blind vision — Red-weak, blue-weak, total blindness, etc.
Best-in-class presets
Scale your colors from existing color systems — Google Material, Tailwind, Ant Design, etc.
More
Ultra Handoff
Export your palettes in several formats to bootstrap your project for web, mobile—Apple SwiftUI, Android Compose, etc…
