White background3.58:1
3.58
contrast ratio on a white background
ElementAAAAASmall textLarge textUI element
Color Wheel
Create perfect palettes with our color wheel. Pick a base color and discover complementary, analogous, triadic and more schemes for any project where color matters.
Color Conversion
View this color's code in ten different formats, ready to copy.
Color Harmonies
Color harmonies are pleasing color schemes created according to their position on a color wheel. Learn more about color harmonies
Analogous
Analogous color schemes use three colors next to each other on the color wheel. They usually match well and create serene, comfortable designs.
Complementary
Complementary color schemes use two opposite colors on the color wheel. They usually create a high-contrast, vibrant look.
Split complementary
Split complementary schemes use a base color plus the two colors adjacent to its complement. You get contrast with less tension than pure complementary pairs.
Triadic
Triadic color schemes use three colors equally spaced around the color wheel. They tend to be vibrant while staying balanced.
Tetradic
Tetradic (rectangular) schemes use four colors arranged into two complementary pairs. They are rich schemes with lots of variation.
Square
Square color schemes are similar to tetradic, but with all four colors spaced evenly around the color wheel.
Color Variations
View this color’s shades, tints, tones, hues and temperatures.
Shades
A shade is created by adding black to a base color, increasing its darkness. Shades appear more dramatic and richer.
Tints
A tint is created by adding white to a base color, increasing its lightness. Tints look pastel and less intense.
Tones
A tone is created by adding gray to a base color, reducing its saturation. Tones look more sophisticated and complex than pure hues.
Hues
A hue is the basic family of a color on the wheel, from red to violet. These hues are neighboring variations of your base color.
Temperatures
Colors are often divided into cool and warm by how we perceive them. Greens and blues feel cool, while reds and yellows feel warm.
Blindness Simulator
See how people with color blindness perceive this color, so your color combinations are accessible to everyone. Learn more about color blindness
Protanopia
79% similar
1.3% of men, 0.02% of women
Deuteranopia
77% similar
1.2% of men, 0.01% of women
Tritanopia
90% similar
0.001% of men, 0.03% of women
Achromatopsia
69% similar
0.003% of the population
Contrast Checker
Check this color's contrast on white and black backgrounds. For more options, use the full contrast checker
Black background5.87:1
5.87
contrast ratio on a black background
ElementAAAAASmall textLarge textUI element
Similar colors
Find CSS named colors that are visually close to this one.
What is the color wheel
The color wheel (or color circle) organizes colors by hue, rotating from 0° to 360°. At a glance, it shows which combinations are harmonious and which create contrast, applying color-theory principles used for centuries in painting, fashion, interiors, branding and any field where color communicates something.
Unlike the color picker, built for when you already have a specific code in mind, or the image color picker, built to extract colors from a photo, the color wheel starts from scratch: you pick a single base color and the tool automatically calculates which other colors work well with it, based on chromatic harmony rules.
How to use the tool
Click anywhere on the wheel or enter a Hex, RGB, HSL or OKLCH code to set your base color. Choose the harmony type you want to generate, explore shade, tint, tone, hue and temperature variations, and check accessibility contrast before exporting your final palette to CSS, Tailwind or Figma.
Harmony types explained
Analogous
Colors next to each other on the wheel. Creates soft, cohesive combinations, ideal for calm, unified projects.
Complementary
Colors opposite each other on the wheel. Creates high contrast and is used to make one element stand out from the rest.
Split complementary
A base color plus the two neighbors of its opposite, delivering contrast with less visual tension than a pure complementary pair.
Triadic
Three equally spaced colors on the wheel, adding balance and energy without losing harmony.
Tetradic
Four colors in two complementary pairs, useful for more complex palettes rich in variety.
Square
Four colors spaced at equal intervals around the wheel. Similar to tetradic, but with more balance among the four hues.
Frequently asked questions
It is a visual tool that organizes colors by hue, helping you identify harmonious or contrasting combinations. It is used in any project where color matters, from a brand palette to an outfit combination.
Complementary colors sit on opposite sides of the color wheel. The tool calculates them automatically when you pick a base color and select “Complementary”.
Analogous colors sit next to each other on the wheel and create soft combinations. Triadic colors are equally spaced, 120 degrees apart, producing more vibrant palettes without losing balance.
The color wheel is for exploring harmonies from a single base color. The color picker is for when you already know the exact code you need and want to convert it between formats.
Yes. You can export your palette in Hex, RGB, HSL, HSV, OKLCH and CMYK, or copy the code directly to use wherever you need it.
Both use four colors in two complementary pairs, but square spaces them at exactly equal intervals around the wheel, while tetradic allows a slightly more asymmetric distribution.