RGB Color Wheel Picker

The additive Red-Green-Blue wheel used by every screen — pick a hue, find its complement and copy the HEX code.


100%
100%
HEX
RGB

Mix the RGB channels
255
0
0

Color Harmonies

Click a swatch to select it, or tap a code to copy it
The color model screens actually use Red-Cyan, Green-Magenta, Blue-Yellow complements Runs entirely in your browser


What Is the RGB Color Wheel?

The RGB color wheel is built on the Red-Green-Blue additive color model – the system behind every screen, monitor and browser. Each pixel emits red, green and blue light at different intensities, and because the model is additive, all three at full strength produce white rather than the dark tone you would get from mixing paint.

Click or drag on the wheel to choose a hue, adjust saturation and brightness, or set exact channel values with the R-G-B sliders – the same 0–255 numbers used in CSS. The HEX and RGB readouts update instantly, ready to paste into a stylesheet or a design tool.


RGB Complementary Colors


On the RGB wheel, complementary colors are the two hues exactly 180° apart. In additive color a complementary pair adds up to white light, which is why placing them side by side makes each one look more vivid. The three classic pairs are:

  • Red & Cyan – the cornerstone digital pair, used in 3D anaglyph imagery and warm/cool interface contrast.
  • Green & Magenta – the most vivid contrast in RGB, used in chroma keying and high energy digital design.
  • Blue & Yellow – a high visibility pair found in signage, sports branding and warning states.

Pick any color on the wheel and the Complementary swatch always shows the hue directly opposite it. You can also check a pair for contrast with the opposite color finder.


How to use the RGB color wheel


  1. Pick a hue. Click or drag on the wheel. Distance from the center sets saturation – the center is white, the rim is fully saturated.
  2. Tune it. Use the saturation and brightness sliders, or type-level precision with the individual Red, Green and Blue channel sliders.
  3. Choose a harmony. Switch between complementary, triadic, analogous, split-complementary and tetradic for a ready made scheme.
  4. Use the colors. Click a swatch to make it the base color, or tap a HEX or RGB code to copy it. Look a color up by name in the color name index.

Color inspiration, in your inbox

New palettes, color guides and tools from Colorxs.

No spam. Unsubscribe anytime.


Frequently asked questions


How is RGB different from RYB?

RGB is additive and light based, so mixing all the primaries gives white. RYB is subtractive and pigment based, so mixing all the primaries darkens the result. Use RGB for anything on a screen and the RYB color wheel for paint and traditional color theory.

Why is red's complement cyan and not green?

Because on the additive wheel cyan sits at 180°, opposite red at 0°. Green is 120° away, which makes it part of the triadic scheme instead. Green only becomes red's complement on the pigment based RYB wheel.

Can I use these values in CSS?

Yes. The HEX code and the RGB triplet are exactly what CSS, HTML, Figma and Photoshop expect. Click either readout to copy it.

Does it work on a phone?

Yes. Tap and drag on the wheel behaves like a mouse, and the sliders and swatches are sized for touch.


More color tools



Copied to clipboard