In web and app design, a color can be written several ways: HEX (#3B82F6), RGB (rgb(59, 130, 246)), or HSL (hsl(217, 91%, 60%)). You often need to switch notations — the mockup hands you a HEX value but your code needs RGB, or you want HSL because it is easier when you only want to nudge the lightness. This tool converts between all three notations in real time and shows the selected color in a large preview area.
The three notations describe the same color in different coordinate systems. HEX and RGB express the intensity of red, green, and blue light on a 0 to 255 scale, so they are essentially identical, while HSL uses hue (0 to 360 degrees), saturation (0 to 100%), and lightness (0 to 100%), which is more intuitive for a human to adjust. For example, when building a button hover color, lowering only the lightness (L) in HSL by a few percent gives you a darker variant of the same hue with ease.
It also helps when you cannot decide whether black or white text reads better on a background: the tool computes the relative luminance of the color and automatically recommends the higher-contrast text color. You can pick a color directly with the color picker, or type numbers to fine-tune it. Every calculation happens instantly in your browser, so no data is ever sent anywhere.
How to Use
- 1
Pick a color
Click the color picker to choose a color, or type a code in #RRGGBB form straight into the HEX field.
- 2
Adjust values
Change the numbers in the RGB or HSL fields and the other notations and the preview update together instantly.
- 3
Check the contrast color
The preview area also shows the recommended text color (black or white) so you can gauge readability.
- 4
Copy the code
Use the copy button under each notation to put the HEX, RGB, or HSL value on your clipboard and paste it right into your code.
When It's Useful
Move a design mockup into code
When a designer gives you a HEX color but your CSS needs rgb() or hsl(), paste it and copy the converted value right away.
Build hover and active variants
View your base button color in HSL, then lower only the lightness (L) to quickly derive pressed and hover states in the same family.
Quickly check text readability
Enter a background color and check the recommended contrast text color (black or white) to gauge on the spot whether the text will be legible.
Unify color notation
When project code mixes HEX and RGB, use it as the conversion reference to consolidate everything into one notation.
Tips
- HSL is great for keeping the hue (H) fixed and changing only the saturation (S) or lightness (L) to create lighter and darker variants in the same family.
- A 3-digit HEX (#abc) is automatically expanded to 6 digits (#aabbcc) and recognized.
- RGB and HEX hold the same information written differently, so they convert losslessly, but HSL rounds decimals, so a round trip can shift values by about 1.
- The recommended contrast color uses a simple luminance threshold, so if you must strictly meet an accessibility standard (such as a WCAG 4.5:1 contrast ratio), run a separate contrast check as well.
- A color chosen with the picker syncs to all three notations instantly, so it is easy to pick by feel and then just grab the code value.
- When organizing design tokens, recording the same color in HEX, RGB, and HSL together can reduce confusion when collaborating.
FAQ
What is HSL?
It is a way of expressing color with Hue, Saturation, and Lightness. Hue runs 0 to 360 degrees and saturation and lightness run 0 to 100%. It is intuitive for humans to adjust, so it is widely used in design work.
Are the converted values accurate?
Conversion uses standard formulas, but HSL can drift by about 1 during rounding. HEX and RGB convert losslessly between each other.
Does it support transparency (alpha)?
The current version converts opaque colors (6-digit HEX). If you need an alpha value, add it directly to the converted RGB or HSL value using rgba()/hsla() notation.
How is the contrast text color decided?
It computes weighted luminance from the background RGB and recommends black when above a threshold and white when below it. This is a simple gauge for readability and differs from the WCAG contrast ratio.
Is the color I enter sent to a server?
No. Every conversion runs only in your browser and no data is ever sent anywhere.
Why do HSL values shift slightly when I change and revert them?
HSL is displayed rounded to integers, so converting to RGB and back to HSL can accumulate rounding error. If you need an exact reference, use the HEX or RGB values.
Are 3-digit and 6-digit HEX the same?
A 3-digit value (#abc) is the same color as the 6-digit value with each digit doubled (#aabbcc). This tool automatically expands 3-digit codes and recognizes them.
Are HEX codes case-sensitive?
No. #FF0000 and #ff0000 are the same color. This tool shows results in uppercase but accepts input in either case.