Free Color Picker & HEX/RGB/HSL Converter
Designers think in HEX, developers compute in RGB, and CSS authors adjust in HSL — one color, three languages. This free tool keeps them in sync: pick visually or type any format, and every representation updates live, alongside a ready-to-paste CSS snippet, a nine-step tint/shade palette, and WCAG contrast ratios against white and black.
How to Convert Colors
- Start anywhere — drag the visual picker, paste a HEX code (3 or 6 digits), or type RGB/HSL numbers.
- Copy the CSS line — all three formats rendered in one snippet for stylesheets.
- Build palettes — click any tint or shade to promote it to the base color and convert from there.
- Check contrast — AA (4.5:1) is the legal minimum for body text in most accessibility standards; AAA (7:1) is the gold target.
HEX vs RGB vs HSL: When Each Wins
HEX is compact and universal in design handoff. RGB maps directly to screens and canvas APIs (every getImageData pixel arrives as RGB). HSL matches human intuition — to darken a brand color, lower L; to mute it for backgrounds, lower S — making it the format for programmatic theming and dark-mode generation. Conversions here use exact math (not lookup tables), so round-trips are lossless within integer rounding.
Why do my brand colors fail contrast checks?
Vibrant brand hues (oranges, light blues, yellows) rarely hit 4.5:1 on white. Fix it by darkening for text while keeping the vivid version for large graphics and accents — contrast rules apply to text, not decoration.
What is the difference between tints, tones, and shades?
Tints mix toward white, shades toward black; tones (not shown) mix toward gray. The nine-step strip here gives four tints, the base, and four shades — enough for hover states, borders, and backgrounds.
Is anything uploaded?
No — conversion math runs locally; your palette exploration stays private.
Related Tools
Extract palettes from photos with the Color Palette Generator, preview filtered imagery with Photo Filters, and generate share tags with the Meta Tag Generator.