Colors v0.1.0
Brand:
New color system available

Build beautiful interfaces with your brand colors

Transform any brand color into a complete, accessible color palette. Works seamlessly with Tailwind CSS and shadcn.

Web App Components

Sign In

Remember me
Enable notifications
Marketing emails

Manage your account settings and preferences.

Team Members

NameRoleStatusActions
JD
Jane DePloi
DevOps
Active
AS
Alex Ternary
Developer
Active
MJ
Mike Kern
Designer
Away
SL
Val Propp
Marketing
Offline

Featured Products

E-commerce card components with hover states

🎧

Premium Headphones

(124)
$299
⌨️

Wireless Keyboard

(89)
$149
⌚
New

Smart Watch Pro

(256)
$399
🔊

Portable Speaker

(67)
$79

Alpha Colors

Semi-transparent badges that work on any colored background

Primary Alpha

Badges overlay perfectly

Using primary-200/25 on primary-800

NewFeaturedSale
Secondary Alpha

Badges overlay perfectly

Using secondary-200/25 on secondary-800

NewFeaturedSale
Blue Alpha

Badges overlay perfectly

Using blue-200/25 on blue-800

NewFeaturedSale
Purple Alpha

Badges overlay perfectly

Using purple-200/25 on purple-800

NewFeaturedSale

How It Works

Alpha color scales (e.g., bg-orange-200/25) are created using Tailwind's built-in opacity modifiers. They blend naturally with any background and work great for overlays, badges, and subtle backgrounds. The palette generates OKLCH colors that look beautiful at any opacity level.

Near-Hue Gradient Harmony

Adjacent Radix hues blend seamlessly, creating natural gradients that maintain accessibility and visual coherence across your entire palette.

99.9%
Uptime SLA
50ms
Avg Response
190+
Countries
10M+
API Calls/Day

Gradient Recipe

This section blends secondary to adjacent — using step 9 in dark mode (solid backgrounds) and step 11 in light mode (text colors) for consistent saturation.

Every Color, Perfectly Tuned

The complete palette harmonizes with your brand. Use any hue confidently — they're all designed to work together.

Brand Tuned

Every hue adapts to your brand's warmth, saturation, and brightness preferences.

View palette

APCA Accessible

Contrast ratios validated against APCA standards for better readability.

View standards

Dark Mode Ready

Automatic dark mode variants with proper inversion and contrast.

View modes

Alpha Scales

Semi-transparent variants for overlays, borders, and subtle backgrounds.

View scales

Framework Ready

Export to Tailwind CSS, vanilla CSS variables, or JSON for any stack.

View exports

P3 Wide Gamut

Vibrant colors on modern displays with automatic sRGB fallbacks.

View gamut
"Sveltopia Colors transformed our design workflow. We went from spending hours on color decisions to having a complete, accessible palette generated in seconds from just our brand orange."
JD
Greta D. Zein
Design Lead at TechCorp

Trusted by teams at

Acme IncTechCorpDesignlyBuildFast

This section uses the dark class to force dark mode styling, regardless of the page's current theme. The colors automatically switch to their dark mode variants.