CompleteToolkit

HEX / RGB / HSL Converter

Paste a color in any format — HEX, rgb() or hsl() — and get all three, instantly.

HEX

#6D5BFF

RGB

rgb(109, 91, 255)

HSL

hsl(247, 100%, 68%)

About this tool

Colors arrive in whatever format the source happens to use: a designer's HEX code, a computed rgb() value from browser DevTools, an hsl() from a modern stylesheet. This converter takes any of the three in a single input — it detects which format you pasted — and outputs all three, each with its own copy button and a live swatch confirming you've got the right color.

The parser is forgiving in the ways that matter: HEX works with or without the # and in 3-digit shorthand (#f80 expands to #FF8800); rgb() and rgba() are both accepted; hsl() handles the percent signs. Paste sloppy, get clean output.

If the Color Picker tool on this site is for finding a color visually, this converter is for when you already have the color as text and just need it in a different format — the single most common two-second task in front-end work. Conversion runs locally with standard color-space math, works offline once loaded, and never uploads anything.

How to use the HEX / RGB / HSL Converter

  1. 1Paste or type a color in any format: #6D5BFF, rgb(109, 91, 255) or hsl(252, 100%, 68%).
  2. 2The swatch confirms the color; all three formats appear below.
  3. 3Click Copy next to the format you need.
  4. 4Shorthand HEX like #f80 is expanded automatically.

Frequently asked questions

Which input formats are accepted?

HEX with or without # (both #6D5BFF and 6D5BFF), 3-digit shorthand HEX (#f80), rgb() and rgba() with values 0–255, and hsl() or hsla() with degrees and percentages. The parser detects the format automatically.

What happened to the alpha (transparency) value?

The converter works with the opaque color; alpha from rgba()/hsla() input is ignored in the output formats. For CSS with transparency, append the alpha to the converted value: rgb(109 91 255 / 0.5).

Why do HSL round-trips sometimes shift by one?

HSL values are conventionally rounded to whole degrees and percentages, which can shift an RGB channel by ±1 when converting back. The difference is imperceptible — far below what any display can show.

When should I use HSL instead of HEX or RGB?

When you need to modify a color: making a hover state 10% darker means reducing HSL lightness by 10 — trivial in HSL, painful in HEX. Use HEX for storage and handoff, HSL for manipulation.

Related tools

Color Picker & Converter

Pick any color and get its HEX, RGB and HSL values with one-tap copy.

Open tool

CSS Gradient Generator

Design linear and radial gradients visually — with the exact CSS one click away.

Open tool

Color Contrast Checker

Check text/background contrast against WCAG AA and AAA — with a live preview of how it actually reads.

Open tool

Box-Shadow Generator

Design CSS box-shadows with sliders and a live preview — offsets, blur, spread, opacity and inset.

Open tool