Every color on the web has a code — and designers, developers, and creators constantly translate between them. This free color picker gives you all three standard formats at once: HEX (#1D4ED8), RGB (rgb(29, 78, 216)), and HSL (hsl(221, 79%, 48%)), with one-click copying and a live preview.
Pick visually with the native color swatch, or paste any HEX code to convert it the other way. Below the codes you will find an automatic shade & tint ramp — darker and lighter variants of your color, perfect for building button hover states, gradients, and accessible text/background pairs.
HEX is the everyday web format; RGB maps directly to screen pixels; HSL (hue, saturation, lightness) is the most intuitive for humans — nudge the lightness to make tints and shades without shifting the hue.
How to use the Color Picker & HEX Converter
- Pick a color with the color swatch, or paste a HEX code into the text field.
- Read the codes: HEX, RGB, and HSL appear instantly with a live preview.
- Copy any code with the copy buttons for use in CSS or design tools.
- Click a shade or tint to load that variant and get its codes.
Tips for accurate results
- For text on colored backgrounds, aim for a contrast ratio of 4.5:1 (WCAG AA).
- HSL makes palettes easy: keep hue fixed, vary lightness for tints and shades.
- Brand colors: pick one primary, one accent, one neutral — restraint looks premium.
- Test colors on real devices; phone screens shift hues versus desktop monitors.
HEX vs. RGB vs. HSL
HEX (#RRGGBB) is compact and universal in CSS. RGB states the red/green/blue channels (0–255) screens actually use. HSL describes hue (0–360°), saturation, and lightness — the format designers think in. All three describe the exact same color; use whichever fits your workflow.
Frequently asked questions
What is a HEX color code?
A six-digit hexadecimal representation of red, green, and blue values, e.g. #1D4ED8. The three-digit shorthand (#FFF) expands by doubling each digit.
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from base-16 to decimal: #1D4ED8 → R=0x1D=29, G=0x4E=78, B=0xD8=216.
What is HSL?
Hue (color angle 0–360°), Saturation (0–100%), Lightness (0–100%). It is the most intuitive model for adjusting colors by hand.
Which format should I use in CSS?
All three work in modern CSS. HEX is shortest for flat colors; use rgb()/hsl() with alpha (e.g. rgb(29 78 216 / 0.5)) for transparency.