Color theory explorer
Pick a color and see its harmonies as geometry on the color wheel, with exact RGB, HSL and hex values and a WCAG contrast check.
Result
Complementary — 2 colors: #1a6a89 · #893a1a
The palette
#1a6a89base
197° 68% 32%
#893a1a
17° 68% 32%
Will text read on it? — WCAG contrast
Aa — White text
6.06:1 · AA
Aa — Black text
3.47:1 · AA large
AA needs 4.5:1 for normal text (3:1 for large); AAA needs 7:1. Ratios come from relative luminance — which is not the same as HSL lightness.
How is this calculated?
Using the tool
A complementary pair is a diameter, a triad is an equilateral triangle, a split is the complement's two neighbors — drag on the wheel and watch the shape hold while the palette follows. Every value is computed exactly (no lookup tables): RGB, HSL and hex round-trip, and the contrast panel runs the real WCAG luminance math, so you know if text will read on your color before you ship it.
The theory
The wheel arranges hues by angle, and every classic harmony is a shape drawn on it: complementary colors sit 180° apart (a diameter), a triad at 120° intervals (an equilateral triangle), analogous colors within 30° of each other (neighbors), and a split-complementary takes the complement's two neighbors instead of the complement itself — most of the contrast, much less of the vibration. Because the geometry is fixed, rotating the base hue rotates the whole palette without changing how its colors relate.
The contrast panel answers a different question — not do these colors go together but can you read this. WCAG contrast uses relative luminance: each channel is linearized, then weighted by how bright the eye finds it (green 71.5%, red 21.3%, blue 7.2%). That's why a saturated yellow fails on white while a blue of the same HSL lightness passes — lightness and luminance are different animals, and the ratio is computed from the honest one.