The color layer for your
design system

Built on perceptual color science. One color becomes a full, role-mapped token set - coherent in any system it's bound into.

Try TonexShadcn mode

One color becomes a complete system

Pick a color, you get back a finished, accessible system. One decision instead of many.

Agent-ready tokens, not agent-picked colors

Tonex gives it the commands, contrast checks, and target tokens to update your project without hand-picking colors.

Agent guide
>

See your theme on product UI

Drop your palette onto the components you build with every day. What you preview is what your users get.

One identity, on every surface

Send the same theme to your products. No drift between channels, because none of it was built twice.

One seed. Every channel.

The same color contract drives all five formats — every pairing passes AA.

BillboardInstagramStoryEmailBanner
Billboard

Summer citrus drop

Drink in the daylight.

Yuzu × Sea SaltSparkling12-pack · $32

sola.drinks

Sponsored

Instagram
Yuzu × Sea SaltNew

1,284 likes

sola.drinks your sign to hydrate ☀️

sola.drinks
Story

Drop goes live in

02:14:36
Swipe up to shop

SOLA

hello@sola.drinks

Email

Your summer staple is back ☀️

Yuzu × Sea Salt sparkling is shipping again — and your first case ships free.

Promo code

SUNUP15

15% off
BannerAd

12-pack

$32 · free shipping

Shop now

Exports that drop straight into your stack

Export in the format your stack already speaks, there's nothing left to re-theme.

:root {
  --primary: oklch(0.5057 0.1635 317.07);
  --on-primary: oklch(0.9834 0.01 345.41);
  --primary-container: oklch(0.5795 0.164 317.85);
  --on-primary-container: oklch(1 0 0);
  --secondary: oklch(0.4943 0.0719 320.24);
  --on-secondary: oklch(0.9834 0.01 345.41);
  --secondary-container: oklch(0.8877 0.0764 321.28);
  --on-secondary-container: oklch(0.4204 0.0717 319.03);
  --tertiary: oklch(0.4984 0.1162 318.23);
  --on-tertiary: oklch(0.9834 0.01 345.41);
  --tertiary-container: oklch(0.5734 0.1177 319.18);
  --on-tertiary-container: oklch(1 0 0);
  --error: oklch(0.5036 0.1454 18.37);
  --on-error: oklch(0.982 0.0087 26.02);
  --error-container: oklch(0.7262 0.1614 17.78);
  --on-error-container: oklch(0.2686 0.1076 18.47);
  --surface: oklch(0.9834 0.01 345.41);
  --on-surface: oklch(0.3237 0.0465 318.79);
  --on-surface-variant: oklch(0.4904 0.0469 320.91);
  --surface-dim: oklch(0.8929 0.0504 323.92);
  --surface-bright: oklch(0.9834 0.01 345.41);
  --surface-container-lowest: oklch(1 0 0);
  --surface-container-low: oklch(0.9687 0.0251 329.71);
  --surface-container: oklch(0.9534 0.0401 324.63);
  --surface-container-high: oklch(0.9346 0.0437 324.75);
  --surface-container-highest: oklch(0.9203 0.05 323.91);
  --outline: oklch(0.5861 0.0475 322.42);
  --outline-variant: oklch(0.7684 0.0481 322.64);
}

Everything else you'd reach for

The smaller decisions, already made, the polish is there before you ask for it.

Readable by default

Every text-and-background pair is checked against WCAG as you work. Adjust contrast when you need to meet a stricter bar.

Tune any color, and it stays coherent

Warm your neutrals, re-point a role, lock an exact brand color — adjust by feel and the rest of the palette re-balances to stay coherent around every change.

Bring your own colors

Add a brand-new color — a highlight, a category, a seasonal accent — and tonex tunes it to sit naturally beside the rest, in both light and dark.

Optimize for DX

Command menu, keyboard shortcuts and copy-paste exports keep you in flow — every action a keystroke away, nothing that breaks your rhythm.

Skip the blank page

Open a hand-crafted preset and make it yours, or ship it as-is — start from something considered instead of an empty canvas.

Pick up where you left off

Your palette saves to your browser automatically. Close the tab, come back, and it's exactly where you left it — no account, nothing to lose.

Color your charts automatically

Get chart-ready scales automatically — single-hue, multi-hue, or polychrome — pick the spread that fits your data instead of hand-picking series colors.

Pick any Tailwind color

Pick from the full Tailwind palette right inside the color picker — every shade mapped and ready to drop into a Tailwind project.

Unlock extended tokens

Turn on an extended token set when you need finer control — more named color roles for complex systems.

Start with a color, leave with a system

Author color by intent, not by default

Start nowRead docs