🎨 Color Buddy
Color picking, code conversion, gradients, harmony schemes and contrast checking
Three Notations, One Color — and When Each Wins
- HEX (#3399FF) is the interchange format: design specs, CSS, and every tool since the 90s. Use it whenever you're handing a color to someone else.
- RGBA (rgba(51,153,255,0.5)) adds the alpha channel — the format for overlays, shadows, and any layered translucency. Alpha runs 0 (transparent) to 1 (opaque).
- HSLA (hsla(210,100%,60%,1)) is the one to think in. Hue is the position on the color wheel, saturation the intensity, lightness the tint/shade axis. "Same color, darker" is just a lower L; "more muted" is a lower S. Deriving a full design-system ramp (primary-100 through primary-900) is a lightness sweep in HSL, versus guesswork in HEX.
All three stay in sync here with one-click copy, and the fields accept pasted values in any of the formats for reverse conversion. Modern CSS also offers OKLCH with perceptually uniform lightness — worth knowing about — but HSL remains the everyday workhorse every browser and tool understands.
What the Contrast Ratio Actually Measures
The WCAG contrast ratio isn't a vibe — it's (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. Relative luminance weights the RGB channels by how sensitive human vision is to each (roughly 21% red, 72% green, 7% blue, after gamma linearization) — which is why a "bright" pure blue (#0000FF) is actually quite dark to the eye and passes against white, while a pure green of equal RGB magnitude fails against white badly.
| Level | Normal text | Large text (18pt+ / 14pt bold) |
|---|---|---|
| AA (the practical floor) | ≥ 4.5:1 | ≥ 3:1 |
| AAA (enhanced) | ≥ 7:1 | ≥ 4.5:1 |
The scale runs 1:1 (identical colors) to 21:1 (black on white). The most common real-world failure is fashionable light-gray body text: #999 on white is 2.8:1 — unreadable on a phone in sunlight, and a legal-compliance problem for government and many enterprise sites. Set your text color as the primary and background as the secondary, and the ratio plus AA/AAA verdict update live.
About 8% of men have some form of color-vision deficiency, most commonly red–green. Contrast ratio handles legibility, but never encode critical state in hue alone — pair red/green status with icons or labels.
Using the Harmony Schemes Without a Design Degree
- Complementary (180° apart): maximum tension. Use as dominant-plus-accent — a call-to-action button popping off a brand color — never as a 50/50 split.
- Analogous (adjacent ±30°): effortless harmony for backgrounds and grouped content; add one contrasting accent or the page has no focal point.
- Triadic (120° apart): balanced vibrancy, ideal for categorical data-visualization palettes and playful branding.
Distribute with the 60-30-10 rule — 60% dominant (backgrounds), 30% secondary (cards, navigation), 10% accent (buttons, links, key numbers). When a palette "feels off," the ratios are usually wrong before the hues are: an accent used everywhere stops accenting anything.
Gradient tip: the generated linear-gradient CSS pastes straight into any background property. If a long, subtle gradient shows visible banding, nudge the two endpoints closer in hue or add a faint noise texture — banding comes from too few distinct 8-bit steps between distant colors.
Frequently Asked Questions
How do I make hover/active variants of a brand color?
Copy the HSLA value and drop lightness 8–10% for hover, another step for active, keeping hue and saturation fixed. That's how design systems derive state colors — far more consistent than eyeballing new picks.
Why does dark gray text beat pure black?
Black on white is 21:1 — more contrast than sustained reading needs, and harsh on bright screens. #333 on white is still 12.6:1, comfortably past AAA, with less glare fatigue. Save pure black for headings and small UI accents.
Is anything I do here uploaded?
No — all conversion, harmony, and contrast math runs in your browser. Reset restores the defaults.
Do these rules apply outside the web?
Yes — the color wheel and 60-30-10 are medium-agnostic, and slide decks projected in bright rooms deserve stricter contrast than the web minimums, not looser.