What is OKLCH and why does Supa Colors Studio use it?

OKLCH is a perceptually uniform color space that ensures consistent lightness and chroma across the color wheel. Unlike HSL or RGB, OKLCH provides predictable color generation where equal changes in values produce equal perceived differences. This makes palette creation more intuitive and results in more harmonious color systems.

What's the difference between sRGB and P3 gamut?

sRGB is the standard color space for web and most displays, supporting ~16.7 million colors. P3 (Display P3) is a wider gamut available on modern Apple devices, newer monitors, and mobile screens, offering ~25% more colors. Use sRGB for maximum compatibility, or P3 for richer, more vibrant colors on supported displays.

What's the difference between WCAG and APCA contrast?

WCAG 2.1 uses a ratio-based system (e.g., 4.5:1 for AA, 7:1 for AAA) and is the current legal standard. APCA (Accessible Perceptual Contrast Algorithm) is a newer, perceptually-based method that better accounts for how humans perceive contrast, especially for different font sizes and weights. Supa Colors Studio supports both—use WCAG for compliance, APCA for enhanced readability.

What types of color blindness can I simulate?

We simulate 8 types of Color Vision Deficiency (CVD): Protanomaly, Protanopia, Deuteranomaly, Deuteranopia (Red-Green), Tritanomaly, Tritanopia (Blue-Yellow), and Achromatomaly, Achromatopsia (Monochromacy). This helps you ensure your palette remains distinguishable for users with different color vision.

What do the contrast levels (AAA, AA, A, FAIL) mean?

AAA (7:1+ WCAG / 90+ Lc APCA) represents maximum accessibility, ideal for critical content. AA (4.5:1+ WCAG / 75+ Lc APCA) is the standard compliance required by most accessibility laws. A (4.5:1 WCAG / 60+ Lc APCA) is the minimum baseline readability. FAIL means below accessibility standards—avoid for important text.

What export formats are supported?

Supa Colors Studio exports to 10+ formats: CSS Variables, CSS Classes, JavaScript/TypeScript objects with types, Tailwind CSS v4 native config, SCSS variables & maps, Style Dictionary for cross-platform tokens, Tokens Studio for Figma, W3C DTCG (Design Tokens Community Group standard), JSON, and SVG visual swatches.

How do I use exported colors in my project?

Each export format includes ready-to-use code. For CSS Variables, copy the export to your stylesheet. For Tailwind, add to your tailwind.config.js. For TypeScript, import the generated types. All exports preserve color accuracy and include comments for easy reference.

Can I import colors from other design systems?

Yes! Use our Popular Systems feature to clone official palettes from Tailwind CSS, Material UI, Ant Design, Chakra UI, Radix UI, Bootstrap, Spectrum, Frames X, and Untitled UI. These serve as perfect starting points for customization.

Is there a Figma plugin?

Yes! A Figma plugin is coming soon. It will let you sync your color systems directly into Figma, apply colors to selections, and generate local styles—all without leaving your design tool.

How do I invite team members to my workspace?

Go to your workspace settings and click 'Invite member'. Enter their email address and they'll receive an invitation. Once accepted, they'll have access to all color systems in that workspace based on the permissions you set.

How are workspaces organized?

Workspaces contain color systems, which can be organized into collections. You can have personal workspaces for solo projects and team workspaces for shared work. Invite team members to your workspace and control their permissions. Each workspace operates independently with its own settings and color systems.

Can I share color systems with people outside my workspace?

Yes! You can share individual color systems via shareable links. Shared systems can be viewed by anyone with the link, but only workspace members can edit them. You can also publish systems to the community gallery for others to discover and clone.

Is there a free plan?

Yes! The Cadet plan is completely free and includes 1 color system, 1 collection, 25 palettes per collection, and CSS export. It's perfect for trying out Supa Colors Studio or for simple projects.

What payment methods do you accept?

We accept all major credit cards (Visa, Mastercard, American Express) and PayPal. Payments are processed securely through LemonSqueezy.

How are subscriptions billed?

All paid plans are billed annually. This allows us to offer significant savings—up to 30% off during Early Access pricing.

What happens when I upgrade my plan?

When you upgrade, you get immediate access to the new features and are charged a prorated amount based on the time remaining in your current billing period.

How do I cancel my subscription?

You can cancel anytime from your Account Settings → Subscription page. Click 'Manage Subscription' to access the customer portal where you can cancel. You'll retain access to paid features until the end of your billing period.

Do you offer refunds?

We offer refunds within 14 days of purchase if you're not satisfied. Contact support at hello@supacolors.studio with your order details.

How do I delete my account?

Go to Account Settings → Profile and scroll to the bottom. You'll find the option to delete your account. This action is permanent and will remove all your data, color systems, and subscription.

Can I change my email address?

Currently, email changes require contacting support at hello@supacolors.studio. We use email for authentication, so changes need to be handled carefully to maintain account security.

What happens if I forget my password?

We use passwordless authentication via OTP (one-time password). When you log in, you'll receive a code via email—no password needed. Just enter the code to access your account.

How can I get help or contact support?

You can reach out to us anytime at hello@supacolors.studio. We typically respond within 24-48 hours. For urgent issues or questions about your subscription, please include your account email and any relevant details.

How can I request a feature or report a bug?

We use Canny to collect feedback from our users. Visit our Feature Requests board (https://supa-colors-studio.canny.io/feature-requests) to suggest new features and vote on existing ideas, or use our Bug Reports board (https://supa-colors-studio.canny.io/bug-reports) to report issues. You can also access these from the Feedback menu in the app sidebar.

Why do my colors look different across devices?

This usually happens due to gamut differences. If you exported in P3 gamut, colors may appear desaturated on non-P3 displays. Try exporting in sRGB for maximum compatibility, or ensure your display supports P3.

Why is my exported code showing clipped colors?

When colors fall outside the target gamut (e.g., a vivid P3 color exported to sRGB), they're automatically clipped to the nearest in-gamut value. This is expected behavior to ensure valid color output.

The color I input looks different after generation—why?

Supa Colors Studio uses OKLCH internally. When you input HEX/RGB colors, they're converted to OKLCH for processing, then converted back. Minor rounding differences may occur, but perceptual appearance remains consistent.

Professional Color System Builder

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

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.

cornflowerblue

l:97.4%, c:0.013, h:244.494

AAA

100

l:94.3%, c:0.028, h:245.005

AAA

200

l:89.3%, c:0.057, h:240.844

AAA

300P3

l:82%, c:0.106, h:239.577

AAA

400P3

l:73.1%, c:0.158, h:242.105

500

l:69.2%, c:0.171, h:246.975

600P3

l:57.1%, c:0.188, h:250.996

4.2:1

700P3

l:49.5%, c:0.173, h:252.06

800P3

l:43.5%, c:0.142, h:251.372

AAA

900

l:38.6%, c:0.109, h:251.378

AAA

950

l:28.9%, c:0.074, 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

22 palettes

Start from the Best

Import official palettes from Tailwind, Untitled UI, Radix, and more. Use them as-is or customize every shade to make them yours.

Import Tokens

Drop JSON files here

W3C DTCG or Figma Variables

Tokens.json

Import Your Tokens

Drag and drop W3C DTCG or Figma Variables JSON files. Instantly parse and preview every palette, then customize to your needs.

Team Members

Invite member

Members (2)

alice@company.com(you)

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.

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.

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.

Platforms

Available Everywhere You Work

Access your color systems wherever you design—on the web or directly in your favorite tools.

Web App

Create, manage and export your color systems directly from the browser. No installation needed.

Figma Plugin

Sync palettes as Figma Variables and keep everything in sync across your design files.

Framer Plugin

Coming Soon

Bring your color systems into Framer. Apply palettes to your projects with a single click.

Community

Explore the Community Galaxy

Color systems crafted by designers across the universe. Get inspired, clone, and customize.

Launch at Your Own Pace

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

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

Import palettes

All export formats

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.

Navigate the Color Spectrum

cornflowerblue

Invite member

Members (2)

Jump to Color Hyperspace

Generate Palettes

Color Systems, Reimagined

Available Everywhere You Work

Explore the Community Galaxy

Launch at Your Own Pace

Cadet

Pilot

Crew

Fleet

Frequently Asked Questions

Color System

Accessibility

Export & Integration

Collaboration

Pricing & Billing

Account

Support

Troubleshooting

Launch YourLaunch Your
Color System

Navigate the Color SpectrumNavigate the Color SpectrumNavigate the Color Spectrum

cornflowerblue

Invite member

Members (2)

Jump to Color HyperspaceJump to Color HyperspaceJump to Color Hyperspace

Generate Palettes

Color Systems, ReimaginedColor Systems, ReimaginedColor Systems, Reimagined

Available Everywhere You WorkAvailable Everywhere You WorkAvailable Everywhere You Work

Explore the Community GalaxyExplore the Community GalaxyExplore the Community Galaxy

Launch at Your Own PaceLaunch at Your Own PaceLaunch at Your Own Pace

Cadet

Pilot

Crew

Fleet

Frequently Asked QuestionsFrequently Asked QuestionsFrequently Asked Questions

Color System

What is OKLCH and why does Supa Colors Studio use it?

What's the difference between sRGB and P3 gamut?

Accessibility

What's the difference between WCAG and APCA contrast?

What types of color blindness can I simulate?

What do the contrast levels (AAA, AA, A, FAIL) mean?

Export & Integration

What export formats are supported?

How do I use exported colors in my project?

Can I import colors from other design systems?

Collaboration

How do I invite team members to my workspace?

How are workspaces organized?

Can I share color systems with people outside my workspace?

Pricing & Billing

Is there a free plan?

What payment methods do you accept?

How are subscriptions billed?

What happens when I upgrade my plan?

How do I cancel my subscription?

Do you offer refunds?

Account

How do I delete my account?

Can I change my email address?

What happens if I forget my password?

Support

How can I get help or contact support?

How can I request a feature or report a bug?

Troubleshooting

Why do my colors look different across devices?

Why is my exported code showing clipped colors?

The color I input looks different after generation—why?

Launch YourLaunch YourColor SystemColor SystemColor System

Navigate the Color Spectrum

Jump to Color Hyperspace

Color Systems, Reimagined

Available Everywhere You Work

Explore the Community Galaxy

Launch at Your Own Pace

Frequently Asked Questions

Launch YourLaunch Your
Color System