My Tool Studio
Color

Color Wheel

This color wheel is an interactive wheel you can click or drag to choose a hue, then see eight color harmonies with hex codes: complementary, analogous, triadic, split complementary, tetradic, square, monochromatic and shades. Switch between the RGB wheel used for screens and the RYB painter's wheel taught in art class. Start from your own color by typing a hex, rgb() or hsl() value or picking from your screen, and adjust hue, saturation and lightness with sliders. Markers on the ring show the chosen harmony, and a View as option shows it the way people with color blindness see it. The contrast between the chosen colors is listed, and you can export the palette or share a link.

Always freeNo sign upRuns in your browser
Wheel:
Hue 220°
Saturation70%
Lightness55%
View as:
Complementary
Base plus the hue opposite it (180°).
#3C71DD
#DDA83C
Analogous
Neighbors 30° either side of the base.
#3CC2DD
#3C71DD
#573CDD
Triadic
Three hues 120° apart.
#3C71DD
#DD3C71
#71DD3C
Split complementary
Base plus the two hues beside its opposite (150° and 210°).
#3C71DD
#DD583C
#C1DD3C
Tetradic (rectangle)
Two complementary pairs: 0°, 60°, 180°, 240°.
#3C71DD
#A83CDD
#DDA83C
#71DD3C
Square
Four hues 90° apart.
#3C71DD
#DD3CC2
#DDA83C
#3CDD58
Monochromatic
One hue, lighter and darker versions.
#B0D0FF
#799FFF
#3C71DD
#0047AA
#00217A
Shades
One hue and saturation, five brightness levels.
#4582FF
#3768CC
#2A4E99
#1C3466
#112140

Complementary palette

#3C71DD
#DDA83C

Contrast between these colors

2.1:1 Fail

Export

#3C71DD, #DDA83C

How to use

01

Set the starting color

Click or drag on the wheel, use the arrow keys, or type your own hex, rgb() or hsl() value. Choose the RGB or RYB wheel at the top.

02

Adjust and choose a harmony

Move Saturation and Lightness, then choose which harmony the markers show. The View as buttons simulate color blindness on the wheel and the swatches.

03

Copy or export a combination

Press Copy all on any harmony card, or use the export panel for the shown harmony. Copy share link keeps the color, rule and wheel type.

Why Color Wheel

Color wheel basics: primaries, warm and cool, and harmonies

On an RGB wheel the primaries are red at 0°, green at 120° and blue at 240°. The secondaries sit halfway between: yellow at 60°, cyan at 180° and magenta at 300°. Tertiary colors fill the gaps, such as orange at 30° and violet at around 270°. On the RYB painter's wheel the primaries are red, yellow and blue, so the angles between colors change: blue sits opposite orange, and red opposite green.

Warm colors run from red through orange to yellow, roughly 0° to 60° on the RGB wheel, and tend to feel energetic and closer to the viewer. Cool colors run from green through blue to violet, roughly 120° to 270°, and tend to feel calm and further away. Mixing one warm and one cool color is a simple way to add contrast.

HarmonyHow it is builtWhen to use it
ComplementaryBase plus the hue opposite (180°)Call to action buttons and highlights
AnalogousBase plus neighbors 30° either sideCalm backgrounds, illustrations
TriadicThree hues 120° apartPlayful brands, children's content
Split complementaryBase plus hues at 150° and 210°Contrast with less clash than complementary
Tetradic (rectangle)Two complementary pairs at 0°, 60°, 180° and 240°Rich palettes with one dominant color
SquareFour hues 90° apartBold, balanced sets such as category colors
MonochromaticOne hue, lighter and darkerQuiet interfaces and text hierarchies
ShadesOne hue and saturation, five brightness levelsButton states and layered surfaces

Common questions

What are complementary colors on a color wheel?
They sit directly opposite each other, 180 degrees apart. On this RGB-based wheel, blue's complement is yellow and red's is cyan. Complementary pairs give the strongest hue contrast, so they work well for accents.
What is the difference between the RYB and RGB color wheel?
RYB is the traditional painter's wheel with red, yellow and blue as primaries, used for mixing paint. RGB is based on light, with red, green and blue as primaries, and matches how screens show color. On the RGB wheel red's complement is cyan; switch this tool to RYB and it becomes green, as on the painter's wheel. The RYB view maps hues onto screen colors with an approximation.
What are the primary colors on a color wheel?
It depends on the model. On screens, the additive primaries are red, green and blue. In printing, the subtractive primaries are cyan, magenta and yellow. Art classes usually teach red, yellow and blue as the painter's primaries.
How do I use a color wheel to find colors that go together?
Pick one color you like, then apply a harmony rule: take its opposite for contrast, its neighbors for calm, or three evenly spaced hues for balance. This wheel shows four of these rules at once. Keep one color dominant and use the others in smaller amounts.
What are triadic colors?
Three hues spaced 120 degrees apart, such as red, green and blue on an RGB wheel. Triadic schemes feel bright and balanced. They work well when one color leads and the other two are used as accents.
How many colors are on a color wheel?
A traditional wheel has 12: three primary, three secondary and six tertiary colors. This digital wheel draws 36 segments, one every 10 degrees, but you can select any of the 360 hues by clicking or with the Hue slider.
Why does the whole color wheel change when I move the lightness slider?
The ring is drawn at your current saturation and lightness, so it previews every hue at that setting. Lower lightness darkens the whole ring and higher lightness washes it out. The harmonies use the same values.
Can I start the color wheel from my brand hex code?
Yes. Type or paste it into Start from your own color. The wheel reads its hue, saturation and lightness, moves the marker to that hue and recalculates every harmony. Gray colors keep the current hue because they have none.

More Color tools

View all

Color Picker

Pick colors and copy HEX, RGB, HSL, CMYK, OKLCH

Color

Color Palette Generator

Generate palettes with lock, harmonies and export

Color

HEX to RGB Converter

Convert HEX color codes to RGB and RGBA

Color

RGB to HEX Converter

Convert RGB and RGBA values to HEX

Color