Color Wheel
Pick colors from the wheel, explore complementary, triadic, tetradic, analogous, and monochromatic harmonies. Check contrast ratios against white and black in real time.
#3CA7DD
RGB(60, 167, 221) · HSL(200°, 70%, 55%)
On White
2.7:1
On Black
7.8:1
Color Harmonies
Frequently Asked Questions
What is a color wheel?▼
A color wheel is a circular representation of hues arranged by their chromatic relationship. It shows primary colors (red, blue, yellow), secondary colors (green, orange, purple), and tertiary colors. Designers use color wheels to find harmonious color combinations for palettes, UIs, and branding.
What are color harmonies?▼
Color harmonies are combinations of colors that are visually pleasing when used together. The five classic harmonies are: complementary (opposite hues — high contrast), triadic (three evenly spaced hues — vibrant balance), tetradic/split-complementary (four hues — rich and complex), analogous (adjacent hues — smooth and natural), and monochromatic (same hue, varied lightness — clean and cohesive).
How do I use the sliders?▼
Click anywhere on the color wheel ring to pick a hue. Then adjust Saturation (color intensity — 0% is gray, 100% is vivid) and Lightness (brightness — low is dark, high is pastel). The current color and its contrast against white and black update in real time.
Does this tool check contrast accessibility?▼
Yes. Below the sliders, you'll see the contrast ratio of your selected color against white (#FFFFFF) and black (#000000), with WCAG AA pass/fail indicators. For full WCAG compliance testing of any two colors, use our Contrast Checker.