Convert HEX color codes, including #RGB short codes and codes without #, to RGB and HSL instantly. Pick a color and get rgb() and hsl() values for your CSS.

What is the Color Converter?

Designers often hand over colours as hex codes like #336699, while CSS, design apps and code libraries frequently want RGB or HSL values instead. This Color Converter takes a hex colour, either the full six-digit form, a three-digit short code such as #369, or a code typed without the # sign, and gives you the matching rgb() value along with the HSL equivalent and a tidy uppercase six-digit hex code, all formatted so you can paste them straight into a stylesheet.

HSL describes a colour by hue, saturation and lightness, which makes it easy to create lighter or darker shades of a brand colour by changing a single number. The converter rounds HSL to one decimal place and runs entirely in your browser. It works with opaque sRGB colours only, so there is no alpha channel, colour profile handling or contrast check.

How to use the Color Converter

Choose your colour with the colour picker in the Opaque color field, or type a hex code such as #336699, the short form #369, or 336699 without the # sign.
Click Process to convert it.
Read the rgb() value in the main result, with the uppercase HEX code and the hsl() value shown underneath.
Click Copy result to copy the output into your CSS or design tool.
Press Reset to clear the form and convert another colour.

Features

Converts #RRGGBB, #RGB and codes without # to rgb() channel values from 0 to 255.
Calculates the matching hsl() value with hue in degrees and saturation and lightness in percent, rounded to one decimal place.
Shows the hex code expanded to six digits and normalised to uppercase for consistent style guides.
Outputs CSS-ready strings such as rgb(51, 102, 153) and hsl(210.0, 50.0%, 40.0%).
Flags invalid input with a plain message, such as four-digit or eight-digit codes.

Why use this color converter

Move colours between design files, CSS and code without manual maths.
Build lighter and darker shades of a brand colour by adjusting HSL lightness.
Keep a consistent colour reference across your team's style guide.
Get exact, repeatable values instantly in any browser.

How it works

RGB channels are hexadecimal byte values; HSL uses the standard min/max sRGB-channel conversion, without linear-light conversion.

Examples

Six-digit hex code

Input: #336699

Result: rgb(51, 102, 153) HEX: #336699 HSL: hsl(210.0, 50.0%, 40.0%)

Short three-digit code

Input: #369

Result: rgb(51, 102, 153) HEX: #336699 HSL: hsl(210.0, 50.0%, 40.0%) The short code is expanded to #336699, so the result matches the first example.

Code typed without the # sign

Input: ff5733

Result: rgb(255, 87, 51) HEX: #FF5733 HSL: hsl(10.6, 100.0%, 60.0%)

Results are estimates for general information, not financial, medical, legal, tax, or property advice. Confirm important figures with the relevant institution or a qualified professional.

Color Converter: frequently asked questions

Can I enter a three-digit hex code like #abc?

Yes. Three-digit short codes are expanded by doubling each digit, so #abc is read as #AABBCC and #369 as #336699. You can also leave out the # sign and type abc or 336699. Codes with four or eight digits, which include transparency, are rejected with the message 'Use a hex color such as #336699 or #369.'

Does it convert RGB or HSL back to HEX?

No. The conversion runs in one direction, from a hex code to RGB and HSL. If you only have RGB values, the colour picker built into many browsers lets you switch to RGB entry and then supplies the matching hex code, which the converter works from.

Why are the HSL values shown with decimals?

Hue, saturation and lightness are rounded to one decimal place so the result stays close to the original colour. Rounding to whole numbers can shift a colour slightly when you convert back. CSS accepts decimal values, so hsl(10.6, 100.0%, 60.0%) can be pasted directly into a stylesheet.

Can it handle transparency or wide-gamut colours?

No. The tool treats every colour as opaque sRGB. Alpha transparency, colour spaces such as Display P3, colour profiles, contrast and accessibility checks, and perceptual colour matching are outside its scope. For a semi-transparent colour, convert the hex code here and add the alpha value yourself in rgba() or hsla().

How is the HSL value calculated?

Each pair of hex digits becomes a red, green or blue value between 0 and 255. Lightness is the average of the highest and lowest channel, saturation reflects the gap between them, and hue is the angle on the colour wheel from 0 to 360 degrees. This is the standard formula browsers use for CSS hsl() colours.