Toolis.dev

Color Palette Generator

Generate accessible color palettes from one base hex. Eight harmony modes, lock + re-roll workflow, and exports for CSS variables, Tailwind config, SCSS, or JSON.

  • Runs in browser
  • No signup
  • No tracking
Share
Found this useful?Buy me a coffee

How to use Color Palette Generator

  1. Pick a base color (hex or color picker).

  2. Choose a harmony mode — analogous is a safe default.

  3. Click Generate, then lock swatches you want to keep.

  4. Re-roll until you like the rest.

  5. Pick an export format and copy the snippet.

When to use it

  • Designing a brand palette from a single seed color.

  • Building a marketing site theme.

  • Generating CSS variables for a design system.

  • Exploring color harmonies for an illustration.

What it fixes

  • Guessing complementary or triadic hues by eye.

  • Manually computing shade or tint ramps.

  • Rewriting palettes for CSS, Tailwind, and SCSS by hand.

About Color Palette Generator

Designers reach for palette generators when a project needs more than one or two brand colors. This tool starts from a base hex and applies classic color-theory harmonies — complementary, analogous, triadic, tetradic, split-complementary, monochromatic — plus pure shade and tint ramps.

Lock the swatches you like, re-roll the rest. Each swatch displays in HEX, RGB, HSL, or OKLCH. When you're done, export the whole palette as CSS custom properties, Tailwind config snippet, SCSS variables, or a plain JSON object.

References: Adobe — color harmony rules · Bjorn Ottosson — OKLCH

Frequently asked

  • What are harmony modes?

    Classic color theory relationships: complementary (opposite), analogous (neighbors), triadic (evenly spaced thirds), tetradic (four quadrants), split-complementary, monochromatic, shades (darken), and tints (lighten).

  • How does locking work?

    Click the lock icon on any swatch to freeze it. Re-roll only regenerates unlocked swatches, so you can iterate on the rest without losing your favorites.

  • Why does the same harmony look different each time?

    Within a harmony, the lightness and the order of unlocked swatches are tweaked on re-roll so you can explore variations without picking a new base color.

  • What is OKLCH?

    A modern, perceptually uniform color space. Equal numeric steps look equal to the eye, which makes palette ramps look balanced instead of muddy in the middle.

  • Can I edit a swatch directly?

    Yes — type any hex into a swatch input. The display formats (RGB / HSL / OKLCH) update live.

  • How do I use the Tailwind export?

    Copy the snippet and drop it into your `tailwind.config.js` under `theme.extend.colors`. Each swatch becomes a named brand color you can use as `bg-brand-1`, `text-brand-2`, etc.

Discussion

All tools