Color Code Converter
Convert color codes between HEX, RGB, and HSL. Type any HEX, rgb(), or hsl() value and get all three formats at once, with a live preview swatch. Converts as you type. No upload, no server, runs entirely in your browser.
How to Use
HEX, RGB, and HSL Explained
A screen color is made from three primary channels: red, green, and blue. The three formats below all describe the same color, they just write it differently.
HEX writes each channel as a two digit hexadecimal number from 00 to FF, joined into one string like #FF0080. The first pair is red, the second is green, the third is blue. A short form like #F08 expands to #FF0088.
RGB writes the same channels as decimal numbers from 0 to 255, for example rgb(255, 0, 128). To convert HEX to RGB you read each pair as a base 16 number. FF is 255, 00 is 0, and 80 is 128.
HSL describes a color by hue (an angle from 0 to 360 degrees on the color wheel), saturation (0% to 100%), and lightness (0% to 100%). It is computed from the RGB channels and is the easiest format to adjust by hand, since you can change lightness without touching the hue.
Worked Example
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
All three describe the same colors using different notation. HEX uses a hexadecimal string like #FF0080 for red, green, and blue channels. RGB lists the same channels as decimal numbers from 0 to 255, such as rgb(255, 0, 128). HSL describes a color by hue (an angle on the color wheel), saturation, and lightness, such as hsl(330, 100%, 50%). They are interchangeable and convert exactly into each other.
Which color format should I use in CSS?
All three formats work in every modern browser, so the choice is about readability. HEX is compact and common for fixed brand colors. RGB is handy when you think in terms of channel values or need an alpha channel with rgba(). HSL is the easiest to adjust by hand because you can change lightness or saturation without recalculating the whole color.
What does the alpha channel do?
The alpha channel controls opacity, where 1 is fully opaque and 0 is fully transparent. You add it with rgba(255, 0, 128, 0.5) or hsla(330, 100%, 50%, 0.5), or with an 8 digit HEX value like #FF008080. This converter focuses on the solid color channels, so alpha is not part of the standard 6 digit HEX, RGB, and HSL output.
Can I convert a named color like red or teal?
Named CSS colors map to fixed HEX values, for example red is #FF0000 and teal is #008080. Look up the HEX value of the name, paste it into this converter, and you will get the matching RGB and HSL values instantly. This tool accepts HEX, rgb(), and hsl() input directly.
Is HSL better for adjusting shades and tints?
Yes. Because HSL separates hue from lightness, you can keep the same hue and saturation and only change the lightness value to make a color darker or lighter. This makes HSL ideal for building consistent shade and tint scales, hover states, and accessible color palettes.