Color Palette Generator
Pick a base color and generate harmonious palettes. Click any swatch to copy its value.
How to Use the Color Palette Generator
- Pick a base color — use the color picker or type a hex value to set your starting color.
- Choose a harmony — select from 8 harmony types: complementary, analogous, triadic, split-complementary, tetradic, monochromatic, shades, or tints.
- Explore the palette — view generated colors with their HEX, RGB, and HSL values. Click any value to copy it.
- Export the palette — choose CSS variables, Tailwind config, SCSS variables, or JSON format and copy.
Understanding Color Harmonies
Color harmony is the arrangement of colors in a way that is visually pleasing and balanced. The theory is based on the color wheel, where colors are arranged by their hue angle (0-360 degrees). By selecting colors at specific angular relationships, you can create palettes that naturally work well together.
Complementary Colors
Complementary colors sit directly opposite each other on the color wheel (180 degrees apart). This combination creates maximum contrast and visual energy. It is great for call-to-action buttons, highlights, and designs that need to stand out. Examples include blue and orange, red and green, or purple and yellow.
Analogous Colors
Analogous colors are adjacent on the color wheel (30 degrees apart). They create a cohesive and harmonious feel, perfect for nature-inspired designs, gradients, and backgrounds. One color typically dominates while the others support it. This is one of the most commonly used harmony types in professional design.
Triadic Colors
Triadic harmonies use three colors evenly spaced on the wheel (120 degrees apart). This creates a vibrant, balanced palette that offers variety without clashing. Triadic palettes work well for playful designs, children's products, and creative branding where you want energy and diversity.
Monochromatic Variations
Monochromatic palettes use variations of a single hue by adjusting saturation and lightness. Shades (adding black) create depth and darkness, while tints (adding white) create softness and lightness. These palettes are elegant, professional, and impossible to get wrong since all colors share the same base hue.
Using Palettes in CSS
The export feature generates ready-to-use code for your project. CSS custom properties (variables) are the most flexible option since they work with any framework and can be easily overridden for theming. Tailwind users can paste the config directly into their tailwind.config.js file. SCSS variables work with any Sass-based workflow.
Color Theory in Practice
Color theory provides a scientific and artistic framework for choosing colors that work together. The color wheel, first developed by Isaac Newton and refined by Johannes Itten, arranges hues in a circle where opposite colors complement each other and adjacent colors create natural flows. This tool implements the mathematical relationships behind these visual harmonies, allowing you to explore and apply color theory without memorizing the rules.
Applying Palettes to Design Systems
When building a design system, your color palette serves as the foundation for every visual element. Start with your brand's primary color as the base, then generate complementary or analogous colors for secondary and accent roles. Use the monochromatic, shades, or tints harmonies to create your grayscale and neutral palettes. Export the values as CSS custom properties and reference them consistently throughout your components. This approach ensures visual cohesion across your entire product while making global color changes as simple as updating a few variables. Verify your palette meets accessibility standards with our Color Contrast Checker, generate WCAG-compliant color sets with the WCAG Palette Generator, or pair your colors with harmonious type sizes using the Typography Scale.