Color Palette Generator

Complementary
Analogous
Triadic
Tetradic
Monochromatic
Split-Comp.
Palette
−30°

#3CE0F6

rgb(60, 224, 246)

hsl(187, 91%, 60%)

Base

#3C83F6

rgb(60, 131, 246)

hsl(217, 91%, 60%)

+30°

#523CF6

rgb(82, 60, 246)

hsl(247, 91%, 60%)

About

Color harmony describes combinations of colors that are visually pleasing together. These relationships are defined by positions on the color wheel - complementary colors sit opposite each other for maximum contrast, analogous colors sit adjacent for a cohesive feel, and triadic colors form an equilateral triangle for balanced vibrancy.

How to use
  1. 1.

    Pick a base color using the color picker or enter a HEX value

  2. 2.

    Select a harmony type - complementary, analogous, triadic, and more

  3. 3.

    Click the copy icon next to any color value to copy its HEX, RGB, or HSL

Common uses
  • Generating a harmonious color scheme for a new project

  • Finding accent colors that pair well with an existing brand color

  • Exploring color relationships for UI design or illustration

Frequently asked questions
What is a complementary color scheme?

Complementary colors sit opposite each other on the color wheel (e.g., blue and orange). They create strong contrast and are commonly used for call-to-action buttons against a background.


How many colors does each palette contain?

Complementary produces 2 colors, analogous and split-complementary produce 3, triadic produces 3, tetradic produces 4, and monochromatic produces up to 5 shades of the same hue.


Is my data sent to a server?

All palette generation runs locally in your browser. No data is transmitted anywhere.


What is a monochromatic palette?

A monochromatic palette uses a single hue with varying levels of saturation and lightness, creating a cohesive and harmonious look suitable for minimal designs.


Can I copy the generated color values?

Each color row shows copy icon buttons next to its HEX, RGB, and HSL values. Click the relevant icon to copy that format to the clipboard.