Color Palette Generator
hsl(239, 84%, 67%)
7 colors · Monochromatic
:root {
  --palette-1: #d9dafc;
  --palette-2: #a1a3f7;
  --palette-3: #696bf2;
  --palette-4: #6366f1;
  --palette-5: #2c2fed;
  --palette-6: #1114c5;
  --palette-7: #04078f;
}

Related Tools

See all ->
Color Contrast CheckerWCAG AA & AAA complianceColor PickerHEX · RGB · HSL · OKLCHGradient GeneratorCSS gradient builderMesh Gradient GeneratorSVG mesh gradient builderFont Pairing ToolGoogle Font combinationsGlassmorphism GeneratorFrosted glass effect builderBox Shadow GeneratorCSS shadow studioCSS Filter GeneratorVisual image filters

Color Palette Generator — Harmony-Based Color Schemes

Updated May 14, 2026
Share & Support

What's included

Features

8 harmony algorithms: monochromatic, analogous, complementary, split-complementary, triadic, tetradic, shades, tints
Live color picker with hex input — type any valid hex code directly; explore individual swatches in detail with our Color Picker
HSL values displayed for each swatch — see hue, saturation, and lightness at a glance
Click any swatch to copy its hex value to clipboard with visual confirmation
Export as CSS custom properties (: root variable block)
Export as Tailwind config colors object with numeric shades (100–900)
Export as plain hex list, HSL value list, or SCSS variable declarations
All color math computed in HSL space for perceptually accurate harmony
Base color highlighted with a ring in the palette for easy identification
100% browser-based — no server requests, works offline after page load; turn palette colors into a gradient with our Gradient Generator

About this tool

Generate a Color Palette From Your Brand Color — With Tailwind and CSS Variable Export

Runs in your browser
No install or signup
Free forever

You have a brand hex code and you need a full color scale — a range of shades from light 100 to dark 900 — or a complementary accent color, or a set of analogous tones that all feel like they belong together. Enter your hex code, pick a harmony type, and the palette generates instantly with CSS variable and Tailwind export included.

Eight harmony algorithms based on color wheel mathematics: Monochromatic — one hue at different lightness levels, ideal for a brand scale where everything stays in the same hue family. Shades — progressively darker variants for a 100-to-900 scale. Tints — progressively lighter variants. Analogous — adjacent hues that feel natural and cohesive. Complementary — the hue directly opposite for maximum contrast accent colors. Split-Complementary — a softer version of complementary using two flanking hues instead of one. Triadic — three evenly spaced hues. Tetradic — four hues forming a rectangle on the wheel.

All color math runs in HSL space, which closely mirrors how human vision perceives color relationships. Every swatch is click-to-copy. The export panel generates the palette in five formats: CSS custom properties for a :root variable block, a Tailwind theme.extend.colors object with numeric shades (100–900), a plain hex list, HSL values, and SCSS variables.

Step by step

How to Use

  1. 1
    Enter your base colorClick the color swatch on the left to open the color picker and choose any color visually, or type a hex code directly into the text field next to it — the # prefix is optional. The live HSL badge updates as you type, showing the hue, saturation, and lightness values of your current color. Any valid 3- or 6-character hex code is accepted. The palette regenerates instantly on every change — no button press needed.
  2. 2
    Select a harmony typeChoose one of the eight harmony algorithms from the dropdown. Monochromatic produces a 7-stop scale at different lightness levels — all same hue, nothing clashes. Analogous picks 5 adjacent hues — natural, cohesive, great for secondary accents. Complementary adds the 180° opposite hue — maximum contrast for CTA buttons and badges. Split-Complementary uses the two hues flanking the complement — softer contrast, easier to balance in UI. Triadic gives 3 evenly spaced hues — vibrant and varied. Tetradic gives 4 hues in a rectangle — maximum variety. Shades produces 9 progressively darker variants for a 100-to-900 dark scale. Tints produces 9 progressively lighter variants for a pastel/light scale.
  3. 3
    Review the swatchesThe generated palette appears as a row of swatches. Each swatch shows its hex code and HSL values. The base color is highlighted with a ring so you can identify your starting point within the generated set. Hover over any swatch to see a larger tooltip with the exact values. The color math runs in HSL space, which mirrors how human vision perceives color relationships — producing harmonies that look balanced and intentional rather than mathematically arbitrary.
  4. 4
    Click a swatch to copy its hex valueClick any swatch to copy its hex code to your clipboard. A checkmark icon appears briefly on the swatch to confirm the copy. Use these individual hex values when you need to reference a single color — paste into a CSS file, a design tool's color field, or a brand style guide document. For copying the entire palette, use the export panel instead.
  5. 5
    Export the palette in your formatScroll to the export panel below the swatches and click the tab for your target format. CSS Vars outputs a :root { --palette-1: #hex; ... } block — paste into your root stylesheet for design token management. Tailwind outputs a theme.extend.colors object with numeric shades (100–900) — paste into tailwind.config.js and use classes like bg-brand-500 immediately. Hex outputs a plain newline-separated list of hex codes. HSL outputs HSL function values. SCSS outputs $palette-N: #hex variable declarations. Click Copy All to copy the complete block for any format.

Real-world uses

Common Use Cases

◉
Generate a 100–900 brand color scale from one hex code
Use the Shades or Monochromatic harmony to produce a complete 9-stop scale from your brand primary — backgrounds (100–200), borders (300), text (600–700), dark text (800–900). Export as a Tailwind config object and start using bg-brand-100, text-brand-700, border-brand-300 immediately.
▦
Find a complementary accent color for a UI component
Switch to Complementary to get the hue 180° opposite your brand primary — the highest-contrast accent option for call-to-action buttons, badges, and highlights. Switch to Split-Complementary for a softer two-color accent option if pure complementary feels too aggressive.
✦
Export a palette as Tailwind color tokens
The Tailwind tab generates a ready-to-paste theme.extend.colors object with numeric shades. Copy it into tailwind.config.js and immediately use classes like bg-brand-200, text-brand-700, and ring-brand-500 — no manual config work needed.
◑
Build CSS variable tokens for a light and dark theme
Generate Tints for light theme backgrounds and Shades for dark theme backgrounds — both anchored to the same base hue. Export as CSS custom properties and assign under :root and [data-theme="dark"] for a token-driven theming system.
⚡
Explore color directions before committing to a design
Switch between harmony types on the same base color to compare how a complementary scheme feels versus triadic, or analogous versus split-complementary — the palette regenerates instantly. Find the direction that works, then copy the hex values and move into design or code. Apply those colors to a glassmorphism card style with our Glassmorphism Generator.
{}
Define semantic color tokens for a design system
Generate harmonies for each semantic role — brand, neutral, success, warning, error — and export each as CSS variables or SCSS. The numeric 100–900 scale matches Tailwind, Material Design, and most design system conventions. Preview how your palette looks in typography with our Font Pairing Tool.

Got questions?

Frequently Asked Questions

Type or paste your hex code into the input field (# prefix is optional) and select a harmony type. The palette generates instantly — no button press needed. Click any swatch to copy its hex value. Use the export panel to copy the palette in CSS variables, Tailwind config, hex list, HSL, or SCSS format.

Select the Shades harmony to generate progressively darker variants, or Monochromatic for a full range from light to dark including tints. Both produce a 9-stop scale. Export as Tailwind config to get a theme.extend.colors object with numeric shades (100–900) — paste it in and immediately use classes like bg-brand-100, text-brand-700, and border-brand-300.

Complementary uses the hue directly opposite (180°) — maximum contrast, vibrant but can feel aggressive. Split-complementary uses the two hues flanking the complement (~150° and ~210°) — provides strong contrast but is softer and easier to balance in UI design because the two accent colors are related in hue rather than forming a single jarring opposite.

Switch to the Tailwind tab and copy the generated theme.extend.colors object. Paste it into your tailwind.config.js and immediately use classes like bg-brand-500, text-brand-200, or border-brand-700. The naming convention matches Tailwind's built-in color scale.

Select the CSS Vars tab and click Copy All. The output is a :root { } block with --palette-1 through --palette-N properties. Paste into your stylesheet's :root rule and reference them with var(--palette-1) anywhere in your CSS — the standard pattern for design token management.

A monochromatic palette uses a single hue at multiple lightness levels — producing a range of tones that all share the same underlying color. Nothing clashes. It's ideal when one brand color needs to work across backgrounds, text, borders, and hover states without introducing a second hue.

Shades are darker variants — mathematically, reduced lightness in HSL with the hue held constant. Tints are lighter variants — increased lightness producing pastel tones. Both maintain the original hue. Shades is useful for dark mode or depth; Tints for light backgrounds and surface colors.

For most UI work, start with your primary brand color and generate an analogous palette for secondary accents — analogous hues (adjacent on the color wheel) feel naturally cohesive. Use monochromatic shades for backgrounds, borders, and text hierarchy — keeping all neutrals tinted toward the primary hue produces a refined, intentional look instead of flat grays. Reserve complementary or triadic colors for alert states, success/error indicators, and CTA buttons where high contrast is needed. The 60-30-10 rule is a useful starting point: 60% of the interface uses the neutral or dominant color, 30% uses a secondary color, and 10% uses the accent.

The export panel supports five formats: Hex (the six-character #RRGGBB format used in HTML and CSS), HSL (hue/saturation/lightness — best for design tokens because the numeric values are human-readable and predictable), CSS Custom Properties (:root block with --palette-N variables), Tailwind config (theme.extend.colors object with shade numbers 100–900 for direct use in tailwind.config.js), and SCSS Variables ($palette-N declarations). Use CSS custom properties or SCSS variables for design-system work where you want centralized palette definitions; use Hex or HSL for one-off color values in component CSS.

Generate a monochromatic palette from your primary brand color and use the darker shades (700–900 range) as surface and background colors in dark mode, with lighter shades (100–300) for text and icon colors. The key advantage of HSL-based generation is that all shades share the same hue, so the dark mode palette feels on-brand rather than looking like generic dark grays. For the CSS custom property export, you can reference the same variable names in a @media (prefers-color-scheme: dark) block and swap the light-mode values for their dark-mode equivalents.