Convert colors between HEX, RGB and HSL — free, instant, private.
What is a color converter?
A color converter translates a color between the different notations used in CSS and design
tools. HEX, RGB and HSL all describe the same sRGB colors, just written differently: HEX packs the
red, green and blue channels into hexadecimal digits, RGB lists them as decimal numbers from 0 to
255, and HSL describes the hue, saturation and lightness. Converting between them never changes
the color itself — only the way it is written.
How to use this tool
- Click the large swatch to open your browser's native color picker, or type a value directly into the HEX, RGB or HSL field.
- Every other field, the live preview and the complementary swatch update instantly as you type.
- Malformed input is flagged in red — HEX accepts both #rgb and #rrggbb forms.
- Use the copy buttons to grab a ready-to-paste CSS value.
When to use HEX vs RGB vs HSL
- HEX is the most compact notation and the most common in design handoffs, brand guides and graphics tools — ideal for copying a single value around.
- RGB states the three channels explicitly and is the form you reach for when you later need transparency via rgba().
- HSL is the most human-friendly: keep the hue fixed and adjust saturation or lightness to build hover states, shades and tints. It is also how this tool derives the complementary color (hue + 180°).
Popular color codes
Looking up a specific color? Each page lists its HEX, RGB and HSL codes, shades, tints and complementary color:
All 148 CSS named colors — from aliceblue to
yellowgreen — have their own color code page.
Common input mistakes (and fixes)
- Modern space-separated CSS fails. Values like
rgb(249 115 22) or hsl(25 95% 53%) are rejected — every field here expects commas, so write rgb(249, 115, 22) and hsl(25, 95%, 53%).
- Percentages or decimals in RGB fail. Channels must be whole numbers from 0 to 255;
rgb(97%, 45%, 8%) and rgb(249.5, 115, 22) both trigger a red error.
- Wrappers are optional. Pasting bare
249, 115, 22 into the RGB field, or 25, 95%, 53% into HSL, converts fine — and HEX accepts upper or lower case, with or without the leading #.
- Hue wraps around. Entering
hsl(360, 100%, 50%) gives the same pure red as hue 0.
Why an HSL round trip can shift by one
This tool rounds HSL values to whole numbers, so converting away and back can drift slightly. Example: #f97316 becomes hsl(25, 95%, 53%), and converting that back gives rgb(249, 116, 21) — one step off on two channels. That is rounding, not a bug: whole-number HSL offers roughly 3.7 million combinations, while RGB has 16,777,216, so some colors simply have no exact HSL match. Treat the 6-digit HEX as the exact value and HSL as a close, editable approximation.
Frequently asked questions
What is the difference between HEX and RGB?
None in the color itself — they are two ways of writing the same red, green and blue channels. HEX writes each channel as two hexadecimal digits (#f97316), while RGB writes them as decimal numbers from 0 to 255 (rgb(249, 115, 22)). Both notations produce exactly the same color.
What does HSL mean?
HSL stands for Hue, Saturation and Lightness. Hue is the position on the color wheel in degrees (0 is red, 120 is green, 240 is blue), saturation is the intensity of the color (0% is gray, 100% is vivid), and lightness runs from 0% (black) to 100% (white), with 50% being the pure color.
Are 3-digit HEX codes valid?
Yes. A 3-digit HEX code is a shorthand in which each digit is doubled: #f80 means exactly #ff8800. This tool accepts both #rgb and #rrggbb input and always displays the full 6-digit form.
Can this tool convert colors with an alpha channel?
No — transparency is out of scope here; the converter works with fully opaque colors. If you need opacity in CSS, use rgba(249, 115, 22, 0.5) or hsla(), or an 8-digit HEX code such as #f9731680, where the last pair of digits is the alpha channel.