Color Palette Generator
Generate a 5-color palette from a base color using classic color-harmony rules.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this color palette generator
- Click the color picker swatch or type a 6-digit hex code into the Base Color field.
- Choose a harmony rule from the Harmony Rule dropdown: Complementary, Triad, Tetrad, Analogous, or Monochromatic.
- Press Generate to build the 5-color palette.
- Review the color swatches and their hex and HSL values in the result panel.
- Click Copy hex codes to copy all five hex values to your clipboard.
About this color palette generator
A color palette generator takes one base color and derives four additional colors using a chosen harmony rule, giving you a ready-to-use 5-color palette with balanced visual relationships.
All calculations run in HSL (Hue, Saturation, Lightness) rather than raw RGB, because HSL maps directly onto the color wheel and makes the arithmetic intuitive. Complementary picks the hue directly opposite on the wheel (base hue + 180°) plus bridging shades, producing high-contrast pairs ideal for call-to-action buttons and alerts. Triad spaces three hues evenly at 120° intervals, then adds two lightness variants of the base for a vibrant yet structured set. Tetrad places four hues at 90° intervals around the wheel and completes the five with a neutral tint — good for rich, multi-accent brand kits. Analogous steps through five neighboring hues in 15° increments, yielding calm, harmonious gradients that suit illustration backgrounds and UI surfaces. Monochromatic keeps the hue and saturation fixed and steps through five fixed lightness values (20 %, 40 %, 50 %, 70 %, 85 %), producing a minimalist tonal scale.
For example, entering the base color #3b82f6 (a mid-blue at approximately 217° hue) with the Complementary rule produces an orange complement near #f6b03b at hue 37°, plus three bridging shades that span the blue-orange axis. Each swatch also shows its HSL breakdown below the hex code so you can fine-tune values in any design tool.
This tool runs entirely in your browser — no color data is sent to a server.
FAQ
- What is a color palette generator and how does it work?
- A color palette generator takes a single base color and applies a mathematical harmony rule on the color wheel to derive a coordinated set of colors. This tool produces five colors per palette using HSL arithmetic, converting your hex input to HSL, applying hue offsets or lightness steps, then converting back to hex.
- What is the difference between Complementary and Analogous harmony?
- Complementary selects a hue 180° opposite on the color wheel, creating strong contrast — useful for highlights and emphasis. Analogous selects hues within 30° of the base, producing soft, visually cohesive palettes suited to gradients and calm UI backgrounds.
- Why does the tool use HSL instead of RGB for calculations?
- RGB stores colors as red, green, and blue channel intensities, which do not correspond to the color wheel. HSL separates hue (the 0°–360° wheel position), saturation, and lightness, so shifting a hue by 120° or 180° is a single addition. This makes harmony rules like triads and complements straightforward to compute.
- Will the generated palette be accessible and meet contrast requirements?
- Harmony rules produce aesthetically balanced colors but do not guarantee WCAG contrast ratios for text on backgrounds. After generating a palette, check specific color pairs in a dedicated contrast checker. The swatch labels use light or dark text automatically based on luminance, which gives a rough visual guide.
- Why are there exactly 5 colors in every palette?
- Five colors is a practical standard in design systems: a primary, a secondary or complement, a light variant, a dark variant, and a neutral or accent. It covers most UI needs — backgrounds, surfaces, primary actions, text, and highlights — without overwhelming a project with choices.
- Does the tool store or share the colors I generate?
- No. The color palette generator runs entirely in your browser. No color values, hex codes, or inputs are transmitted to any server.