Color Palette Generator

Generate beautiful color palettes from a base color. Create complementary, analogous, triadic, tetradic, split-complementary, and monochromatic color schemes. Export as CSS variables, SCSS, or Tailwind config.

Features

🎨

6 Harmony Modes

Generate palettes using complementary, analogous, triadic, tetradic, split-complementary, and monochromatic color harmonies. Each mode creates balanced, visually pleasing combinations.

🖌

Adjustable Parameters

Fine-tune your palette by adjusting saturation and lightness. Control the intensity and brightness of colors to match your exact design needs.

⚙

WCAG Contrast Ratios

See contrast ratios between all color pairs in your palette. Ensure your color choices meet WCAG AA or AAA accessibility standards for text readability.

💾

Export Options

Export your palette as CSS custom properties, SCSS variables, or Tailwind config. Copy with one click and paste directly into your project files.

About Color Palettes and Harmonies

Color is one of the most powerful tools in design. A well-chosen color palette can evoke emotions, establish brand identity, guide user attention, and create visual hierarchy. However, choosing colors that work well together requires understanding color theory and harmony. This tool automates the process of creating harmonious color schemes based on established principles from the color wheel.

Understanding Color Harmony Modes

Color harmony modes define relationships between colors on the color wheel. Complementary colors sit opposite each other and create high contrast. Analogous colors are adjacent and create serene, cohesive palettes. Triadic colors are evenly spaced (120 degrees apart) and offer vibrant, balanced schemes. Tetradic uses two complementary pairs for rich, diverse palettes. Split-complementary uses a base color and the two colors adjacent to its complement for a softer contrast. Monochromatic uses variations of a single hue with different lightness and saturation levels.

How This Tool Works

Enter a base color using the color picker or HEX input. Select your desired harmony mode from the dropdown. Adjust the saturation slider to control color intensity (0% is grayscale, 100% is fully saturated) and the lightness slider to control brightness (0% is black, 50% is the pure hue, 100% is white). Click "Generate Palette" to create your color scheme. Each color displays HEX, RGB, and HSL values that you can copy by clicking. The tool also calculates WCAG contrast ratios between color pairs to help you choose accessible combinations. Export your palette as CSS variables, SCSS variables, or Tailwind config format.

Common Use Cases

Frequently Asked Questions

What is a complementary color palette? ▼
A complementary color palette uses colors that are opposite each other on the color wheel. Complementary colors create high contrast and vibrant looks when placed next to each other. For example, blue and orange, red and green, or yellow and purple. This harmony mode is ideal for creating bold, attention-grabbing designs with maximum visual impact.
What are analogous colors? ▼
Analogous colors are colors that sit next to each other on the color wheel. An analogous color scheme typically uses three to five colors that are adjacent, creating a harmonious and pleasing palette. For example, blue, blue-green, and green, or red, red-orange, and orange. Analogous palettes are often found in nature and create serene, comfortable designs.
How do I export a color palette for my project? ▼
This tool lets you export your color palette in three formats: CSS custom properties (variables), SCSS variables, and Tailwind config. CSS variables are defined with --color-name syntax and can be used in any modern CSS. SCSS variables use the $ prefix and are ideal for Sass projects. Tailwind config exports the colors as a JavaScript object that you can add to your tailwind.config.js file.
What is WCAG contrast ratio? ▼
WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure text is readable for people with visual impairments. A ratio of 4.5:1 is required for normal text (AA level), and 7:1 for AAA level. Large text (18pt+ or 14pt+ bold) requires 3:1 for AA. This tool calculates contrast ratios between colors in your palette to help you choose accessible color combinations.
What is a monochromatic color scheme? ▼
A monochromatic color scheme uses variations of a single hue by adjusting lightness and saturation. This creates a cohesive, elegant palette with subtle variations. For example, different shades, tints, and tones of blue. Monochromatic schemes are easy to manage and create a clean, professional look. This tool generates monochromatic palettes with varying lightness levels.
What is the difference between triadic and tetradic color schemes? ▼
A triadic color scheme uses three colors evenly spaced around the color wheel (120 degrees apart), creating vibrant palettes with balanced contrast. For example, red, yellow, and blue. A tetradic (or double complementary) scheme uses four colors arranged into two complementary pairs, offering rich, diverse palettes with the most variety but requiring careful balance.
How do I adjust saturation and lightness? ▼
This tool provides sliders to adjust the saturation (color intensity) and lightness (how light or dark) of your generated palette. Saturation ranges from 0% (grayscale) to 100% (fully saturated). Lightness ranges from 0% (black) to 100% (white), with 50% being the pure hue. Adjusting these values lets you fine-tune your palette to match your design needs.
Can I copy individual color values? ▼
Yes, you can click on any color swatch to copy its HEX, RGB, or HSL value to your clipboard. Each color in the palette displays all three formats, and clicking on any value instantly copies it. A toast notification confirms the copy action. This makes it easy to use individual colors from your palette in your design tools or code.

Explore More Developer Tools

Check out our other free tools for designers and developers. Create color converters, CSS gradients, box shadows, and more.

Color Converter →