Color wheel online

Pick a base color and the color wheel builds analogous, complementary, triadic and other palettes. Copy the HEX, RGB, HSL or OKLCH codes or export them to CSS, Tailwind and Figma.

Harmonies

Harmonies: Analogous

Color Conversion

View this color's code in ten different formats, ready to copy.

What is the color wheel

The color wheel (or color circle) organizes colors by hue, rotating from 0° to 360°. At a glance, it shows which combinations are harmonious and which create contrast, applying color-theory principles used for centuries in painting, fashion, interiors, branding and any field where color communicates something.

Unlike the color picker, built for when you already have a specific code in mind, or the image color picker, built to extract colors from a photo, the color wheel starts from scratch: you pick a single base color and the tool automatically calculates which other colors work well with it, based on chromatic harmony rules.

Primary, secondary and tertiary colors

The traditional color wheel, the one used in painting and at school, has twelve colors built in three levels.

Primary

Red, yellow and blue. They cannot be made by mixing other colors, and every other color comes from them.

Yellow
Red
Blue

Secondary

Orange, green and violet. Each one is an even mix of two primaries: red and yellow make orange, yellow and blue make green, and blue and red make violet.

Orange
Violet
Green

Tertiary

A primary mixed with the secondary next to it: yellow-orange, red-orange, red-violet, blue-violet, blue-green and yellow-green.

Yellow-orange
Red-orange
Red-violet
Blue-violet
Blue-green
Yellow-green

Warm and cool colors

Split the wheel in half and you get two families. Warm colors (yellows, oranges and reds) recall the sun and fire: they feel energetic and close, and seem to move toward the viewer.

Cool colors (greens, blues and violets) recall water and the sky: they feel calm and distant, and seem to recede. In design, a warm color is often kept for what must stand out, with cool colors for backgrounds and quiet areas.

Warm
Cool

RYB, RGB and CMY: three color wheels

There is no single color wheel: it changes depending on whether you mix pigment, light or ink.

RYB, for painting

Red, yellow and blue as primaries. The traditional wheel taught at school and in fine arts, useful for mixing paint.

RGB, for screens

Red, green and blue light: added together they make white. Used by monitors, phones and web design, and the one shown by the Matizly wheel.

CMY, for print

Cyan, magenta and yellow ink, plus black (CMYK). Layered together they subtract light. The system used in printing.

How to use the tool

Click anywhere on the wheel or enter a Hex, RGB, HSL or OKLCH code to set your base color. Choose the harmony type you want to generate, explore shade, tint, tone, hue and temperature variations, and check accessibility contrast before exporting your final palette to CSS, Tailwind or Figma.

Harmony types explained

Analogous

Colors next to each other on the wheel. Creates soft, cohesive combinations, ideal for calm, unified projects.

Complementary

Colors opposite each other on the wheel. Creates high contrast and is used to make one element stand out from the rest.

Split complementary

A base color plus the two neighbors of its opposite, delivering contrast with less visual tension than a pure complementary pair.

Triadic

Three equally spaced colors on the wheel, adding balance and energy without losing harmony.

Tetradic

Four colors in two complementary pairs, useful for more complex palettes rich in variety.

Square

Four colors spaced at equal intervals around the wheel. Similar to tetradic, but with more balance among the four hues.

Frequently asked questions

On the traditional wheel (RYB) they are red, yellow and blue. On screens (RGB) the primaries are red, green and blue, and in print (CMY) cyan, magenta and yellow.

Warm colors are yellows, oranges and reds; cool colors are greens, blues and violets. Warm colors draw attention and cool colors feel calm.

It is a visual tool that organizes colors by hue, helping you identify harmonious or contrasting combinations. It is used in any project where color matters, from a brand palette to an outfit combination.

Complementary colors sit on opposite sides of the color wheel. The tool calculates them automatically when you pick a base color and select “Complementary”.

Analogous colors sit next to each other on the wheel and create soft combinations. Triadic colors are equally spaced, 120 degrees apart, producing more vibrant palettes without losing balance.

The color wheel is for exploring harmonies from a single base color. The color picker is for when you already know the exact code you need and want to convert it between formats.

Yes. You can export your palette in Hex, RGB, HSL, HSV, OKLCH and CMYK, or copy the code directly to use wherever you need it.

Both use four colors in two complementary pairs, but square spaces them at exactly equal intervals around the wheel, while tetradic allows a slightly more asymmetric distribution.