Complementary
CSS Variables
Pick a base color and generate complementary, analogous, triadic, and other harmonies
Color theory originated with painters in the 17th and 18th centuries, but the underlying principles apply directly to UI design. Complementary colors (opposite on the wheel) create maximum contrast and vibration — useful for call-to-action buttons against a brand color. Analogous colors (adjacent on the wheel) feel harmonious and low-tension — ideal for backgrounds and content areas in the same section. Triadic schemes use three colors equally spaced at 120° — they feel balanced yet colorful, popular in illustration and playful UI.
This tool is particularly useful in the early design phase when you are choosing a primary brand color and need to know what accent and neutral colors will work alongside it without clashing. It outputs hex codes for each color in the selected scheme so you can paste them directly into your CSS variables or design tokens.
All rendering uses HTML Canvas and runs entirely in your browser — no images are downloaded and the tool works offline.
Base: #3b82f6 (blue), Harmony: Complementary
→ Complement: #f6993b (orange) — classic blue/orange contrast used in many sports brands and tech UIs
Base: #10b981 (emerald), Harmony: Triadic
→ Triad: #10b981, #b91068, #b97010 — a balanced, vibrant three-color palette for playful dashboards
Base: #8b5cf6 (violet), Harmony: Analogous
→ Analogous: #5c6bf6, #8b5cf6, #c45cf6 — smooth purple gradient range for backgrounds and hover states
What is the difference between RYB and RGB color wheels?
The traditional artist's RYB (red-yellow-blue) wheel places yellow opposite purple. The digital RGB wheel (used here) places cyan opposite red. For screen design and CSS, the RGB/HSL wheel is the correct reference because monitors mix light, not pigment.
Why does the complementary color look jarring when placed side by side?
That vibration is called simultaneous contrast — it's a perceptual effect, not a mistake. In UI design, reduce it by using one color as a dominant and the other as a small accent, or by desaturating one of them.
How do I use the hex values in Tailwind CSS?
Add them to your tailwind.config.js under theme.extend.colors. For example: accent: '#f6993b'. Then use bg-accent, text-accent, etc.
Can I input a hex code directly instead of clicking the wheel?
Yes. Click the hex input field below the wheel, type or paste your hex code, and the wheel handle jumps to that hue automatically.
What is a tetradic color scheme?
Tetradic (or double-complementary) uses four colors forming two complementary pairs at 90° apart on the wheel. It offers the most variety but is hardest to balance — typically you use one color as dominant and the others as accents sparingly.