HEX, RGB and HSL: One Color, Three Notations
Every color on a web page is stored as amounts of red, green and blue light. HEX, RGB and HSL are just different ways of writing those amounts down. Designers tend to copy HEX codes out of Figma or a screenshot, developers often need rgb() or rgba() for transparency, and HSL is the easiest format to tweak by hand. This converter turns any one of them into all of the others.
It also accepts named CSS colors such as rebeccapurple, short HEX codes such as #fc0, 8-digit HEX with alpha, and modern space-separated syntax like rgb(109 92 231 / 50%). Everything runs in your browser, so nothing you type is sent anywhere.
How HEX to RGB Conversion Works
A six-digit HEX code is three pairs of base-16 digits, one each for red, green and blue. Each pair runs from 00 (0) to FF (255). To convert #6D5CE7 by hand, convert each pair to decimal: 6D = 6 × 16 + 13 = 109, 5C = 92 and E7 = 231. The result is rgb(109, 92, 231). RGB to HEX is the same process in reverse.
When to Use HSL
HSL stands for hue, saturation and lightness. Hue is a position on the color wheel from 0° to 360°, saturation is how vivid the color is, and lightness runs from black (0%) to white (100%). Because those three values match how people think about color, HSL makes it easy to build a palette: keep the hue, then raise or lower lightness for hover states, borders and backgrounds.
Color Format Comparison
| Format | Example | Best for |
|---|---|---|
| HEX | #6D5CE7 | Design tools, CSS, brand guides |
| RGB / RGBA | rgb(109, 92, 231) | CSS with transparency, JavaScript, canvas |
| HSL / HSLA | hsl(247, 74%, 63%) | Building palettes and tints in CSS |
| HSV / HSB | hsv(247, 60%, 91%) | Photoshop and most color pickers |
| CMYK | cmyk(53%, 60%, 0%, 9%) | Print previews (approximate) |
Grabbing Colors From Screenshots
If you need a color from a screenshot, a website or another app, click Pick from screen in Chrome, Edge or Opera and click the pixel you want. The browser's EyeDropper reads the exact on-screen value and drops it into the converter. It pairs well with a screenshot tool: capture the screen, open the image, then sample the brand colors you need.
Checking Contrast for Accessibility
The two labels on the color preview show the WCAG 2 contrast ratio of white and black text on your color. Normal body text needs at least 4.5:1 to pass AA, large text needs 3:1, and 7:1 passes AAA. Use it to decide whether buttons and badges in that color need light or dark text.