Color Tools
Pick a color and get every code a designer asks for: HEX, RGB, HSL, plus a nine-step shade & tint ramp and a ready-made palette. Click any swatch to copy it.
Shades & tints
Palette (color harmonies)
HEX vs RGB vs HSL — when to use which
HEX (#3DDC97) is the web's default: compact and universally accepted in CSS and design tools. RGB is the same information un-packed, handy when you need alpha transparency (rgba(61,220,151,.5)). HSL is the one humans think in: hue (where on the color wheel), saturation (how vivid), lightness. Need a darker hover state? Drop the L in HSL — no mental math in RGB required.
The ramp below mixes your color with black (shades) and white (tints) at even steps — the classic way to build a consistent UI palette with one hue. The palette row shows complementary and triadic harmonies for accent colors that always "match," because they're derived mathematically from the same wheel position.