Complementary Color Calculator
Pick a base hex color and get its complementary color, the two triadic colors and the two analogous colors. These are computed by rotating the hue on the color wheel, so the result is a balanced palette. Everything runs in your browser.
How to find a complementary color
- Pick a base color with the swatch or type a hex code.
- Read the complementary, triadic and analogous colors below.
- Copy any color hex into your CSS or design tool.
Examples
Complement of red
#ff0000
#00ffff (cyan)
Triadic of red
#ff0000
#00ff00 and #0000ff
Frequently asked questions
What is a complementary color?
A complementary color sits directly opposite a color on the wheel, 180 degrees away. Paired together the two colors create strong contrast, which is why the complement of red is cyan.
What are triadic colors?
Triadic colors are three hues spaced evenly around the wheel, 120 degrees apart. Starting from your base color the tool returns the other two, which together make a vivid, balanced trio.
What are analogous colors?
Analogous colors are the immediate neighbours of your color on the wheel, here 30 degrees to each side. They sit well together and are useful for harmonious, low-contrast palettes.
How are the colors calculated?
The base color is converted to HSL, the hue is rotated by the right number of degrees, and the result is converted back to hex. Saturation and lightness stay the same.
Is my color sent to a server?
No. The palette is calculated in your browser, so your color values never leave your device.
Related tools
Color Shades Generator
Generate tints and shades from one hex color online. Pick a base color and get lighter and darker steps toward white and black, ready to copy.
Color Mixer
Mix two hex colors online and get the blend. Set the mix ratio with a slider to find the perfect in-between color, then copy the hex result.
Binary to Decimal
Convert binary to decimal online. Paste any binary number, with or without spaces, and get the exact base-10 value instantly. Runs in your browser.
Binary to Hex
Convert binary to hexadecimal online. Paste a binary number and get exact hex, with optional uppercase. Handles huge values. Runs in your browser.
Binary Translator
Translate text to binary and binary back to text online. UTF-8 accurate, handles emoji and accents, with a copy button. Runs in your browser, nothing uploaded.
Celsius to Fahrenheit
Convert Celsius to Fahrenheit instantly. Type a temperature in C and get F, with the formula and a quick reference table. Runs in your browser.