Toolnest

Developer Tools

Color Converter

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.

  • 100% free
  • No sign-up
  • Runs in your browser
  • Updated

Enter your details

Runs in your browser. Nothing you enter is uploaded or saved.

Your result

Your converted output and its statistics appear here.

About 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.

How to use Color Converter

  1. 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.
  2. Click Convert to convert it.
  3. Read the rgb() value in the main result, with the uppercase HEX code and the hsl() value shown underneath.
  4. Click Copy result to copy the output into your CSS or design tool.
  5. Press Reset to clear the form and convert another colour.

Key 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.

How it works

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

Color Converter examples

1

Six-digit hex code

Input: #336699

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

2

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.

Important notes before you rely on the result

  • Passwords are generated with your browser’s cryptographically secure random generator and never leave the page.
  • Store generated passwords in a password manager; do not reuse one password across sites.
  • Colours can look different on different screens; check important brand colours on the devices your audience uses.

Privacy

Runs in your browser. Nothing you enter is uploaded or saved.

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.

Keep going

All tools