DesignFree

Color Palette Generator

Generate professional color palettes from one or two base colors. Choose a single color and get Shades, Complementary, Triadic, Analogous, or Split-Complementary palettes. Pick two colors and get a 10-step gradient plus individual shade sets. Copy any swatch as HEX, RGB, or HSL. Export the full palette as CSS variables or JSON. 100% browser-based — no signup, no uploads.

Palette Type

Light to dark tints of the base color

Base Color Values

Export palette:

Frequently Asked Questions

What is a color palette generator?▼
A color palette generator takes one or more base colors and produces a set of harmonious colors using color theory rules. This helps designers, developers, and artists quickly create consistent color schemes for websites, apps, and brand materials.
What palette types can I generate from a single color?▼
Five palette types are available: Shades (9 tints from dark to light), Complementary (base + its opposite on the color wheel), Triadic (three hues spaced 120° apart), Analogous (neighboring hues within 60°), and Split-Complementary (base + two neighbors of its complement).
What happens when I use 2 colors?▼
With two colors you get a 10-step gradient (RGB interpolation between the two), plus an independent shade set for each color — giving you a complete design system that bridges both hues.
How do I copy a color swatch?▼
Click any color swatch to instantly copy its HEX code to your clipboard. For RGB or HSL values, use the color value chips in the base color panel below the swatches.
How do I export the full palette?▼
Click 'CSS Variables' to copy the palette as CSS custom properties ready to paste into your stylesheet. Click 'JSON' to copy a structured JSON array with HEX, RGB, and HSL for each color.
Is the tool free and private?▼
Yes. All color calculations run entirely in your browser using JavaScript. No data is sent to any server and no account is required.
Can I use this tool for brand color systems?▼
Yes. The Shades mode is ideal for generating a full tonal scale for a brand primary color (similar to Tailwind CSS or Material Design color systems). Export the CSS variables and drop them straight into your design tokens.