What is a complementary color palette?

Complementary colors sit opposite each other on the color wheel. A complementary palette uses two colors 180° apart in hue, creating high contrast. It is useful for call-to-action buttons, highlighting, and bold brand identities.

What is a triadic color palette?

A triadic palette uses three colors evenly spaced around the color wheel (120° apart). It offers strong visual contrast while remaining balanced, and is popular in illustration and gaming UI.

What is an analogous color palette?

Analogous colors are adjacent on the color wheel (typically 30° apart). They create a harmonious, natural look with low contrast — ideal for backgrounds, nature themes, and relaxed interfaces.

What is a monochromatic palette?

A monochromatic palette uses a single hue with variations in lightness and saturation. It creates a clean, cohesive look and is well-suited for minimalist interfaces and data visualisations.

How does the random palette work?

The random mode generates 5 fully independent random hues with varied saturation and lightness, applying slight constraints to avoid muddy or unreadable colours.

Can I start from a specific color?

Yes. Use the color picker to choose a base color, then select a harmony mode. The palette is derived from that base using color theory rules.

What color format is used?

Palettes are displayed and copied in hex format (#RRGGBB). The underlying calculations use HSL for perceptually uniform adjustments.

Can I use the palette in my CSS?

Copy individual hex codes using the copy button under each swatch, or copy all hex codes at once. For CSS custom properties, paste the values into your :root {} block.

Generators /

Color palette generator

Generate harmonious color palettes using color theory: complementary, triadic, analogous, monochromatic, or random. Pick a base color and copy hex codes.

100% in your browser. No data sent anywhere.

Harmony mode

Base color

How to use

Choose a harmony mode — start with Complementary for a bold two-tone palette.
Pick a base color using the color picker or type a hex code.
Click Generate palette to create 5 harmonious colors.
Click any swatch's Copy button to copy its hex code, or Copy all for the full set.
Click Random base to jump to an unexpected base color and explore.

Common use cases

Brand identity — complementary palette for logo and accent colors.
UI design — analogous palette for a calming, consistent interface.
Data visualisation — triadic palette for distinct category colors.
Dark mode — monochromatic palette with decreasing lightness for depth.

Also see: CSS Gradient Generator to turn palette colors into gradients, Color Converter for HEX/RGB/HSL conversion.

よくある質問

What is a complementary color palette?: Complementary colors sit opposite each other on the color wheel. A complementary palette uses two colors 180° apart in hue, creating high contrast. It is useful for call-to-action buttons, highlighting, and bold brand identities.
What is a triadic color palette?: A triadic palette uses three colors evenly spaced around the color wheel (120° apart). It offers strong visual contrast while remaining balanced, and is popular in illustration and gaming UI.
What is an analogous color palette?: Analogous colors are adjacent on the color wheel (typically 30° apart). They create a harmonious, natural look with low contrast — ideal for backgrounds, nature themes, and relaxed interfaces.
What is a monochromatic palette?: A monochromatic palette uses a single hue with variations in lightness and saturation. It creates a clean, cohesive look and is well-suited for minimalist interfaces and data visualisations.
How does the random palette work?: The random mode generates 5 fully independent random hues with varied saturation and lightness, applying slight constraints to avoid muddy or unreadable colours.
Can I start from a specific color?: Yes. Use the color picker to choose a base color, then select a harmony mode. The palette is derived from that base using color theory rules.
What color format is used?: Palettes are displayed and copied in hex format (#RRGGBB). The underlying calculations use HSL for perceptually uniform adjustments.
Can I use the palette in my CSS?: Copy individual hex codes using the copy button under each swatch, or copy all hex codes at once. For CSS custom properties, paste the values into your :root {} block.

このツールの問題を報告