Color Converter: HEX, RGB, HSL
Paste any color code, pick a color or type a color name and see it in every format at once. Copy HEX, RGB, HSL, HSV or CMYK in one click and check text contrast. Free, no signup, and it runs in your browser.
🔍 You Can Also Visit More Tools Categories
What is a Color Converter?
A color converter changes a color from one code format to another without changing how the color looks. Web designers and developers use different formats in different places: a designer may share a HEX code like #FF5733, while a stylesheet, a design tool or a mobile app may need rgb(255, 87, 51) or hsl(11, 100%, 60%). This tool converts between them instantly.
It also works as a color picker. Choose a color, drag the sliders or paste a code, and see a live preview with every format ready to copy.
How to Use the Color Converter
- Paste a color code (HEX, RGB, HSL) or a color name such as
tomatointo the input box, or use the color picker. - Check the live preview. Use the sliders or the alpha slider to adjust the color or its transparency.
- Click Copy next to the format you need.
- Use the contrast checker to test whether your text color is readable on a background color.
Color Formats Explained
HEX
HEX is a six-digit code in base 16 that starts with #. The digits are three pairs for red, green and blue. For example, #FF5733 is red FF, green 57 and blue 33. A short 3-digit form such as #F53 is also valid, and an 8-digit form such as #FF573380 adds transparency.
RGB and RGBA
RGB describes a color by the amount of red, green and blue light, each from 0 to 255. For example, rgb(255, 87, 51). RGBA adds an alpha value from 0 (fully transparent) to 1 (fully solid), for example rgba(255, 87, 51, 0.5).
HSL and HSLA
HSL describes a color by hue (the color angle, 0 to 360), saturation (how vivid, 0 to 100%) and lightness (how light or dark, 0 to 100%). For example, hsl(11, 100%, 60%). It is the easiest format to adjust by hand: raise the lightness for a lighter shade, or lower the saturation for a softer color.
HSV / HSB and CMYK
HSV (also called HSB) uses hue, saturation and value (brightness) and is common in design tools and color pickers. CMYK uses cyan, magenta, yellow and black and is used in printing. The CMYK value shown here is a simple mathematical conversion for reference. Printed colors depend on the printer, ink and paper, so use professional print software for final print work.
HEX vs RGB vs HSL
| Feature | HEX | RGB | HSL |
|---|---|---|---|
| Example | #FF5733 | rgb(255, 87, 51) | hsl(11, 100%, 60%) |
| Based on | Red, green, blue (base 16) | Red, green, blue (0-255) | Hue, saturation, lightness |
| Transparency | 8-digit HEX | rgba() | hsla() |
| Easy to adjust by hand | No | Somewhat | Yes |
| Length | Shortest | Medium | Medium |
| Best for | Quick copy from design tools | Transparency and JavaScript | Palettes, hover states, themes |
How to Convert HEX to RGB (Example)
Take #FF5733 and split it into three pairs. Convert each pair from base 16 to a decimal number:
| Channel | HEX pair | Calculation | Value |
|---|---|---|---|
| Red | FF | 15 × 16 + 15 | 255 |
| Green | 57 | 5 × 16 + 7 | 87 |
| Blue | 33 | 3 × 16 + 3 | 51 |
So #FF5733 is rgb(255, 87, 51). To go back, convert each value to a two-digit base 16 number and join them.
Color Transparency (Alpha)
Alpha controls how see-through a color is. A value of 0 is fully transparent and 1 (or 100%) is fully solid. The same 50% transparency looks like this in each format:
| Format | Example at about 50% opacity |
|---|---|
| 8-digit HEX | #FF573380 |
| RGBA | rgba(255, 87, 51, 0.5) |
| HSLA | hsla(11, 100%, 60%, 0.5) |
| Modern CSS | rgb(255 87 51 / 50%) |
Common Colors and Their Codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Green (CSS) | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Tomato | #FF6347 | rgb(255, 99, 71) | hsl(9, 100%, 64%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
HSL values are rounded to whole numbers.
Color Contrast and Accessibility
Text must stand out from its background so that everyone can read it, including people with low vision. The WCAG guidelines measure this with a contrast ratio from 1:1 (no contrast) to 21:1 (black on white).
| WCAG level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
Use the contrast checker above to enter a text color and a background color and see the ratio with a pass or fail result for each level.
Tips for Using Colors in CSS
- Pick one format for your project: Mixing HEX, RGB and HSL in the same file makes it harder to read and maintain.
- Use CSS variables: Store brand colors once, for example
--primary: #ff5733;, and reuse them everywhere. - Use HSL for variations: Keep the same hue and change only lightness to create hover, active and disabled states.
- Check contrast early: Test text and background pairs before the design is final.
- Do not rely on color alone: Add text or icons so people who cannot tell certain colors apart still understand the message.
Common Color Code Mistakes
- Missing # in CSS:
color: ff5733;does not work, it must be#ff5733. - Wrong number of HEX digits: Valid lengths are 3, 4, 6 or 8 digits. Five or seven digits are invalid.
- RGB value above 255:
rgb(300, 0, 0)is out of range. - Missing % in HSL: Saturation and lightness need a percent sign, for example
hsl(11, 100%, 60%). - Confusing alpha formats: In rgba() and hsla(), alpha is 0 to 1. In 8-digit HEX it is two base 16 digits.
Frequently Asked Questions
How do I convert HEX to RGB?
Split the 6-digit HEX code into three pairs and convert each pair from base 16 to a number from 0 to 255. For #FF5733, FF is 255, 57 is 87 and 33 is 51, so the color is rgb(255, 87, 51). The tool does this automatically when you paste a HEX code.
How do I convert RGB to HEX?
Convert each of the red, green and blue values (0 to 255) to a two-digit base 16 number and join them after a # sign. For rgb(255, 87, 51), 255 is FF, 87 is 57 and 51 is 33, which gives #FF5733.
What is HSL and why use it?
HSL stands for hue, saturation and lightness. Hue is the color angle from 0 to 360 degrees, saturation is how vivid it is and lightness is how light or dark it is. HSL is useful in CSS because you can make a color lighter, darker or less intense by changing just one number.
Which is better for CSS: HEX, RGB or HSL?
All three are valid and give the same result in the browser. HEX is the most common and shortest. RGB is handy when you need transparency with rgba(). HSL is easiest to adjust by hand, for example when building hover states or color palettes.
How do I add transparency to a HEX color?
Use an 8-digit HEX code, where the last two digits are the alpha value. For example, #FF573380 is #FF5733 at about 50% opacity. You can also use rgba(255, 87, 51, 0.5) or hsla(11, 100%, 60%, 0.5).
What is a 3-digit HEX color?
A 3-digit HEX code is a short form where each digit is doubled. For example, #F53 means #FF5533 and #FFF means #FFFFFF. It only works when each pair of the full code has two identical digits.
What contrast ratio do I need for readable text?
WCAG asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text at level AA. Level AAA asks for 7 to 1 for normal text and 4.5 to 1 for large text. Black text on a white background has the highest ratio, 21 to 1.
Why does my color change by 1 when I convert back and forth?
HSL and HSV values are usually shown as whole numbers, so some precision is lost through rounding. For example, #FF5733 shows as hsl(11, 100%, 60%), and converting that rounded value back gives #FF5833. Keep the original HEX or RGB value if you need the exact color.
Is this color converter free and private?
Yes. The tool is free, needs no signup and runs in your browser using JavaScript. The colors you enter are not sent to our server.