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
Manage your account settings and preferences.
Information
Your session will expire in 15 minutes.
Success
Your changes have been saved.
Warning
Please review before continuing.
Error
Something went wrong. Please try again.
Team Members
| Name | Role | Status | Actions |
|---|---|---|---|
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
Wireless Keyboard
Smart Watch Pro
Portable Speaker
Alpha Colors
Semi-transparent badges that work on any colored background
Badges overlay perfectly
Using primary-200/25 on primary-800
Badges overlay perfectly
Using secondary-200/25 on secondary-800
Badges overlay perfectly
Using blue-200/25 on blue-800
Badges overlay perfectly
Using purple-200/25 on purple-800
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.
Gradient Recipe
This section blends secondary to adjacent — using step 8 in dark mode and step 11 in light mode for rich, saturated gradients.
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 paletteAPCA Accessible
Contrast ratios validated against APCA standards for better readability.
View standards"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."
Trusted by teams at
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.