Color Converter
Convert between hex, RGB and HSL - free, no signup.
What this tool does
Type a color in any common format - a hex code like #3a7bd5, an rgb() value, or an hsl() value - and see it converted to all three formats simultaneously, with a live color swatch. A native color picker is also available for visually choosing a color instead of typing one.
Converts a color between hex, rgb() and hsl() notation, accepting any of the three as input.
Shows a live swatch so you can see the actual color, not just the codes.
Includes a native color picker as an alternative to typing a value by hand.
Accepts 3-digit hex shorthand (like #fff) as well as full 6-digit hex, expanding it to the equivalent 6-digit value automatically.
Comes with one-click example chips (a hex, an rgb() and an hsl() value) so you can see all three formats convert without typing anything.
How to use it
- Type a color in hex, rgb() or hsl() format, or use the color picker.
- Read off the converted value in the other two formats.
- Copy all three formats at once.
Why use this converter
CSS and design tools use hex, RGB and HSL interchangeably, and converting by hand is tedious. A live swatch confirms you have the right colour.
Why we built it
We built the colour converter to convert between hex, RGB and HSL at once from any one of them. Choose colours with the colour picker, check legibility with the contrast checker and build schemes with the palette generator.
If your task goes further, try the Gradient Generator, the Random Color Generator and the Color Code Extractor.
Who this tool is for
- Web designers and developers
- Digital artists matching colours
- Students of design
When to use it
- Moving colours between design and code.
- Adjusting lightness or saturation in HSL.
- Reading a value from a style guide.
- Checking a hex code.
Why three formats exist for the same color
Each format is convenient for a different situation.
Hex is the most compact and most common in CSS and design tools, but it doesn't separate hue from brightness, making it hard to reason about by eye. RGB maps directly to how displays actually mix red, green and blue light, which is useful when working with code that manipulates individual channels. HSL (hue, saturation, lightness) is the easiest for a human to adjust deliberately - lightening or darkening a color, or picking a related hue, is a simple number change in HSL, where it would require recalculating three separate values in hex or RGB.
Exactly what this tool accepts as valid input
Each format has a specific syntax it recognizes - and a few close variants it doesn't.
| Format | Accepted example | Not accepted |
|---|---|---|
| Hex | #3a7bd5 or #fff (3-digit shorthand expands automatically); the leading # is optional | 1, 2, 4 or 5-digit hex strings |
| RGB | rgb(58, 123, 213) - whole numbers 0-255, comma-separated | Decimal values, or the space-separated rgb(58 123 213) syntax |
| HSL | hsl(213, 63%, 53%) - the % signs on saturation and lightness are required | Saturation or lightness written without a % sign |
Named CSS colors like 'rebeccapurple' or 'tomato' aren't recognized either - the parser looks specifically for a #, or an rgb(/rgba(/hsl(/hsla( prefix, so a plain color name falls through as invalid input rather than being looked up in a name table.
What you give it, and what you get back
| Item | Details |
|---|---|
| Input | A hex, rgb() or hsl() value. |
| Output | All three formats and a swatch. |
| Picker | Pick visually instead of typing. |
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| Transparency is lost | Alpha is ignored. | Add alpha yourself in CSS. |
| Hex not accepted | It is missing digits or has a typo. | Use 3 or 6 hex digits. |
| Colours differ between apps | Colour management varies. | Compare in one app. |
Assumptions and limitations
- This converts standard opaque colors only. An rgba() or hsla() value can be entered, but the alpha (transparency) portion is ignored entirely rather than parsed - only the red/green/blue or hue/saturation/lightness numbers are read, and every output shown is fully opaque.
- Named CSS colors (like 'rebeccapurple') aren't recognised as input - use a hex, rgb() or hsl() value instead.
Frequently asked questions
How do I convert a color online for free?
Type it as hex, rgb() or hsl() and all three formats appear instantly, along with a live swatch.
What's the difference between hex, RGB and HSL?
They're three ways of describing the same color: hex and RGB both encode red/green/blue amounts (just written differently), while HSL describes hue, saturation and lightness separately, which is often more intuitive to adjust by hand.
Can I use a color picker instead of typing a code?
Yes - a native color picker is included as an alternative way to choose a color visually.
Does this support transparency (alpha)?
No. An rgba() or hsla() value can be entered, but only the colour portion is parsed - the alpha number is ignored, not read, and every converted format shown is fully opaque.
Is my data uploaded anywhere?
No. Conversion happens entirely in your browser - nothing is sent to a server.
Can I enter a 3-digit hex code like #fff?
Yes - a 3-digit hex shorthand is automatically expanded to its 6-digit equivalent (so #fff becomes #ffffff) before conversion.
Does this accept the newer space-separated rgb() syntax, like rgb(58 123 213)?
No - only the comma-separated form (rgb(58, 123, 213)) is recognized; the space-separated modern CSS syntax isn't parsed.