Convert a hex color to RGB and HSL with a live preview swatch. Accepts #abc short form too.
What the color converter does
Type a hex color (like #0d9488) and see its RGB and HSL values plus a live swatch. It also accepts the short 3-digit form (#abc). Everything is computed in the browser.
Frequently asked questions
What is the difference between RGB and HSL?
RGB gives red, green and blue amounts; HSL gives hue, saturation and lightness, which is easier to tweak by eye. Both describe the same color.
Does it accept 3-digit hex?
Yes — #abc expands to #aabbcc.
Is anything uploaded?
No. The conversion runs in the page as you type.
| Hex | Color | RGB |
|---|---|---|
| #FF0000 | Red | rgb(255, 0, 0) |
| #00FF00 | Green | rgb(0, 255, 0) |
| #0000FF | Blue | rgb(0, 0, 255) |
| #FFFFFF | White | rgb(255, 255, 255) |
| #000000 | Black | rgb(0, 0, 0) |
| #0D9488 | Teal | rgb(13, 148, 136) |
All RGB values are whole numbers between 0 and 255. Rounding is not a factor for the RGB conversion itself because every two-hex-digit pair maps exactly to an integer. The HSL output may be rounded to the nearest integer for hue degrees, but saturation and lightness stay as precise percentages.
How to use it
- Type a hex color code into the input box, using either the full six-digit form like
#2F8A4Bor the three-digit shorthand like#2F8. - Watch the swatch and the RGB and HSL values update immediately as you type.
- If you entered a three-digit hex code, note that each digit is doubled to form the full code;
#2F8becomes#22FF88. - Copy the displayed RGB or HSL value directly into your stylesheet, design tool, or code editor.
Where it comes in handy
A designer finds a brand color in a printed style guide listed as #E11D48 and needs the CSS equivalent. Pasting the hex into this tool returns rgb(225, 29, 72), which can be dropped straight into a stylesheet.
A frontend developer is auditing a component library and notices a button uses #0EA5E9. Converting it to rgb(14, 165, 233) confirms the contrast ratio against white text before the component goes live.
A social media manager copies a highlight color from a Canva template as #7C3AED. The tool converts it to rgb(124, 58, 237), which matches the exact shade used in the original design across platforms.
Worth knowing
- The tool accepts only valid hex strings. Partial inputs like
#12or#1234will not produce a result until the input is complete. - The shorthand three-digit form expands each character by repeating it;
#AB0becomes#AABB00, not#AA BB 00. - Alpha values like
#FF000080are not supported; the converter treats all input as fully opaque colors.