Color Converter
Enter a HEX code, pick a colour or drag the RGB sliders, and get HEX, RGB, HSL and HSB at once. Click to copy whichever one your code needs.
RGB Sliders
How to convert a colour between HEX, RGB, HSL and HSB
Set a colour once and copy it in whichever format your code or design tool needs.
- 01
Start from a HEX code, the picker or the sliders
Type a 6-digit code such as #3b82f6, or the 3-digit shorthand #38f, into the HEX box. Or click the swatch to pick visually, or drag the red, green and blue sliders from 0 to 255.
- 02
Read all four formats at once
HEX, RGB, HSL and HSB update together as you change the colour, with a preview swatch so you can see what the code looks like.
- 03
Copy the one you need
Each format has its own copy button and comes out ready to paste into CSS, Figma or code.
Worked example: one blue in four formats
HEX is just RGB written in base 16. In #3B82F6, the pairs 3B, 82 and F6 are 59, 130 and 246 in decimal, so the colour is rgb(59, 130, 246). Each channel runs from 0 to 255, which gives 16,777,216 possible colours.
HSL and HSB describe the same colour by hue, an angle round the colour wheel, plus two percentages. This blue sits at 217°. In HSL it has 91% saturation and 60% lightness: hsl(217, 91%, 60%). In HSB it has 76% saturation and 96% brightness: hsb(217, 76%, 96%). The hue is identical; the other two numbers measure different things, which is why HSL and HSB values for one colour don't match.
HSL or HSB: which one your tool wants
The two models are easy to confuse because both start with hue and saturation. Use the one your software speaks:
| Model | Last value means | 100% on the last value gives | Used by |
|---|---|---|---|
| HSL | Lightness, from black through the colour to white | White, whatever the hue | CSS hsl(), Tailwind, most web code |
| HSB (also called HSV) | Brightness, from black to the full colour | The purest version of the hue | Photoshop, Figma, Sketch, Procreate colour pickers |
In practice: if you're writing CSS, copy HSL. If you're typing values into a design app's colour picker, copy HSB. Pasting an HSB value into CSS as if it were HSL gives a noticeably lighter, washed-out colour.
Where conversions come up
Turning a brand HEX into CSS variables
Copy the HSL version, then make hover and disabled states by changing only the lightness number.
Getting values for canvas or WebGL
WebGL wants channels from 0 to 1. Divide each RGB value by 255: rgb(59, 130, 246) becomes 0.231, 0.510, 0.965.
Matching a colour between Figma and code
Copy HSB from the converter into Figma's picker, and HEX or HSL into your stylesheet, so both show exactly the same colour.
Limits worth knowing
- Only HEX can be typed. RGB is set with the sliders, and HSL and HSB are output only, so convert an HSL value from code by pasting its HEX equivalent or using the sliders.
- HSL and HSB are rounded to whole numbers. Converting hsl(217, 91%, 60%) back to HEX gives #3C83F6, one step off #3B82F6 in each channel, so keep the HEX as your source of truth.
- There's no alpha channel. For transparency, add it yourself: rgba(59, 130, 246, 0.5), or an 8-digit HEX such as #3B82F680.
- Colour names such as "tomato" and newer CSS formats like oklch() aren't supported.