What are the five palette types?

Monochromatic uses one hue with varying lightness levels, creating a clean tonal range. Complementary pairs opposite hues on the color wheel for high contrast. Triadic places three hues at 120° intervals for vibrant, balanced schemes. Analogous groups neighboring hues for a harmonious, low-contrast feel. Split-Complementary takes the two colors adjacent to the direct complement, offering contrast without the starkness of pure complementary.

What does the WCAG contrast check do?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text legibility. The checker computes the contrast ratio between any two palette colors. A ratio of 4.5:1 or higher passes WCAG AA for normal text; 7:1 or higher passes AAA. Large text (≥18px or bold ≥14px) only needs 3:1 for AA.

How do I use the CSS export?

Click "Export CSS" to generate CSS custom properties (CSS variables) for your entire palette. The output is a :root block with --color-1 through --color-N, ready to paste into your stylesheet. Use them in your project with var(--color-1), var(--color-2), and so on.

Is my color data sent to a server?

No. All palette generation, color math, and contrast calculations run locally in your browser using JavaScript. No color value, no session data, and nothing you enter is ever sent to a server or stored anywhere.

Can I click a palette swatch to use it as the new base color?

Yes. Clicking any color swatch in the palette sets it as the new base color and regenerates the palette from that hue. This lets you explore a color space interactively — start with one color and navigate through related ones.

Color Palette Generator — Harmonious Color Schemes Online

What Is a Color Palette Generator?

A color palette generator is a tool that takes a single base color and derives a set of harmonious colors from it using color theory rules. Instead of guessing which colors look good together, you apply established principles — like complementary contrast or analogous proximity — to produce combinations that are visually coherent.

This tool supports five palette types: Monochromatic, Complementary, Triadic, Analogous, and Split-Complementary. Each one follows a different rule about how hues, saturation, and lightness relate to one another on the color wheel.

The Five Palette Types Explained

Monochromatic palettes use a single hue with varying levels of lightness. The result is a tonal range that feels unified and polished — ideal for UI backgrounds, button states, or typographic hierarchy within one brand color.

Complementary palettes combine a base hue with its direct opposite on the color wheel (180° away). The contrast is high, which makes complementary pairs effective for call-to-action buttons or highlight accents against a dominant brand color.

Triadic palettes place three hues at equal 120° intervals around the wheel. All three hues stay visible and distinct without clashing. Triadic schemes are popular in illustration and game design where vibrancy matters more than subtlety.

Analogous palettes group neighboring hues — 30° apart on either side of the base. The closeness means colors feel related and natural, similar to how colors appear in a photograph of a single environment. These palettes suit backgrounds, gradients, and natural-feeling interfaces.

Split-Complementary palettes take the two hues adjacent to the direct complement of the base. You get strong contrast without the starkness of pure complementary. The scheme is slightly more sophisticated and works well when you want visual tension without making colors fight each other.

How to Use This Tool

Pick a base color using the color picker or type a HEX value directly into the input field.
Select a palette type by clicking one of the five tabs.
The palette updates immediately with 5–6 colors including their HEX, RGB, and HSL values.
Click “Copy HEX” on any swatch to copy its hex code to clipboard.
Use “Copy All as Array” to copy the full palette as a JSON array of hex strings.
Click “Export CSS” to get a :root CSS block with custom properties you can paste into your stylesheet.
Use the WCAG Contrast Checker at the bottom to verify that any two palette colors meet accessibility contrast requirements.

You can also click any swatch in the palette to set it as the new base color and explore neighboring combinations.

Color Values: HEX, RGB, and HSL

Each palette color displays three formats:

HEX (#rrggbb) is the standard format for web CSS and most design tools. It encodes red, green, and blue channels as two-digit hexadecimal values.
RGB (rgb(r, g, b)) expresses the same channels as decimal integers from 0 to 255. It is used directly in CSS and is human-readable for primary colors.
HSL (hsl(h, s%, l%)) separates hue (the color angle 0–360°), saturation (color intensity), and lightness. HSL is far more intuitive for manually adjusting colors: increase L to lighten, reduce S to desaturate, rotate H to shift the hue.

WCAG Accessibility and Contrast

The WCAG (Web Content Accessibility Guidelines) contrast checker compares the relative luminance of two colors to produce a ratio between 1:1 (no contrast, identical colors) and 21:1 (maximum contrast, pure black on pure white).

For normal text to meet WCAG AA, the contrast ratio must be at least 4.5:1. For WCAG AAA — the stricter level — the ratio must reach 7:1. Large text (defined as at least 18px regular or 14px bold) only requires 3:1 for AA and 4.5:1 for AAA.

Before finalizing any palette for a real interface, check the text-on-background combinations you intend to use. Visually appealing colors can easily fail contrast requirements, especially pastel backgrounds with light text.

CSS Custom Properties Export

The CSS export generates a :root block with numbered custom properties (—color-1 through —color-N). Custom properties (CSS variables) are supported in all modern browsers and let you define colors once and reference them throughout your stylesheet. Changing a single variable value updates every place it is used — useful for theming and design system maintenance.

Privacy

All palette calculations, color math, and contrast checks run entirely in your browser using JavaScript. No color you enter, no palette you generate, and no data of any kind is ever uploaded to a server, stored in a database, or shared with any third party. The tool works offline once the page has loaded.

Color Palette Generator