HexaCalc
All tools
Pick Hex color pickerColor picker from imagePalette from imageCamera color identifierScreen color picker
Create Palette generatorColor wheelComplementary colorsTriadic colorsMonochromatic schemeColor mixerBrownBlueGreenPurplePinkOrangeGrayColor matcherGradient generatorTailwind color generatorShades and tintsRandom color generatorPaint color visualizerWebsite color schemesColor mixing chart
Check Contrast checkerColor blindness simulatorColor blind testTypes of color blindnessHue test
Convert HEX to RGBRGB to HEXRGB to CMYKCMYK to RGBHEX to CMYKHEX to HSLColor converterColor temperatureColor name finder
Personal color Color analysisSkin tone chartSeasonal color quizWinterAutumnSpringLight SpringTrue SpringBright SpringLight SummerTrue SummerSoft SummerSoft AutumnTrue AutumnDeep AutumnDeep WinterTrue WinterBright Winter
Color families Color codesBlueGreenSage greenMauveRedPinkPurplePastelNeutralDarkGoldGrayMint greenLight greenLight purpleLime greenPastel pinkNeonPastel greenPastel yellowPeachCrimsonCool colorsBurnt orangeOrangeGreigeBright colorsSpring colors
Hex math Hex calculatorHex to decimalDecimal to hexHex to binaryBinary to hexHex to textText to hex
More tools Minecraft color codesColor gameResistor color codeImage color changerColor by numberGrayscale image
↑ ↓ to moveEnter to openEsc to close

Color wheel picker

Drag the main handle around the wheel and the harmony markers follow, giving you a matching set of HEX codes. Switch between the RGB wheel used on screens and the RYB wheel taught in art class.

    Open in palette generator

    How to use the color wheel

    • Drag anywhere on the wheel. The large marker is your base color; the smaller ones are its harmony partners and move with it.
    • Distance from the center sets saturation: the rim is fully saturated, the middle is gray.
    • The Lightness slider repaints the whole wheel lighter or darker.
    • Pick a Harmony from the menu: complementary, analogous, triadic, split complementary, tetradic or square.
    • Type a HEX code into Base color to jump straight to it.
    • With the wheel focused, the left and right arrow keys rotate the hue in 5° steps and up and down change saturation.

    So the wheel doubles as a color picker: click any point and the base color's HEX code is ready to copy. Each color in the list has its HEX and HSL values and a copy button. Open in palette generator carries the set over so you can lock, tweak and export it.

    RGB wheel or RYB wheel?

    There are two color wheels in common use, and they disagree about which colors are opposites.

    The RGB wheel is built from the light primaries red, green and blue. It is what your screen uses and what CSS hsl() hues are measured on. Red sits at 0°, green at 120° and blue at 240°. Here the complement of blue #0000FF is yellow #FFFF00.

    The RYB wheel is the painter's wheel taught in art class, with red, yellow and blue as primaries. Yellow takes up far more of the circle, and green is squeezed into the area where cyan sits on the RGB wheel. Here the complement of blue is orange, around #FF9500.

    Neither is wrong. Use RGB when you are designing for screens and want harmonies that match CSS and design-tool hue numbers. Use RYB when you are mixing paint, planning a garden or an outfit, or following traditional color theory, because its complementary pairs are the ones artists expect (red and green, blue and orange, yellow and violet).

    HexaCalc maps between the two wheels with a piecewise-linear table through the classic anchor hues: RYB orange sits at RGB 35°, RYB yellow at RGB 60° and RYB green at RGB 120°. Different sites use slightly different tables, so expect small differences from other RYB tools.

    The six harmonies, in degrees

    HarmonyAngles from the baseCharacter
    Complementary0°, 180°Maximum hue contrast
    Analogous−30°, 0°, +30°Gentle and cohesive
    Triadic0°, 120°, 240°Balanced but lively
    Split complementary0°, 150°, 210°Contrast with less clash
    Tetradic (rectangle)0°, 60°, 180°, 240°Two complementary pairs
    Square0°, 90°, 180°, 270°Four evenly spaced hues

    Worked example

    Start with vermilion #D9481C, the HexaCalc brand orange, at hue 14°.

    • On the RGB wheel its complement is #1CADD9, a sky blue at 194°. On the RYB wheel it is #1CD9B3, closer to turquoise.
    • The RGB triad adds #1CD948 (green) and #481CD9 (violet). The RYB triad adds a lime #8ED91C and a violet #551CD9.

    All of these keep the base color's HSL saturation and lightness, which is why they look equally loud. In a real design you would usually let one color dominate and knock the others down in saturation or push them lighter. The triadic scheme generator has controls for exactly that.

    Using harmonies without making a clown suit

    Color harmonies tell you which hues relate, not how much of each to use. A few habits help:

    1. Pick a dominant color. The classic 60-30-10 split (60% main, 30% secondary, 10% accent) works for rooms, slides and websites alike.
    2. Vary lightness, not just hue. A dark navy and a pale peach are a complementary pair that feels calm, while full-strength blue and orange shout.
    3. Add neutrals. Most real palettes are 70% off-whites, grays or near-blacks. Browse neutral colors for undertones that suit your hues.
    4. Check legibility. Hue contrast is not the same as lightness contrast. Red text on a green background can have a contrast ratio near 1:1. Test pairs in the contrast checker.

    Printing the wheel

    Download wheel PNG saves the wheel as you see it, with the current lightness and harmony markers, at 400 × 400 pixels. For a classroom handout, set the harmony to Complementary and the wheel to RYB before downloading.

    FAQ

    What is the best color wheel for beginners?

    For painting and crafts, the RYB wheel, because it predicts what happens when you mix pigments. For anything on a screen, the RGB wheel.

    Why does the wheel look duller at high and low lightness?

    Because the wheel keeps HSL lightness fixed. At 85% lightness every color is a pastel and at 15% every color is close to black, so saturation has less room to show.

    How do I find colors that go with one specific color?

    Type it into Base color and try each harmony. For suggestions that also include neutrals and text colors, use the color matcher.

    What are warm and cool colors on the wheel?

    Roughly, reds, oranges and yellows (hues 0° to 70° on the RGB wheel) read as warm, and greens, blues and violets as cool. Temperature is relative, though: a purple can look warm next to blue.