Drag any handle; the others follow the rule. Switch the wheel between the screen's RGB hues, a painter's RYB circle in the style of Itten (approximated on screen) and the perceptual OKLCH wheel, where every color has the same perceived lightness and equal steps around the circle look roughly equally different. Theory: Color harmony →
A color wheel puts every hue in a circle. Colors next to each other look related and calm together. Colors on opposite sides are as different as they get, so they make each other stand out.
Drag any handle on the wheel and the others follow, keeping the same pattern. The slider underneath makes the whole wheel lighter or darker.
RGB is your screen's wheel, built from red, green and blue light. Here the opposite of red is cyan.
RYB is the painter's wheel you may know from school, with red, yellow and blue as the main colors. Here the opposite of red is green. On screen it's an approximation.
OKLCH is arranged by eye: every color on it looks equally light, and equal steps around the circle look equally different. Its colors are softer, but its harmonies are the most balanced.
The rules are a starting point, not a law. A handy recipe: use one color for most of the design, a second for support, and a third only as a small accent, roughly 60, 30 and 10 percent.
As text on your background shows each color as text on your own background, so you can see at a glance which ones are readable. Tints & shades gives lighter and darker versions of your color for hover states, borders and backgrounds.
Click any color in the palette to make it your foreground color; it follows you to the other tools.
The code panel copies the whole palette as CSS variables, SCSS, JSON or a Tailwind config, ready to paste into your project.