Sygen
New
Import your shadcn theme and fix it

Turn one brand color into a complete design system

Brand, neutral and status scales, light and dark tokens that pass WCAG, and exports for Tailwind, shadcn, CSS and Figma. Free, no sign-up.

Paste a HEX, RGB, HSL or OKLCH value, or pick one.

No color yet? Try

Already have a theme? Import your colors from CSS, Tailwind or design tokens.

Your system
#2F5BEA
Brand
Neutral
Success
Warning
Danger
Info
Get startedLearn moreDelete
Changes saved a moment ago

One color in. A whole system out.

The builder does the color science for you, in OKLCH, so every step looks even and stays inside what screens can show.

50100200300400500600700800900950
Brand
Neutral
Success
Warning
Danger
Info

Every scale from one color

Brand, a second brand, neutral, success, warning, danger and info, each from 50 to 950. Status colors lean toward your brand so they feel related.

#2F5BEA
HEX
RGB
HSL
OKLCH

Start from your brand color

Paste it in any format, or pick from suggestions if you are starting fresh.

0%
30%
70%

Neutrals that carry your brand

Text, borders and backgrounds get a touch of your hue. You choose how much.

Aa
Button
Aa
Button

Light and dark tokens

background, primary, muted, ring and the rest of the shadcn set, for both modes.

34/34checks pass
Aa 5.5Aa 19.8Aa 5.0

Readable by default

Every text pair is checked against WCAG 2.2 AA, with one-click fixes.

Room for a second brand

Add a second brand color for secondary buttons and charts, or remove it.

See it on real UI before you ship it.

Buttons, forms, alerts, charts and navigation, rendered with your tokens. Switch the site theme to see dark mode.

  • Edit where you look

    Every color opens right where it is listed, with plain Lightness, Intensity and Hue sliders.

  • Neutrals that belong to you

    Grays carry a touch of your brand hue. Choose how much.

  • Every change is a link

    The whole system lives in the URL. Share it, bookmark it, come back later.

Design system builder
Save changesPreviewCancel Delete
Workspace nameStudio North
Remember me On Off

Payment received

Invoice #1042 was paid in full.

Your trial ends in 3 days

Add a payment method to keep your projects.

Couldn’t save changes

Check your connection and try again.

A new version is available

Reload the page to get the latest features.

Sign in

Welcome back. Enter your details.

Emailana@studio.co
Password Forgot password?•••• Use at least 8 characters.
Sign in

Revenue

$48,210

12.4%

Churn

2.4%

0.6%

Invoices

Northwind

INV-1042

$4,200Paid

Acme Corp

INV-1041

$1,860Pending

Globex

INV-1040

$920Overdue

Initech

INV-1039

$2,310Draft

Monthly volume

Last 5 months

Dec
Jan
Feb
Mar
Apr
Dashboard Invoices Customers Inbox 4 Settings

Changes saved

Your profile is up to date.

Upload failed

report-q3.pdf is larger than 10 MB.

Retry

Set up your workspace

3 of 4 steps done

  • Create your workspace
  • Invite your team
  • Connect a bank account
  • Send your first invoice

Tip: invoices with a due date get paid twice as fast.

No projects yet

Create a project to start tracking your work.

New project

Readable by default. Fixed in one click.

Every pair of text and background in your tokens is checked, so nobody ships gray-on-gray by accident.

  • 17 text and control pairs, checked in light and dark mode
  • WCAG 2.2 AA decides, APCA is shown for reference
  • Fixes move a token to the nearest step that passes, so your colors stay yours

Secondary text on muted fills

muted-foreground on muted

Fail
1.35of 4.5 needed · APCA Lc 16
Too faint to read comfortably
  • AaText on primary buttons5.5
    Pass
  • AaText on the page19.8
    Pass
  • AaText on destructive buttons5.0
    Pass

Paste it where you already work.

The same tokens, written four ways. Copy them or download the files.

globals.css
:root {  --background: oklch(100.0% 0.000 0.0);  --foreground: oklch(14.5% 0.011 266.8);  --card: oklch(100.0% 0.000 0.0);  --card-foreground: oklch(14.5% 0.011 266.8);  --popover: oklch(100.0% 0.000 0.0);  --popover-foreground: oklch(14.5% 0.011 266.8);  --primary: oklch(53.3% 0.221 265.8);  --primary-foreground: oklch(100.0% 0.000 0.0);  --secondary: oklch(96.7% 0.003 264.5);  --secondary-foreground: oklch(20.9% 0.013 264.2);  --accent: oklch(96.7% 0.003 264.5);  --accent-foreground: oklch(20.9% 0.013 264.2);  --muted: oklch(96.7% 0.003 264.5);  --muted-foreground: oklch(44.6% 0.014 269.4);  …

Everything around the builder.

Smaller tools for everyday color work. Each one can send its result into the builder.

Palette

Start from your color and explore palettes around it, with a live UI preview.

Gradient

Smooth multi-stop gradients that stay vivid in the middle.

Image

Pull the main colors out of a photo or screenshot.

Contrast

Check any two colors with WCAG 2.2 and APCA, and get a passing alternative.

Scale

A 50–950 shade scale for any single color, ready to paste.

Start with your brand color.

You'll have scales, tokens and exports in under a minute.

Paste a HEX, RGB, HSL or OKLCH value, or pick one.