Color Converter & Picker

Convert HEX, RGB and HSL colors with alpha, preview transparency and copy complete CSS values.

Convert HEX, RGB and HSL without losing transparency. All conversion stays in your browser.

Color to convert

Examples: #09fa, rgb(0 153 255 / 50%), hsl(204deg 100% 50% / .5). Up to 200 characters.

Supports 3/4/6/8-digit HEX, comma or space RGB/HSL, optional alpha, and hue in deg/turn/rad/grad. Out-of-range channels are rejected, not clamped. Named colors (except transparent), variables, calc(), Lab and Display P3 are not supported.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Convert sRGB HEX, RGB and HSL colors with alpha, strict channel validation and a separate composited-background preview.

How to use it

1Paste a HEX, RGB or HSL color.
2Convert and inspect the raw transparency and preview.
3Copy the required notation; HEX uses 8-bit rounding.

Example

Input: rgb(255 0 0 / 50%)
Output: #ff000080; hsl(0 100% 50% / 0.5)

What happens to your data

Colors are parsed and converted locally in the browser; the pasted value is not uploaded.

Last updated October 2026

Convert HEX, RGB and HSL colors while keeping transparency visible and explicit. Paste a color from a stylesheet or design handoff, convert it, and copy the notation your project needs. A checkerboard shows the original transparent color; a separate background preview shows what that color looks like after compositing.

Changing notation should not silently turn a translucent overlay into an opaque fill. Four- and eight-digit HEX include an alpha channel, while RGB and HSL use an optional alpha value. The converter keeps alpha in its outputs and explains where HEX's limited precision introduces rounding.

How it works

The parser accepts three-, four-, six- and eight-digit HEX, optionally without the leading #. It supports comma-separated RGB/RGBA and HSL/HSLA, modern space-separated channels with / alpha, and hue expressed in degrees, deg, turn, rad or grad. RGB channels can be numbers from 0 to 255 or percentages from 0 to 100. HSL saturation and lightness require percentage signs. Alpha is from 0 to 1 or 0% to 100%.

This is a deliberately bounded sRGB converter, not a complete CSS interpreter. Inputs are limited to 200 characters. Unsupported names other than transparent, variables, calculations, scientific notation, Lab, OKLCH and Display P3 are rejected. Unlike a browser's permissive CSS handling, out-of-range channels are errors rather than silently clipped values. Comma-based RGB requires consistently numeric or consistently percentage channels.

RGB and HSL outputs show up to six decimal places. HEX uses eight bits per channel: alpha 0.5 rounds to hexadecimal 80, which represents 128/255 rather than exactly 0.5. The composited preview blends onto the selected opaque background; its result is not a replacement for the raw translucent color. Computation stays in your browser and does not upload the pasted color. This is not a print-profile or CMYK conversion tool.

Worked example: keep a red overlay translucent

Input: rgb(255 0 0 / 50%)
Result: #ff000080; hsl(0 100% 50% / 0.5)

On white the composite preview is #ff8080. The HEX alpha is rounded to 8-bit precision.

Common use cases

Converting a CSS overlay without dropping alpha
Moving a HEX design token into RGB or HSL notation
Checking whether a pasted color uses valid channels
Separating a raw transparent color from its rendered background preview

Frequently asked questions

How do I convert HEX to RGB?＋

Paste a HEX value such as #09fa and choose Convert color. The last digit in four-digit HEX is alpha, not another blue digit. The RGB output retains that transparency.

Why is 50% alpha not exactly 80 in HEX?＋

Two HEX digits offer 256 alpha values, from 0 through 255. Half opacity lies between 127 and 128, so it rounds to 128 (80 in HEX). Use RGB or HSL alpha 0.5 when that exact decimal value matters.

Can I convert OKLCH, CMYK or Display P3?＋

Not on this page. Those models need different conversion and gamut-handling rules. The tool rejects them rather than mislabelling the result as an accurate sRGB equivalent.

Why does my color look different on another background?＋

A color with alpha blends with what is behind it. The original color can stay unchanged while the visible composite changes. Use the background preview to inspect that distinction.