Color Palette Generator

ColorsNew

Input a hex color and instantly get four harmony-based palettes with tint/shade scales. Export as CSS variables, Tailwind config, or a hex list.

hsl(262, 83%, 58%)

Click the swatch to use the color picker

Complementary Palette: click to copy

Tint / Shade Scale

Export

--color-1: #7C3AED;
--color-2: #DF6AF1;
--color-3: #F3E481;
--color-4: #ACED3B;
--color-5: #30E015;
--color-6: #89D408;

Works great for

🏷️

Brand identity creation

Generate a harmonious color palette from a single brand color and export it as CSS variables or a hex list. Complementary and triadic harmonies give brand designers a structured starting point in seconds.

🖥️

Web design color scheme planning

Build a full-site color scheme from one seed color using analogous, triadic, or split-complementary harmony rules. The tint and shade scale provides every lightness step needed for backgrounds, borders, and text.

🧩

UI component theming

Generate the token set for a design system (primary, secondary, surface, and accent) from a single brand hex. Export the Tailwind config snippet or CSS custom properties block and drop it straight into your project.

♿

Accessible palette generation

Use the tint/shade scale to find lightness levels that achieve sufficient WCAG contrast against white or dark backgrounds. Pair with a contrast checker to confirm AA or AAA compliance before committing to a palette.

📣

Marketing material consistency

Lock in a palette across print, social, and digital by exporting harmonious hex values tied to a verified brand color. Keeps designers, developers, and marketers referencing the same color tokens.

🌙

Dark mode palette derivation

Flip lightness values on the tint/shade scale to derive a dark-mode variant of any color scheme automatically. Ensures the dark theme shares the same hue identity as the light theme for a cohesive cross-mode design.

color palette generatorcolor scheme generatorcomplementary colorsanalogous colorstriadic colorssplit complementarycss color variablestailwind color palettecolor harmonytint shade scale

Frequently asked questions

How do I generate a color palette from a hex code?

Enter any hex color and the tool builds four harmony-based palettes from it: complementary, analogous, triadic, and split-complementary, each with a tint and shade scale. Pick the palette that fits your design and copy the values you need.

Can I export the palette as Tailwind or CSS variables?

Yes. Each generated palette can be exported as CSS custom properties, a Tailwind config snippet, or a plain hex list. Copy the format that matches your project setup directly from the output panel.

Is there a limit to how many palettes I can generate?

No. You can enter a new hex color and regenerate palettes as many times as you like, free of charge and with no account required.

What is the difference between analogous and triadic color schemes?

Analogous colors sit next to each other on the color wheel and produce a calm, cohesive look, while triadic colors are spaced evenly around the wheel for more contrast and vibrancy. The tool generates both automatically from your base color.