Pick a color and instantly convert between HEX, RGB, and HSL — with shades and tints included.
Pick a color visually, or type a value directly into any of the HEX, RGB, or HSL fields — the other two update instantly to match. Click the swatch to open your browser's native color picker, or click any shade below the main fields to load that variation.
HEX and RGB describe a color by its red, green, and blue light levels. HSL describes the same color using Hue, Saturation, and Lightness — often more intuitive when you want to create a lighter or darker version of a color without changing its underlying hue.
HEX and RGB both describe a color by its red, green, and blue light levels — HEX in base-16 (#RRGGBB), RGB in base-10 (0-255 each). HSL describes the same color differently, using Hue, Saturation, and Lightness, which many designers find more intuitive for creating lighter or darker variations of a color.
A standard 6-digit HEX code can represent 256 × 256 × 256 = 16,777,216 distinct colors, since each of the three channels (red, green, blue) has 256 possible values (00 to FF).
Because HSL separates the color itself (hue) from how vivid it is (saturation) and how light or dark it is (lightness), you can create a lighter or darker version of a color by adjusting just the lightness value, without needing to recalculate red, green, and blue proportions.
A 3-character HEX code is shorthand where each character is doubled — #FFF expands to #FFFFFF, and #1A2 expands to #11AA22. It only works when each of the three channel values is a repeated digit.
No. All color conversions happen directly in your browser using JavaScript — nothing is sent to a server.