What is a complementary color?

It's the color directly opposite yours on the color wheel — a 180° hue rotation. Complementary pairs have the most contrast and make accents pop. Analogous colors sit next to yours for a calmer, blended look; triadic and tetradic spread three or four colors evenly for a balanced multi-color scheme.

How do I keep one color and change the rest?

Lock it. Click the lock on any color and it stays fixed while Shuffle — or the spacebar — re-rolls the others, so you can explore variations around a color you’ve already committed to. Unlock the primary too if you want to roll the entire palette from scratch.

How many accent colors should a brand use?

Most brands lean on one primary plus one or two accents, then a neutral gray. Start with one or two accents here; reach for triadic or tetradic only when you genuinely need a richer, multi-color system.

What do the 50–950 numbers mean?

It's the convention design systems (including Tailwind) use: 50 is the lightest tint, 500 is roughly your base color, and 950 is the darkest shade — a consistent set of steps to design with. Each color in your palette gets its own ramp.

Can I use these colors with Tailwind?

Yes — copy the Tailwind config output into your theme's colors and the whole scale, plus each accent, is available as utility classes.

Brand color palette generator.

Turn one brand color into matching color harmonies plus a full 50–950 tint and shade scale, with CSS variables and Tailwind config — ready to paste.

Runs in your browser
Nothing is uploaded
Free — no sign-up

Base color

Primary color

Anchored as step 500. Unlocked accents follow it.

Name

Names your theme and each color in the files below.

Color harmony

Scheme

How accents relate to your primary on the color wheel.

Accent colors2

One to four colors generated alongside your primary.

Take your colors with you

Ready-made theme for silicaui

/* brand — a color theme for silicaui (silicaui.com).
 * Paste into your stylesheet. Each color has a matching "-content" value:
 * the text color that stays readable on top of it.
 */
[data-theme='brand'],
[data-theme='light'] {
  color-scheme: light;
  /* Primary */
  --color-primary: #6366f1;
  --color-primary-content: #000000;

  /* Accent 1 */
  --color-secondary: #f1ee63;
  --color-secondary-content: #000000;

  /* Accent 2 */
  --color-accent: #a763f1;
  --color-accent-content: #000000;
}

[data-theme='brand-dark'],
[data-theme='dark'] {
  color-scheme: dark;
  /* Primary */
  --color-primary: #6366f1;
  --color-primary-content: #000000;

  /* Accent 1 */
  --color-secondary: #f1ee63;
  --color-secondary-content: #000000;

  /* Accent 2 */
  --color-accent: #a763f1;
  --color-accent-content: #000000;
}

silicaui is a design system — it turns one set of colors into every button, badge and card on a site, so you set your colors once instead of hunting them down screen by screen. Paste this into the stylesheet that controls how your site looks and your palette takes over, in both light and dark mode. sparx itself is built on silicaui, so this same theme works on your sparx site. More at silicaui.com.

Tailwind config

colors: {
  brand: {
    50: '#f7f7fe',
    100: '#eff0fe',
    200: '#d8d9fc',
    300: '#c1c2f9',
    400: '#9294f5',
    500: '#6366f1',
    600: '#5659d2',
    700: '#4749ae',
    800: '#393b8c',
    900: '#2c2d6a',
    950: '#20214d',
  },
  'brand-accent-1': {
    50: '#fefef7',
    100: '#fefdef',
    200: '#fcfbd8',
    300: '#f9f8c1',
    400: '#f5f392',
    500: '#f1ee63',
    600: '#d2cf56',
    700: '#aeab47',
    800: '#8c8a39',
    900: '#6a692c',
    950: '#4d4c20',
  },
  'brand-accent-2': {
    50: '#fbf7fe',
    100: '#f6effe',
    200: '#e9d8fc',
    300: '#dcc1f9',
    400: '#c192f5',
    500: '#a763f1',
    600: '#9156d2',
    700: '#7847ae',
    800: '#61398c',
    900: '#492c6a',
    950: '#35204d',
  },
}

For a site built with Tailwind CSS. Every color comes as a full range of light-to-dark shades, ready to drop into your config file.

Plain CSS variables

:root {
  /* Primary */
  --brand-50: #f7f7fe;
  --brand-100: #eff0fe;
  --brand-200: #d8d9fc;
  --brand-300: #c1c2f9;
  --brand-400: #9294f5;
  --brand-500: #6366f1;
  --brand-600: #5659d2;
  --brand-700: #4749ae;
  --brand-800: #393b8c;
  --brand-900: #2c2d6a;
  --brand-950: #20214d;

  /* Accent 1 */
  --brand-accent-1-50: #fefef7;
  --brand-accent-1-100: #fefdef;
  --brand-accent-1-200: #fcfbd8;
  --brand-accent-1-300: #f9f8c1;
  --brand-accent-1-400: #f5f392;
  --brand-accent-1-500: #f1ee63;
  --brand-accent-1-600: #d2cf56;
  --brand-accent-1-700: #aeab47;
  --brand-accent-1-800: #8c8a39;
  --brand-accent-1-900: #6a692c;
  --brand-accent-1-950: #4d4c20;

  /* Accent 2 */
  --brand-accent-2-50: #fbf7fe;
  --brand-accent-2-100: #f6effe;
  --brand-accent-2-200: #e9d8fc;
  --brand-accent-2-300: #dcc1f9;
  --brand-accent-2-400: #c192f5;
  --brand-accent-2-500: #a763f1;
  --brand-accent-2-600: #9156d2;
  --brand-accent-2-700: #7847ae;
  --brand-accent-2-800: #61398c;
  --brand-accent-2-900: #492c6a;
  --brand-accent-2-950: #35204d;
}

The same shades as plain CSS, for a site that doesn’t use either of the above.

Already using sparx?

{
  "sparx": "sparx.brand-palette",
  "version": 1,
  "name": "brand",
  "source": "https://sparx.works/tools/color-palette",
  "primary": {
    "fill": "#6366F1",
    "content": "#000000"
  },
  "accents": [
    {
      "fill": "#F1EE63",
      "content": "#000000"
    },
    {
      "fill": "#A763F1",
      "content": "#000000"
    }
  ]
}

Your Builder can read this directly. Copy it, then open your site and go to Builder → Brand → Import palette to recolor your brand.

Palette

3 colors

or press Space — lock the colors you want to keep

Click a bar to preview its full scale below; lock it to keep it through shuffles.

Live preview

DashboardYour palette in context

ChartsDetails

Page score91/100

All good

Badges

PrimaryAccent 1Accent 2

Verification completeYour brand colors are ready to ship.

Progress

Setup

Launch

Buttons

PrimaryAccent 1Accent 2SoftOutline

Scale · Primary

Click any step to copy its hex. 50 is the lightest tint, 950 the darkest shade.

Good to know.

A color palette generator turns one brand color into a complete, harmonious scheme. This free tool generates complementary, analogous, triadic, tetradic, monochromatic, or fully random accent colors from your base, lets you shuffle for fresh variations and lock the colors you like, previews the palette on real UI, and exports a full 50–950 tint and shade scale for every color as CSS variables or a Tailwind config.

One color, a whole scheme

Pick a single brand color and get matching accents from color theory — complementary, analogous, triadic, tetradic, or monochromatic — by rotating your hue around the color wheel, or switch to a free-form Random mode when you want more variety. A slider sets how many accents you want, from one to four.

Shuffle, then lock what you love

Hit Shuffle (or tap the spacebar) to roll fresh variations within your scheme, and lock any color to keep it fixed while the rest re-roll. A live preview applies the palette to real UI — buttons, badges, charts, alerts — so you judge it in context, not as a flat strip.

Copy it the way you build

Export every color — primary and each accent — as a full 50–950 ramp of CSS custom properties or a Tailwind color config, with text-on-background pairings checked against WCAG so you know which steps are safe to put words on.

How to build a color palette

Pick your brand color. Enter the hex of your primary color.
Choose a harmony. Pick a scheme — complementary, analogous, triadic, tetradic, or monochromatic — and how many accent colors to generate.
Shuffle and lock. Press Shuffle (or the spacebar) to explore variations, and lock the colors you want to keep so they stay fixed while the rest re-roll.
Copy the export. Copy the full CSS variables or Tailwind config — a 50–950 scale for the primary and every accent.

Frequently asked

Builder

A palette is the start of a brand.

Colors are the first decision; sparx Builder is where they live — themes that apply your palette across every page and component, with a custom domain and automatic SSL. No code, live in five minutes.

Explore Builder

What you get with sparx Builder.

The website module. Pick a theme, edit blocks in the browser, point your domain. SSL and the global CDN are handled for you. The same builder serves a one-page portfolio, a 40-post blog, or a 50,000-SKU catalog.

Theme-first.

Start from a polished theme, change the parts that matter, publish. Want full control? Build a custom frontend against the same API — coding optional, never required.

Block editor.

Drag, drop, edit in the browser. Every block is responsive and accessible by default — clean markup, no mystery wrappers, no shadow DOM.

Custom domain + SSL.

Point your DNS and your certificate provisions itself. No separate DNS service, no certificate to renew, no upcharge.

Builder is one module on the sparx platform — activate it alongside storefront, CRM, CMS, email, and B2B on one data layer and one bill. Only pay for what you run.

Explore the platform See pricing

More free tools.

Every sparx tool runs entirely in your browser — free, no account, nothing uploaded.