Color Picker & Converter

Pick any color and get its HEX, RGB and HSL codes instantly — plus tints, shades and the complementary color, each copyable with one click.

Live — every format updates as you pick

Tints & Shades (click any to copy its HEX)

Complementary Color

HEX, RGB and HSL Explained

  • HEX — three base-16 pairs: #4F46E5 → R 79, G 70, B 229. The standard for CSS and design handoffs.
  • RGB — the same channels in decimal: rgb(79, 70, 229). Add an alpha channel as rgba() for transparency.
  • HSL — Hue (0–360°), Saturation, Lightness: hsl(244, 75%, 59%). The most intuitive for adjustments: raise L for lighter, rotate H 180° for the complement.

Design Tips

  • Hover states: use a shade ~10% darker than your button color.
  • Subtle backgrounds: use a 90%+ lightness tint of your brand color.
  • CTAs: complementary colors give maximum pop against your primary.
  • Testing QR & print colors? Pair with our QR Code Generator and Image Compressor.

Frequently Asked Questions

How do I convert HEX to RGB?
Each HEX pair is one channel in base 16: #4F46E5 → rgb(79, 70, 229). This tool converts instantly in both directions.
What is HSL and why use it?
HSL describes color by Hue, Saturation and Lightness — far more intuitive for design: raise L to lighten, rotate H 180° for the complement.
What are tints and shades?
Tints mix the color with white (lighter); shades mix with black (darker). The 9-step scale here covers hover states, borders and backgrounds.
What is a complementary color?
The color opposite on the color wheel (hue +180°) — the strongest possible contrast, great for call-to-action buttons.