What is a color palette generator?

A color palette generator is a tool that creates sets of colors that work well together based on color theory rules. You pick a base color and a harmony type (complementary, analogous, triadic, etc.), and the tool calculates the remaining colors using their positions on the color wheel.

What is color harmony?

Color harmony is the theory of combining colors in a way that is visually pleasing. It is based on the geometric relationships between colors on the color wheel. Common harmony types include complementary (opposite colors), analogous (adjacent colors), triadic (three equally spaced colors), and monochromatic (variations of one hue).

What is the difference between complementary and split-complementary colors?

Complementary colors are directly opposite on the color wheel (180 degrees apart), creating maximum contrast. Split-complementary uses the base color plus the two colors adjacent to its complement (150 and 210 degrees), which gives strong contrast with less visual tension.

Which color scheme should I use for my design?

It depends on the mood. Complementary schemes are bold and high-contrast -- good for call-to-action buttons and accents. Analogous schemes feel calm and cohesive -- good for backgrounds and branding. Triadic schemes are vibrant and balanced -- good for illustrations. Monochromatic schemes are elegant and minimal -- good for professional or corporate design.

What is the difference between hex, RGB, and HSL color formats?

Hex uses a six-character code like #00d4aa. RGB specifies red, green, and blue channel values from 0 to 255, like rgb(0, 212, 170). HSL specifies hue (0-360 degrees), saturation (0-100%), and lightness (0-100%), like hsl(168, 100%, 42%). All three describe the same color -- they are just different notations.

How do complementary colors work on the color wheel?

Complementary colors sit 180 degrees apart on the color wheel. For example, the complement of teal (168 degrees) is a warm red-pink (348 degrees). Placing complementary colors side by side creates strong visual contrast because they have maximum perceptual difference.

Can I export color palettes as CSS?

Yes. This tool has a Copy CSS Variables button that exports the current palette as a :root declaration with custom properties. It also has a Copy Array button that exports hex values as a JSON array. You can paste either format directly into your code.

What is a monochromatic color scheme?

A monochromatic color scheme uses a single hue with variations in lightness and saturation. For example, starting from teal you might get a very light teal, a medium teal, and a dark teal. Monochromatic palettes are cohesive and easy to apply, though they offer less contrast than multi-hue schemes.

How many colors should a palette have?

Most design systems use 3 to 5 primary colors. A typical approach: one dominant color (60% of the design), one secondary color (30%), and one accent color (10%). This tool generates 4 to 5 colors per scheme, which covers most use cases for web and UI design.

Is this color palette generator private?

Yes. All color calculations run locally in your browser using JavaScript. No color data, palettes, or preferences are sent to a server. Nothing is stored or logged. Refreshing the page resets the tool.

Color Palette Generator

Shades & Tints

Contrast Accessibility Checker

Pick any two palette colors to check WCAG contrast compliance.

Foreground: #ffffff

Background: #0a0a0b

Large Text

Normal body text sample for readability.

Contrast Ratio

AA Normal: -- AA Large: -- AAA Normal: -- AAA Large: --

Export Palette

Understanding Color Harmonies

Color harmony is the practice of combining colors using geometric relationships on the color wheel. Each harmony type produces a different visual effect. This tool uses the HSL color model (hue, saturation, lightness) to calculate palette colors from your base hue.

Harmony Types

Complementary: Colors opposite on the color wheel (180 apart). Produces high contrast and a vibrant look. Example: teal and red-pink.
Analogous: Colors adjacent on the wheel (within 30 of each other). Produces a harmonious, soothing feel. Example: teal, cyan, and green.
Triadic: Three colors equally spaced at 120 intervals. Balanced and colorful. Example: teal, orange, and purple.
Split-Complementary: Base color plus the two colors flanking its complement (150 and 210). Strong contrast with less tension than complementary.
Monochromatic: One hue at different lightness and saturation levels. Cohesive, elegant, and easy to get right.

Worked Examples

1. Complementary scheme from teal.
Base: #00d4aa (hue 168). Complement: 168 + 180 = 348 -> #d4002a. The palette adds light and dark variants of both. Use the teal as background, the red-pink as accent for buttons or alerts.

2. Analogous scheme for a calming dashboard.
Base: #3b82f6 (blue, hue 217). Neighbors at 187, 202, 232, 247 produce a range of blue-cyan-indigo tones. Apply the lightest as background, medium as panel borders, darkest as headings.

3. Triadic scheme for an illustration.
Base: #f59e0b (amber, hue 38). Triadic partners at 158 and 278 give a teal-green and a purple. Use amber as dominant fill, teal for secondary elements, purple for highlights.

The 60-30-10 Rule

A widely used guideline for applying a palette: use the dominant color for 60% of the design (background, large areas), the secondary color for 30% (panels, cards, navigation), and the accent for 10% (buttons, links, icons). This creates visual hierarchy without overwhelming the viewer.

Hex, RGB, and HSL Explained

Hex is a compact notation: #RRGGBB where each pair is a value from 00 to FF. RGB specifies red, green, blue channels from 0 to 255. HSL specifies hue (0-360), saturation (0-100%), and lightness (0-100%). HSL is often easier to reason about because you can shift the hue to get a new color while keeping saturation and lightness constant -- which is exactly how this tool calculates harmony palettes.

Frequently Asked Questions

Privacy

All color calculations run locally in your browser using JavaScript. No colors, palettes, or preferences are sent to a server. Nothing is stored or logged. There is no account, no tracking, and no cookies. Refreshing the page resets the tool to its default state.

Related Tools

JSON Path Finder -- Paste JSON and click any value to get its JSONPath and dot notation path
Regex Tester -- Test regular expressions and see matches
Glassmorphism Generator -- Create frosted glass CSS effects with backdrop blur and live preview
Log Retention Calculator -- Calculate storage needs for log retention policies with compression estimates

Related Tools

View all tools

Color Palette Generator

Understanding Color Harmonies

Harmony Types

Worked Examples

The 60-30-10 Rule

Hex, RGB, and HSL Explained

Frequently Asked Questions

Privacy

Related Tools

Related Tools

Big-O Notation Visualizer

JSON Formatter

JSON Validator

CSV to JSON Converter

JSON to CSV Converter

JWT Decoder