← → hue · ↑ ↓ saturation · [ ] lightness · hold shift for larger steps
1. Pick a color
2. Choose palette type
Your palette
Saved palettes
Color theory is the set of guidelines designers use to combine colors in ways that actually work. At the center of it is the color wheel — a circular map of the visible spectrum, sketched out by Isaac Newton in 1666 after he bent white light through a prism and connected the ends of the resulting spectrum into a circle.
Colors that sit in specific geometric relationships on the wheel tend to look good together. These combinations are called color harmonies. There are two main color wheel models: the traditional RYB (red, yellow, blue) wheel used by painters, and the RGB (red, green, blue) wheel used in digital design. This tool uses RGB, because screens mix light — not paint.
The colors that look good together are called a color harmony. You find them by looking at where colors sit relative to each other on the wheel — opposite, adjacent, or evenly spaced. Each pattern produces a different mood.
Where colors land on the wheel relative to each other determines how a palette feels. Some combinations are calm, some are bold, some are complex. Here's what each one actually does.
Two colors sitting directly opposite each other on the wheel. The contrast is stark — these colors push against each other and demand attention. That makes them great for call-to-action buttons, logos, and anything that needs to jump out. The trick is not using them in equal amounts, or it becomes overwhelming.
All shades, tints and tones of a single hue. It's the safest palette there is — everything coheres because it all comes from the same base. The result is calm and unified. If you're stuck, start here. The variation in lightness gives you enough contrast to keep things interesting without any risk of a clash.
Three or four colors sitting side by side on the wheel. It reads naturally — sunsets, forests, and ocean gradients are all analogous. It's warm and easy on the eye, which makes it good for backgrounds and long-form content. Pick one color to lead and let the others support it; otherwise everything blends into one.
Three colors evenly spaced 120° apart on the wheel. Still high contrast, but more balanced than complementary — the tension is spread across three directions instead of two. Good for brands that need to feel energetic but not aggressive. Let one color dominate and use the other two sparingly.
Four colors forming a rectangle on the wheel — two complementary pairs. It's the most complex and the most difficult to balance. The more colors you have, the more room for things to look busy. It works well when you give one color the lead role and treat the others as accents. Best suited to layouts with room to breathe.
The RGB color wheel has 12 key positions. Primary colors — red, green and blue — are the source. Combine them and you get the secondary colors: cyan, magenta and yellow. The six tertiary colors (orange, chartreuse, spring green, azure, violet, rose) fill in the gaps between primaries and secondaries.
The wheel splits roughly in half into warm and cool colors. Warm colors — reds, oranges, yellows — evoke energy, heat and closeness. Cool colors — blues, greens, purples — feel calm, distant and serene. Most palettes benefit from having at least a touch of both, even if one temperature dominates. A fully warm or fully cool palette can start to feel flat.
You can modify any color by adding black, white or grey. A shade is made by adding black — darker, richer, more dramatic. A tint is made by adding white — softer, lighter, more airy. A tone is made by adding grey — subtler versions of the color that look more sophisticated than pure tints or shades.
Every color has three components. Hue is the base color itself — red, blue, green, and everything in between. Saturation controls how intense or pure the color is: fully saturated is vivid, zero saturation is grey. Lightness is how much white or black is mixed in — low lightness is nearly black, high lightness is nearly white. The outer ring on this color wheel controls lightness. The inner circle controls hue and saturation together.
A complementary color sits 180 degrees across the color wheel. Pick a color or type its hex code, choose Complementary, and the wheel shows the pair. On this wheel the complement of pure red, #FF0000, is cyan, #00FFFF.
It is the RGB hue wheel that screens use. Painters use the RYB wheel, where green sits opposite red. Use this wheel for anything that will be seen on a screen.
Complementary pairs colors 180 degrees apart. Analogous takes four neighbors 30 degrees apart. Triadic spaces three colors 120 degrees apart, and tetradic spaces four 90 degrees apart. Monochromatic keeps one hue at five lightness levels, from 20% to 80%.
Click any swatch under the wheel to copy its hex code. To turn the harmony into a full palette, paste the codes into the color palette generator and lock them.