Color Picker & Converter
Pick a color and get it instantly in HEX, RGB, and HSL.
Pick any color and see it converted to HEX, RGB, and HSL simultaneously — or type a value into any one of them to update the others and the swatch.
HEX, RGB and HSL explained
The same blue can be written three ways:
| Format | Example | How it works |
|---|---|---|
| HEX | #2563EB | Red, green and blue as two hex digits each, from 00 to FF |
| RGB | rgb(37, 99, 235) | Red, green and blue from 0 to 255 |
| HSL | hsl(221, 83%, 53%) | Hue (0–360° on the color wheel), saturation and lightness |
HEX is the most common in web design and brand guides. HSL is the easiest to adjust by hand: keep the hue and change the lightness to get lighter and darker shades of the same color.
Ways to use it
- Match a brand color: paste a hex code from a style guide and copy it as RGB or HSL for your CSS.
- Build hover states: lower the HSL lightness by 5–10% for a darker button on hover.
- Translate between apps: design tools, slide software and CSS often expect different formats.
Color and readability
Text needs enough contrast with its background to be readable. The WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Pale gray on white is a common mistake — if text is hard to read in sunlight on a phone, darken it.
To build a full color scheme around one color, try the palette generator; for smooth color blends, use the gradient generator.
Frequently asked questions
What's the difference between RGB and HSL?
RGB describes a color by its red, green, and blue light intensity (0–255 each). HSL describes the same color by hue (position on a color wheel, 0–360°), saturation, and lightness (both 0–100%) — often more intuitive for picking a shade or tint of a color by eye.
Can I type a hex code directly?
Yes — type or paste a 3- or 6-digit hex code (with or without the #) into the HEX field and everything else updates to match.
What is a 3-digit hex code?
A shorthand where each digit is doubled: #F80 is the same as #FF8800. It only works when both digits of each color pair are the same.
How do I get the hex code of a color on my screen?
Click the color swatch and use your browser's eyedropper, if it offers one, to sample any color on the screen. In Chrome and Edge, the color picker includes an eyedropper button.