Color Palette Generator
Generate beautiful color palettes from a base color using HSL adjustments. Ideal for UI design and development.
Generated Palette
About Color Harmonies
Complementary colors are opposite each other on the color wheel, creating high contrast and vibrant looks when used together.
About Color Palette Generator
A Color Palette Generator is an intelligent design tool that creates harmonious color schemes from a single base color using HSL (Hue, Saturation, Lightness) adjustments. This tool automatically generates complementary, analogous, triadic, and other color harmony schemes that work well together in design projects.
Why use a Color Palette Generator?
Using a Color Palette Generator saves hours of manual color selection and ensures professional-looking color combinations that follow established color theory principles. It eliminates guesswork in color selection and provides multiple palette options that maintain visual harmony across your design projects.
Who is it for?
This tool is perfect for UI/UX designers creating interface color schemes, web developers building cohesive brand experiences, graphic designers working on visual identity projects, digital artists exploring color relationships, and anyone who needs to create professional, harmonious color palettes quickly and efficiently.
How to use the tool
Enter or select your base color using the color picker or by typing a HEX code
Choose a palette mode (complementary, analogous, triadic, etc.) — or click Random for a new base colour
Switching mode or clicking Random also re-rolls the small variations used by the Gradient Flow and Soft Pastel modes
Preview the generated palette; each swatch shows its HEX and HSL values
Copy individual HEX codes, or use Export Palette to download CSS variables, SCSS variables and a JSON array as a .txt file
Frequently Asked Questions
How do I generate a colour palette?
Enter a base colour as a 3- or 6-digit HEX code (or use the picker) and choose a palette mode — complementary, analogous, triadic, tetradic, split-complementary, monochromatic and more. The tool generates the matching colours based on colour theory relationships on the colour wheel. Copy individual HEX codes, or export the full palette as CSS variables, SCSS variables and a JSON array in one .txt file. Generation runs entirely in your browser — your colour values never leave the device.
What palette types are available?
Six standard schemes from colour theory, plus four extra modes (Golden Ratio, Gradient Flow, Soft Pastel, Earth Tones). (1) Complementary: two colours opposite on the wheel — high contrast, energetic. (2) Analogous: 3-5 colours adjacent on the wheel — harmonious, low contrast. (3) Triadic: three colours evenly spaced (120° apart) — vibrant, balanced. (4) Tetradic / square: four colours evenly spaced — rich and varied. (5) Split-complementary: base colour plus two adjacent to its complement — balanced but less harsh than complementary. (6) Monochromatic: variations of one colour at different lightnesses — see [Monochromatic Palette Generator](/tools/monochromatic-palette-generator/) for the dedicated tool.
Can I export palettes to CSS or Tailwind?
Partly. Export Palette downloads a single .txt file containing the palette as CSS custom properties (`--color-0: #FF6347;`), SCSS variables (`$color-0: #FF6347;`) and a JSON array of HEX values — copy the snippet you need. There is no Tailwind config or image export; wrap the HEX values in your own `theme.extend.colors` entry if you use Tailwind. For design tools (Figma, Sketch, Adobe XD), copy individual HEX values and paste into the colour picker.
How do I create an accessible palette?
Accessibility focuses on contrast between foreground (text) and background colours. WCAG 2.2 requires 4.5:1 contrast for normal text, 3:1 for large text. This tool does not check contrast itself; test pairs of palette colours with [Contrast Checker](/tools/contrast-checker/). For accessible palettes: ensure dark text reads on light backgrounds (and vice versa) at 4.5:1+. Avoid colour-only differentiation (relying on red vs green for meaning) — pair with shape, icons, or text labels for [Color Blindness Simulator](/tools/color-blindness-simulator/) test scenarios.
What's the difference between complementary and analogous palettes?
Complementary uses two colours from opposite sides of the colour wheel (e.g. blue + orange) — maximum hue contrast, energetic and attention-grabbing. Useful for accent vs background, CTAs vs body. Risk: can feel harsh if both used at full saturation. Analogous uses 3-5 colours from adjacent positions on the wheel (e.g. blue, blue-green, green) — low hue contrast, harmonious and calm. Useful for cohesive brand palettes and gentle UIs. The two approaches are different design moods; pick based on the intended feel.
Can I customise the saturation and lightness?
Not directly — this tool has no saturation or lightness sliders. The mode determines which hues, and the base colour's own saturation and lightness carry through (Soft Pastel forces low saturation and high lightness). To get a different feel, change the base colour: for pastels use low S (30-50%), high L (75-90%); for vivid colours high S (80-100%), mid L (40-60%); for muted designs low S (20-40%), mid L (40-60%). Convert a HEX to HSL with [HEX to RGB](/tools/hex-to-rgb/) first if you want to pick exact values.
How many colours should a palette have?
Common counts. 2-3: minimalist, brand-strong (primary + accent + neutral). 4-5: standard for most design systems (primary, secondary, accent, neutral text, neutral background). 6-8: rich design systems with multiple semantic colours (primary, secondary, accent, success, warning, error, plus neutrals). 10+: detailed design tokens, often with multiple shades of each colour (`primary-100, primary-200, ... primary-900`). Most apps work well with 5-7 distinct palette colours plus a neutral grey scale.
When should I use this vs Monochromatic Palette Generator?
Use this tool when you want hue variation (palettes spanning multiple colours from the colour wheel — complementary, triadic, etc.). Use [Monochromatic Palette Generator](/tools/monochromatic-palette-generator/) when you want shade variation of a single hue (e.g. a 9-step blue scale from `blue-50` to `blue-900` for a design system). Most full design systems use both: monochromatic scales for each semantic colour + multi-hue palette for the relationships between primary, accent, and supporting colours.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.