HEX, RGB and HSL Color Converter
Convert a colour between HEX, RGB and HSL, with or without transparency. Type in any format and the others update, with a live preview and copy buttons.
Runs in your browser. Your data is not uploaded.How our tools work
Type in any field and the others update. HEX takes 3, 4, 6 or 8 digits; the 4- and 8-digit forms and rgba() or hsla() include transparency (alpha). HSL is rounded to whole numbers, so converting back can differ by one step.
How do I convert HEX to RGB or HSL?
Type a colour in HEX, RGB or HSL, and the other two formats update as you type: #FF0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%). Short HEX such as #F00 works, and transparency is supported with 4 or 8 HEX digits, rgba() and hsla(). A live swatch shows the colour, and each value can be copied.
Formulas & Methods
HEX to RGB
Example: #1A73E8: 1A = 26, 73 = 115, E8 = 232, so rgb(26, 115, 232)
RGB to HSL
Example: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Key features
HEX, RGB and HSL
Convert in any direction; every field stays in sync.
Transparency
Alpha works in #RGBA, #RRGGBBAA, rgba() and hsla(), with a checkerboard behind the preview.
Flexible input
Short and long HEX, with or without #, and rgb() or hsl() in comma or space syntax.
Common uses
- Turn a HEX code from a brand guide into RGB for software
- Adjust a colour’s lightness in HSL, then copy it as HEX
- Convert a colour picked from an image for CSS
HEX, RGB or HSL in CSS?
All three give exactly the same colour in a browser, so choose by who will read and edit the code. HEX is the shortest and is what brand guides and design tools usually hand over. rgb() is easier to read channel by channel and to fill in from a script or spreadsheet. hsl() is the easiest to edit by hand: keep the hue and saturation and change only the lightness, and hsl(214, 82%, 51%) becomes a pale background at hsl(214, 82%, 95%) or a darker hover shade at hsl(214, 82%, 41%).
In #RRGGBBAA, the last two digits are the opacity on the same 00–FF scale as the colour channels. 80 is 128 of 255, so #1A73E880 converts to an alpha of 0.502 (50.2%), not exactly 0.5; CC is 204 of 255, exactly 0.8 (80%); FF, or no alpha digits at all, is fully opaque. Going the other way, rgba(26, 115, 232, 0.5) becomes #1A73E880, because 0.5 × 255 = 127.5 rounds up to 128.
Frequently Asked Questions
What is the difference between HEX and RGB?
They describe the same colour. HEX writes the red, green and blue values in hexadecimal (#1A73E8), and RGB writes them as numbers from 0 to 255 (rgb(26, 115, 232)).
Why does converting back from HSL change the colour slightly?
HSL is shown rounded to whole degrees and percentages, so converting it back can differ by one step in a channel. The HEX and RGB values are exact.
How do I write a transparent colour?
Add alpha: #1A73E880, rgba(26, 115, 232, 0.5) or hsla(214, 82%, 51%, 0.5). 0 is fully transparent and 1 is solid.
What do the three HSL numbers mean?
Hue is the position on the colour wheel from 0 to 360° (0 is red, 120 green, 240 blue). Saturation runs from grey (0%) to the full colour (100%), and lightness from black (0%) through the pure colour (50%) to white (100%). Changing only the lightness gives lighter or darker shades of the same colour.
Does it support colour names like “red”?
No. Named colours such as “red” or “cornflowerblue” aren’t recognised, so enter a HEX, RGB or HSL value. CSS has a fixed list of 148 named colours, and any CSS reference gives their HEX codes.
Last updated: