Supa Colors
Supa ColorsStudio
Features

Navigate the Color Spectrum

Create, refine, and ship production-ready color systems. Advanced controls, WCAG accessibility checks, and export to 10 formats.

Color Picker
Base color
P3
True-to-Eye Color Scales
OKLCH-powered generation creates shades that look perfectly balanced to the human eye. Full P3 wide gamut with automatic sRGB fallback.
Style

cornflowerblue

50
l:97.4%, c:0.012, h:244.494
AAA
100
l:94.3%, c:0.026, h:245.005
AAA
200
l:89.3%, c:0.054, h:240.844
AAA
300
l:82%, c:0.1, h:239.577
AAA
400
l:73.1%, c:0.149, h:242.105
AA
500
l:66%, c:0.171, h:246.975
AA
600P3
l:57.1%, c:0.176, h:250.996
4.2:1
700P3
l:49.5%, c:0.162, h:252.06
AA
800P3
l:43.5%, c:0.133, h:251.372
AAA
900
l:38.6%, c:0.103, h:251.378
AAA
950
l:28.9%, c:0.07, h:253.711
AAA
Two Ways to Generate
Use Pattern mode to match Tailwind, Material UI, and other design systems instantly. Or go Curve mode for pixel-perfect control over lightness, chroma, and hue.
Export
Format
// No colors to export
Export to Any Stack
One click to production-ready code. CSS, Tailwind v4, TypeScript, Style Dictionary, Figma Variables, and 5 more formats—all copy-paste ready.
Accessibility
Accessibility Built In
WCAG 2.1 and APCA scoring with instant visual feedback. Check AA/AAA compliance, find usable pairs, and preview how colors appear with color blindness.
Popular Systems
tailwind-4 logo
Tailwind 4
22 palettes
Start from the Best
Import official palettes from Tailwind, Material UI, Radix, Ant Design, and more. Use them as-is or customize every shade to make them yours.
Team Members

Invite member

Members (2)

A
alice@company.com(you)
B
bob@company.com
Team Collaboration
Invite teammates and share color systems within your workspace. Keep work private to your team or publish to the community.
Workspace
Personal8 systems
Personal & Team Workspaces
Personal workspace for solo projects, team workspaces for shared work. Switch instantly and keep everything organized.
Productivity Boost

Jump to Color Hyperspace

Calculate your trajectory and make the jump. Generate dozens of palettes in a single hyperspace leap—each one perfectly aligned with your style coordinates.

Batch Generator - Generate multiple color palettes at once with hue range selection and per-color saturation control
Hue Range Selection
Define start and end hues on the color wheel. Generate harmonious palettes across complementary, analogous, or triadic ranges.
Per-Color Saturation
Fine-tune each color's saturation independently. Drag dots on the wheel or use the global slider for uniform adjustments.
Instant Variations
Generate up to 50 palettes per collection with a paid plan. Each inherits your style settings—algorithm, shade count, and naming pattern.
Real-Time Preview
See changes instantly as you drag. Optimized rendering keeps the UI responsive even with complex palette calculations.
Pattern Engine

Color Systems, Reimagined

A keyframe editor that spans the entire hue spectrum. See how the best design systems handle every color—from red to violet—and apply those same curves to your palette. Or break the rules and create something new.

Battle-Tested Patterns
Extracted from Tailwind, Material UI, Radix, and other industry-standard design systems. Use what works.
Timeline & Keyframes
A new paradigm: edit color curves across the hue spectrum with keyframe-based interpolation. Precise control, smooth transitions.
Infinite Variations
Start from any pattern, tweak the curves, and generate unique palettes that inherit proven color relationships.
Any Hue, Same Quality
Patterns adapt to any base color while preserving the lightness and chroma relationships that make systems feel cohesive.
Community

Explore the Community Galaxy

Color systems crafted by designers across the universe.

Early Access

Launch at Your Own Pace

Every journey starts free. Scale up as your color systems grow.

2 months free

Cadet

Perfect for individual designers

Free
 

What's included:

1 color system
1 collection
Up to 25 palettes per collection
CSS export
Community support

Pilot

For professional designers

$59/year
Just $4.92/mo

14-day money-back guarantee

What's included:

Unlimited color systems
Unlimited collections
Up to 50 palettes per collection
All export formats
Advanced editing tools
Accessibility tools
Most Popular

Crew

For small design teams

$149/year
Just $12.42/mo

14-day money-back guarantee

What's included:

Everything in Pilot
1 team
Up to 3 team members
Team management
Versioning

Fleet

For growing companies

$349/year
Just $29.08/mo

14-day money-back guarantee

What's included:

Everything in Crew
Up to 3 teams
Up to 10 team members per team

Early Access pricing — discounted rates available for a limited time only.

FAQ

Frequently Asked Questions

Common questions about color systems, pricing, account management, and more.

Color System

Accessibility

Export & Integration

Collaboration

Pricing & Billing

Account

Support

Troubleshooting

Ready to
Launch?

Start shaping your color universe today.
Free to explore, powerful to scale.