Color Code Converter

How to use the Color Code Converter

1. Type or paste a colour in HEX, rgb()/rgba() or hsl()/hsla() form, or use the colour picker.
2. Check the preview swatch. A checkerboard behind it shows how transparent a colour is.
3. Copy the HEX, RGB or HSL value you need with its Copy button.
4. If the value is not valid, the message under the input says what to fix.

Good to know

• Accepted input: HEX with 3, 4, 6 or 8 digits (the # is optional), rgb()/rgba() with numbers or percentages, and hsl()/hsla() with a hue in degrees. Commas or CSS-style spaces and a “/” before alpha both work. Named colours such as “red” are not supported.
• RGB channels are whole numbers from 0 to 255. Percentages are converted (50% = 127.5) and rounded to the nearest whole number.
• HSL is shown as whole degrees for hue and whole percentages for saturation and lightness, always calculated from the rounded RGB value. Converting HSL to RGB and back can therefore change a value by up to 1 unit because of rounding.
• Alpha is a number from 0 (transparent) to 1 (opaque), shown to at most 2 decimals. It is added to HEX as a final byte (round(alpha × 255)); reading a HEX alpha byte divides by 255. Fully opaque colours omit alpha in the output.
• Hues outside 0–360 wrap around (-30 is the same as 330). Channel values outside their range, such as rgb(300, 0, 0), are reported as errors rather than silently clamped.
• The native colour picker has no alpha control; if your colour is transparent its alpha is kept when you pick a new colour.

Examples

HEX to RGB and HSL

#ff5b00 → rgb(255, 91, 0) → hsl(21, 100%, 50%).

Shorthand HEX

#f80 expands each digit (#ff8800) and converts to rgb(255, 136, 0) and hsl(32, 100%, 50%).

Colour with transparency

rgb(11 43 103 / 0.5) → rgba(11, 43, 103, 0.5) → #0b2b6780. The alpha byte is 0.5 × 255 = 127.5, rounded to 128 = hex 80.

Frequently asked questions