# Color Converter - HEX, RGB & HSL Online

> Free color converter for HEX, RGB and HSL. Understands color names, 8-digit HEX, rgba and oklch, keeps transparency, and round-trips HSL exactly.

- URL: https://qilingtools.com/en/color
- Category: Developer Tools (https://qilingtools.com/en/dev)
- Tags: [Converters](https://qilingtools.com/en/tags/convert), [Design](https://qilingtools.com/en/tags/design), [Developer](https://qilingtools.com/en/tags/dev), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-11-07
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

Enter a color and get its HEX, RGB and HSL forms at once, each with its own copy button, alongside a large preview swatch and the system color picker. Colors are parsed by the browser itself, so almost any CSS color works: #2563eb, 2563EB without the #, #2563eb80 with transparency, rgb(37 99 235 / 50%), percentages and decimals, hsl(210deg 50% 50%), named colors like tomato, and modern oklch, lab and color(display-p3 …). Out-of-range values are clamped by the CSS rules, so you never get an invalid result like #12c0000. Transparent colors are output as 8-digit HEX, rgba and hsla, previewed over a checkerboard. HSL keeps just enough decimals that pasting it back gives exactly the same color. Everything is calculated live in your browser.

## How to use

1. Type or paste a color in any CSS syntax, or click the swatch on the right to use the system picker
2. Check the preview; semi-transparent colors show the checkerboard behind them
3. Copy the row you need: HEX, RGB and HSL, or 8-digit HEX, RGBA and HSLA for transparent colors

## Features

- HEX, RGB and HSL output together
- Understands color names, 3/4/6/8-digit HEX, percentages, decimals, deg/turn angles, oklch, lab and display-p3
- Keeps transparency with 8-digit HEX, rgba and hsla, previewed on a checkerboard
- HSL keeps the decimals it needs, so round trips never shift the color
- Out-of-range values are clamped by CSS rules, never producing an invalid color
- System color picker and large preview, all computed locally

## FAQ

### What are the last two digits of an 8-digit HEX? How do I convert opacity?

In #RRGGBBAA the last two digits are opacity: 00 is fully transparent and FF fully opaque, calculated as percentage × 255 converted to hex. Common values: 10% = 1A, 20% = 33, 50% = 80, 80% = CC, 90% = E6. So #2563eb80 is rgba(37, 99, 235, 0.5), and #0000001a is 10% black, a typical shadow color. The 4-digit #f00a equals #ff0000aa, about 0.667 opacity. Old Internet Explorer does not support 8-digit HEX; use rgba if you need it.

### Why does HSL have decimals? Can't it be rounded?

Rounding changes the color. The exact HSL of #2563eb is about (221.21, 83.19%, 53.33%); written as hsl(221, 83%, 53%) it converts back to #2463eb, slightly off. This tool uses as few decimals as possible while guaranteeing the same color comes back: #2563eb gives hsl(221.2, 83.2%, 53.3%), while pure red #ff0000 stays hsl(0, 100%, 50%). In testing, 300 random colors converted to HSL and back all matched exactly.

### Which formats are supported? How many color names are there?

Any color syntax the browser can draw: hexadecimal (3, 4, 6 or 8 digits, # optional), rgb() and rgba() (commas or spaces, numbers or percentages, decimals allowed), hsl() and hsla() (angles in deg or turn, even negative, e.g. hsl(-30, 100%, 50%) is #ff0080), the 148 standard CSS color names (tomato is #ff6347, rebeccapurple is #663399), plus oklch(), lab() and color(display-p3 …). Context-dependent keywords such as currentcolor and inherit cannot be converted and are reported as unrecognized.

### What happens with out-of-range values like rgb(300, 0, 0)?

They are clamped to 0–255 following the CSS rules, so rgb(300, 0, 0) becomes #ff0000, exactly what a browser would display. Percentages work the same way: rgb(100%, 0%, 0%) is also #ff0000. The HEX output is therefore always a valid 6- or 8-digit value.

### Why do oklch and display-p3 colors change when converted?

HEX, RGB and HSL can only express the sRGB gamut, while oklch and display-p3 can describe more saturated colors. Colors inside sRGB convert exactly, e.g. oklch(0.6 0.2 260) is #2e79f5; colors outside it are mapped to the nearest sRGB color. Tested in Chrome, oklch(0.7 0.4 150) becomes #00d600 and color(display-p3 1 0 0), pure red on a P3 screen, becomes #ff0000. On a wide-gamut display the original syntax looks more vivid than the converted HEX.

### Is HSL the same as HSB/HSV in design apps?

No, and this is the most common mix-up. In CSS HSL, L is lightness: a pure hue is most vivid at L = 50% and 100% is white. In the HSB (also called HSV) used by Photoshop and Figma pickers, B is brightness, and a pure hue is at B = 100%. Pure red is (0, 100%, 50%) in HSL but (0, 100%, 100%) in HSB. The hue H is the same; saturation and lightness cannot be copied across directly.

### Can the picker sample colors from the screen?

The swatch on the right opens your operating system's color picker. On macOS its color panel includes a magnifier that can sample any pixel on screen; on Windows and phones you usually pick from a color wheel only. The chosen color goes straight into the input. The system picker does not support transparency, so it always gives an opaque color.

### Are my files or data uploaded?

No. Everything runs locally in your browser with no network upload, and is discarded when you close the page.

### Do I need to sign up or pay?

No. The site is completely free, needs no account and has no usage limits.

## Related tools

- [JSON Formatter](https://qilingtools.com/en/json): Free online JSON formatter: beautify or minify, validate with the exact line and column of any error, browse a collapsible tree, sort keys and escape strings.
- [Base64 Encode/Decode](https://qilingtools.com/en/base64): Free online Base64 encoder and decoder: convert text, images and any file to Base64, and Base64 back to text or files. UTF-8 and GBK text, data URIs and URL-safe Base64; decoded images are previewed and downloadable. Processed locally, never uploaded.
- [URL Encode/Decode](https://qilingtools.com/en/url-encode): Free online URL encoder and decoder: turn spaces, symbols and non-English text into percent-encoding such as %E4%BD%A0, or turn encoded links back into readable text. Handles single values or whole URLs, UTF-8 and GBK, and + as space. Real-time and local, no upload.
- [JWT Decoder](https://qilingtools.com/en/jwt): Free JWT decoder: read the header and payload, check expiry, and verify the signature with a secret, PEM, JWK or JWKS. Runs locally, nothing uploaded.
- [Timestamp Converter](https://qilingtools.com/en/timestamp): Free online Unix timestamp converter: convert timestamps and dates, auto-detect seconds or milliseconds, and show local, UTC, ISO 8601 and relative time.
- [Hash / Checksum](https://qilingtools.com/en/hash): Free hash calculator: MD5, SHA-1, SHA-256, SHA-384 and SHA-512 of text or files, with automatic comparison against a published checksum. Multi-GB files, no upload.
- [UUID Generator](https://qilingtools.com/en/uuid): Free online UUID generator: create UUID v4 (GUID) or time-ordered v7 in bulk with your browser's cryptographic RNG. Uppercase, no-hyphen and brace options, up to 100 at a time, one-click copy, generated locally.
- [Base Converter](https://qilingtools.com/en/base-convert): Free number base converter for binary, octal, decimal, hex and any base 2–36. Detects 0x/0b/0o prefixes and separators, with exact results for huge integers.