Images & Design

Color Converter

Move between common sRGB color formats without losing track of transparency. Paste a supported CSS color, apply an optional opacity multiplier, and compare HEX, numeric RGB, and HSL representations of the same result.

Free online tool

Loading tool…

Convert a color

Opacity multiplies any alpha already in the input. Picker selections set an opaque color. RGB channels keep up to six decimal places; HEX quantizes to 8 bits per channel.

Same color, three formats

#3567D6
HEX
#3567D6
RGB
rgb(53 103 214)
HSL
hsl(221.36646 66.255144% 52.352941%)

Actual alpha: 100%. Achromatic colors use 0° hue. All channels are in sRGB; no display-P3 or perceptual color mapping is performed.

Inputs and previews are processed locally in your browser. No external color or design API is used.

GET STARTED

How to use the Color Converter

  1. 01

    Paste a HEX, rgb(), rgba(), hsl(), or hsla() color into the input.

  2. 02

    Use the color picker for an opaque starting color or select a preset.

  3. 03

    Adjust the opacity multiplier if you need additional transparency.

  4. 04

    Copy the generated custom properties or download a CSS file.

Examples

Short HEX with alpha

Input #3698 expands the RGB digits to #336699 and interprets the final 8 as alpha 136/255, about 53.33% opacity.

A complete hue turn

hsl(1turn 100% 50% / 50%) converts to red with 50% alpha. Hue values wrap around a 360-degree circle.

Choose precision for the destination

RGB and HSL output retain up to six decimal places. HEX rounds each channel, including alpha, to 8-bit integers. That makes HEX compact, but a fractional input may change slightly when converted to HEX and read back. Prefer decimal RGB when preserving fractional channels matters.

Formats and gamut

The parser accepts three-, four-, six-, and eight-digit HEX, comma-separated RGB/HSL, and modern space-and-slash syntax. Hue supports degrees, radians, gradians, and turns. This is an sRGB converter: it rejects named colors, display-P3, Lab, and out-of-range channels instead of silently clipping them.

Common questions

What happens when I use the color picker?

The picker provides an opaque six-digit HEX color. If the original input included alpha, choosing a new picker color replaces that input; the separate multiplier still applies.

How is opacity combined?

Input alpha is multiplied by the opacity percentage. A 50% alpha color with a 50% multiplier ends at 25% alpha.

Why is gray reported with hue 0?

An achromatic color has no meaningful hue. The output uses 0 degrees as a stable convention when saturation is zero.

Sources & references