Color Palette Generator

Generate beautiful 5-color palettes. Lock colors you like, press spacebar to regenerate.

or press spacebar

Export as:

:root {

}

What Is the Color Palette Generator?

The Color Palette Generator creates random 5-color palettes that you can use in web design, graphic design, illustration, and branding projects. Each swatch displays its hex, RGB, and HSL values, and you can lock individual colors while regenerating the rest.

The tool runs entirely in your browser with no signup or account required. Palettes can be exported as CSS custom properties, Tailwind configuration values, or a plain hex list — ready to paste directly into your project.

How to Generate a Color Palette

Creating a palette is fast and intuitive:

  • Click Generate or press the spacebar to create a new random 5-color palette.
  • Click any color swatch to copy its hex code to your clipboard.
  • Hover over a swatch and click the lock icon to keep that color fixed.
  • Press spacebar again — only unlocked colors will change, letting you build around your favorite colors.
  • Use the Export section to copy the palette in your preferred format.

Export Formats

The tool supports three export formats for easy integration into your workflow:

  • CSS Variables — Generates a :root block with custom properties you can drop into any stylesheet.
  • Tailwind — Produces a colors object ready for your tailwind.config.js file.
  • Hex List — A simple newline-separated list of hex values, useful for design tools and documentation.

Tips for Building Great Palettes

  • Lock one or two colors that match your brand, then generate to find complementary accents.
  • Look at the HSL lightness values to ensure good contrast between your text and background colors.
  • For accessible designs, pair colors with at least a 4.5:1 contrast ratio for text.
  • Generate several palettes and screenshot your favorites for comparison before committing.

Common Use Cases

  • Finding color schemes for websites, apps, and landing pages.
  • Creating brand color palettes for logos and marketing materials.
  • Exploring color combinations for illustrations and digital art.
  • Generating themed palettes for presentations and slide decks.
  • Rapid prototyping with ready-to-use CSS or Tailwind values.

Frequently Asked Questions

How do I generate a color palette?+
Click Generate or press the spacebar to create a random 5-color palette. If you find a color you like, click the lock icon to keep it, then generate again to randomize only the unlocked colors.
Can I export my color palette as CSS variables?+
Yes. Use the Export section at the bottom of the tool to copy your palette as CSS custom properties, Tailwind config values, or a plain hex list. Click Copy Export to copy the output to your clipboard.
How do I lock a color in the palette?+
Hover over a color swatch and click the lock icon in the top-right corner. Locked colors stay fixed when you generate new palettes, letting you build around colors you already like.
What color formats are shown for each swatch?+
Each color swatch displays its hex code, RGB values, and HSL values. Click any swatch to copy its hex code to your clipboard instantly.
Can I use these color palettes for my website or app?+
Yes. The palettes are randomly generated and free to use for any purpose. Export them as CSS variables or Tailwind config values and paste directly into your project.
Is there a keyboard shortcut to generate new palettes?+
Yes. Press the spacebar to instantly generate a new palette. This makes it fast to cycle through combinations until you find one you like.

Related Tools

CSS Gradient GeneratorBox Shadow GeneratorImage Color PickerPhoto Watermark Remover

Color Palette Generator — free online color palette generator, random color palette, color scheme generator, color palette maker, generate color palette online, css color palette, tailwind color palette, website color scheme. No signup required. Works in your browser.