Color Palette Generator from Base Color

Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.

Base Color

Lightness Adjustment0%

Quick Select

Export Formats

Generated Palette

Lighter

#b1cdfb

Light

#76a8f9

Base

#3b82f6

Dark

#295bac

Darker

#183462

Preview

Light Theme

Sample text with dark color

Dark Theme

Sample text with base color

Gradient Preview

What This Generator Creates

Starting from a single base color, this tool generates a 5-color palette with lighter and darker variations. The palette includes the base color plus two lighter shades and two darker shades — perfect for creating UI states, hover effects, and visual hierarchy.

How the Palette Is Generated

The tool adjusts the lightness value in HSL color space. Lighter colors increase lightness by fixed increments. Darker colors decrease it. This keeps the hue and saturation consistent, ensuring all colors feel like they belong to the same family.

For a base of hsl(217, 91%, 60%), the palette might include hsl(217, 91%, 80%), hsl(217, 91%, 70%), hsl(217, 91%, 60%), hsl(217, 91%, 40%), hsl(217, 91%, 20%).

Using the Generated Palette

Button States

Base color for the default button. Lighter for hover. Darker for active/pressed. Lightest for disabled. One palette covers all interaction states.

Background Hierarchy

Use the lightest shade for page background. Next lightest for cards. Base for accents. Dark shades for text. Everything feels cohesive.

Data Visualization

Each shade represents a different value range in a choropleth map or heat map. The gradient feels natural because all colors share the same hue.

Typography Scale

Darkest shade for headings. Medium-dark for body text. Lighter shades for secondary text and placeholders. All text colors work together.

Exporting Your Palette

The CSS Variables export gives you ready-to-use custom properties:

:root {
  --palette-50: #eff6ff;
  --palette-100: #dbeafe;
  --palette-200: #bfdbfe;
  --palette-300: #93c5fd;
  --palette-400: #60a5fa;
}

Use them directly: background: var(--palette-200); or integrate into Tailwind by extending the theme.

Frequently Asked Questions

Can I customize the lightness steps?

This tool uses fixed increments for simplicity. For custom steps, use the Shade Tint Tone Generator or Color Scale Generator tools.

Why do some palettes look muddy?

Highly saturated base colors can become overwhelming when varied in lightness. Try reducing the base saturation, or use the Pastel Palette Generator for softer results.

How do I use this with Tailwind CSS?

Copy the CSS variables export and add them to your global CSS. Or use the Tailwind export format and merge it into your tailwind.config.js theme extension.

What if I need more than 5 colors?

Use the Color Scale Generator, which supports 3-15 steps. Or generate multiple palettes from different base colors and merge them with the Palette Merger tool.

Can I generate complementary palettes?

This tool creates monochromatic variations. For complementary colors, use the Color Harmony Generator. Then use this tool on each harmony color for full palettes.

Are these palettes accessible?

The palette provides options, but you still need to check contrast. Use the Contrast Checker to verify your specific color combinations meet WCAG requirements.

Tips for Better Palettes

Start with a mid-lightness base. If your base is already very light or very dark, there's less room to vary. Aim for 40-60% lightness for the most flexibility.

Test in grayscale. Convert your palette to black and white. If the steps are still distinguishable, the lightness progression works.

Consider the use case. UI states need clear differentiation. Background hierarchies can be more subtle. Adjust your base color accordingly.

Export early, export often. Save your palette as CSS variables before you lose it. It's easy to regenerate, but why risk losing a good combination?

Other Free Color Tools

Search tools