Design
Free Color Palette Generator Online
Generate harmonious color palettes with 7 harmony modes. Copy HEX, RGB, HSL or CSS.
What is a color palette generator?
A color palette generator creates sets of harmonious colors based on color theory principles. Instead of guessing which colors look good together, you use mathematical relationships between hues on the color wheel to generate combinations that are visually pleasing by design.
Colors are generated in HSL format (Hue, Saturation, Lightness) internally and exported as HEX, RGB, or CSS custom properties. You can lock any color to keep it while regenerating the rest — useful when you have a fixed brand color and need harmonious companions.
When choosing colors for the web, always verify contrast ratios against the WCAG accessibility guidelines. WCAG 2.2 requires a minimum contrast ratio of 4.5:1 between text and its background for normal text, and 3:1 for large text. Good color choices are both beautiful and accessible.
How to generate a color palette
- 1Choose a harmony mode
Select from 7 harmony types: Random, Analogous, Complementary, Triadic, Split Complementary, Tetradic, or Monochromatic. Each produces a different visual feel.
- 2Lock colors you want to keep
Click the lock icon on any swatch to keep that color fixed. Regenerate as many times as needed — locked colors stay in place.
- 3Click Generate palette
A new palette is generated using the selected harmony mode. Click any swatch to copy its HEX value instantly.
- 4Copy as CSS variables
Click Copy CSS to get a ready-to-use :root { } block with --color-1 through --color-5 variables. Paste directly into your stylesheet.
Color harmony modes explained
Uses colors adjacent on the color wheel (±20–40°). Looks natural and harmonious. Common in nature-inspired and wellness brands.
Uses colors directly opposite on the wheel (180°). Creates strong visual tension and energy. Common in sports and retail.
Three colors equally spaced (120° apart). Rich and dynamic while maintaining balance. Common in playful, creative brands.
A base color plus two colors adjacent to its complement. More variety than analogous, less tension than complementary.
Four colors forming a rectangle on the wheel. Maximum variety — harder to balance. Works best with one dominant color.
One hue at different lightness values. Easy to get right, always looks polished. Common in premium and minimal brands.
💡 The 60-30-10 rule
A simple rule for using your palette: use your dominant color for 60% of the design (backgrounds, large areas), a secondary color for 30% (cards, sections), and an accent color for 10% (buttons, highlights, links). This creates visual hierarchy without overwhelming the viewer.
Building a design system color palette
A well-structured design system palette goes beyond 5 random harmonious colors. It defines a complete color vocabulary that designers and developers can use consistently across an entire product. Most modern design systems use a scale-based approach where each hue has a range of 10–12 lightness steps (e.g. 50, 100, 200 … 900, 950).
Start by generating your primary brand color palette using this tool, then use the HSL values to create a full scale. For a given hue, keep the hue and saturation constant and vary only the lightness: 950 is near-black, 50 is near-white, and 500 is the pure color. Use Color Converter to translate your generated HEX values to HSL for easier scale creation.
Color psychology in brand and UI design
Color perception is culturally shaped and context-dependent, but certain associations are consistent enough across Western markets to be useful starting points for brand color selection:
From palette to design token system
A generated 5-color palette is a starting point, not a final design system. Production interfaces typically need dozens of named color tokens — semantic roles that map abstract names like "primary" or "danger" to specific values. Here is how to scale a palette into a full token system:
Map each palette color to a purpose: Primary (main brand actions), Secondary (supporting elements), Accent (highlights, CTAs), Neutral (text, backgrounds, borders), Semantic (success green, warning yellow, error red, info blue). Semantic names let you change the underlying color without updating every component.
For each brand color, generate a 9-stop lightness ramp from 10% to 90% in HSL. Label them 100 through 900 (like Tailwind CSS or Material Design). Light stops (100–300) work for backgrounds and tints; medium stops (400–600) work for UI elements; dark stops (700–900) work for text on light backgrounds.
Component tokens reference semantic tokens: --button-bg: var(--primary-500); --button-hover: var(--primary-600); --button-text: var(--neutral-50). This two-level system means changing your brand color updates all components at once, and individual component tweaks do not require touching the base palette.
For each semantic token, define a dark mode value. Often this is the inverse lightness: --surface-bg is neutral-50 in light mode and neutral-900 in dark mode. CSS custom properties make this clean: put light values in :root and dark values in [data-theme="dark"] or @media (prefers-color-scheme: dark).
A color system without documentation is a palette that developers use inconsistently. Write usage guidelines: "Primary 500 is for interactive elements only. Never use Primary as a background for large areas." Even a short README prevents color drift across a growing codebase.
Dark mode color strategy
Dark mode is not just inverting your light palette — that approach consistently produces poor results. Colors that look balanced on a white background become garish and oversaturated when placed on a dark background. Here is how to approach dark mode color design correctly:
Reduce saturation in dark mode. Vivid colors that work on white backgrounds feel harsh against dark backgrounds. Reduce saturation by 10–20% for most brand colors in dark mode. The exception is interactive colors like links and buttons, which benefit from slightly higher saturation to remain visible.
Never use pure black as your dark background. Pure black (#000000) creates extreme contrast with any content, causing eye strain. Instead, use very dark neutral grays (HSL lightness 7–12%) with a subtle hue tint that matches your brand color. Material Design uses #121212; GitHub uses #0d1117; Linear uses #1b1b1f.
Use elevation through lightness. In dark mode, higher surfaces (modals, cards, tooltips) should be lighter, not darker. This mimics real-world ambient occlusion and creates a clear visual hierarchy without shadows. Increment lightness by 4–8% for each elevation level above your base background.
FAQ
Common questions
What is color harmony?
Color harmony is the use of colors that look visually pleasing together based on their position on the color wheel. Common harmonies include analogous (adjacent colors), complementary (opposite colors), and triadic (three evenly spaced colors).
What is the difference between analogous and complementary palettes?
Analogous palettes use colors that sit next to each other on the color wheel — they feel cohesive and calm. Complementary palettes use colors directly opposite each other — they create strong visual contrast and energy.
How do I lock a color?
Click the lock icon on any swatch to keep that color fixed while regenerating the rest of the palette. This lets you build around a specific brand color or a favorite tone.
How do I use the CSS export?
Click "Copy CSS" to copy the palette as CSS custom properties (variables). Paste it into your stylesheet's :root block and use var(--color-1) through var(--color-5) anywhere in your CSS.
What color formats are supported?
Each color is shown in HEX, RGB, and HSL. Click any HEX value in the color table to copy it instantly.
What is the 60-30-10 color rule?
Use your dominant color for 60% of the visual space (large areas, backgrounds), your secondary color for 30% (cards, sidebars, secondary UI), and your accent color for 10% (buttons, links, highlights). This ratio creates visual hierarchy without overwhelming the eye. It applies equally to interior design, fashion, and UI design.
How many colors should a UI palette have?
A typical design system defines 2–3 brand colors (primary, secondary, accent) plus a neutral gray scale. In practice this grows to 30–50 named tokens when you include all lightness steps. For a simple project, start with 5 harmonious colors, then add neutrals and semantic colors (green for success, red for error, yellow for warning).
Why do colors look different on screen versus in print?
Screens use RGB (additive color — mixing light), while print uses CMYK (subtractive color — mixing ink). Vivid RGB colors like bright blues and electric greens often fall outside the CMYK gamut and cannot be reproduced accurately on paper. If your palette will be printed, use the Color Converter to check CMYK values and discuss gamut limitations with your print shop.
More in Design