CSS

Color Converter

Paste a HEX, RGB, or HSL color to see all three formats, including transparency.

Result

HEX
#3b82f6
RGB
rgb(59 130 246)
HSL
hsl(217.219251 91.219512% 59.803922%)
CSS 

/* Equivalent color formats; HEX rounds to 8-bit channels. */
--color-hex: #3b82f6;
--color-rgb: rgb(59 130 246);
--color-hsl: hsl(217.219251 91.219512% 59.803922%);

One color, three useful formats

Enter a HEX, RGB, or HSL value to see equivalent formats and a color swatch. Copy or download the CSS custom properties when the result matches your input.

HEX stores red, green, and blue as hexadecimal bytes. RGB exposes those channels directly. HSL describes a color by hue, saturation, and lightness, which makes intentional lightness and hue changes easier to read.

Accepted inputs and alpha

Use three, four, six, or eight HEX digits after #. Four and eight digits include alpha as the final channel: #ff000080 is red with about 50.2% opacity. RGB accepts channels from 0–255 or 0–100%; HSL needs percentage saturation and lightness. Hue uses degrees, optionally followed by deg, and wraps around 360: hsl(-120 100% 50%) is blue.

Modern space-separated syntax supports slash alpha, such as rgb(255 0 0 / 50%). Comma-separated RGB(A) and HSL(A) syntax is also accepted. Alpha ranges from 0–1 or 0–100%. Keywords, variables, other color spaces, and radian/turn hue units are outside this tool’s scope.

A practical example

#ff0000, rgb(255 0 0), and hsl(0 100% 50%) all describe the same opaque red. Copy the custom property declarations into an existing CSS rule, or wrap them in :root to use them globally.

Precision and preview limits

  • HEX rounds channels, including alpha, to the nearest 8-bit value. RGB and HSL display up to six decimal places, so extremely fine differences may round away.
  • The checkerboard reveals transparency. A translucent color’s appearance changes with the actual background underneath it.
  • Invalid values are rejected rather than silently clamped. Converting a color does not check its contrast against text or backgrounds.

Related Tools