All tools

Color Code Converter

Convert between HEX, RGB and HSL, preview the color and copy any format.

#8C9EF8

HEX#8C9EF8

RGBrgb(140, 158, 248)

HSLhsl(230, 88.525%, 76.078%)

User reviews

No reviews yet. If you’ve used this tool, be the first to leave one.

From first step to finished result

Color Code Converter: complete guide

Walk through the steps and examples, or jump straight to the topic you need.

How to use

Examples & choices

Troubleshooting

FAQ

At a glance

Supported formats: Converts between opaque HEX, RGB and HSL.
HEX: Enter a 3-digit or 6-digit hexadecimal code, with or without the # sign.
RGB: Enter each of R, G and B as an integer from 0 to 255.
HSL: Supports hue 0 to 360 and saturation and lightness 0 to 100%. Results are shown to three decimal places.
Result: Provides a color preview, three codes, and a copy button per format. It does not extract colors from images.

How to use Color Code Converter

Choose the format of the code you have
Select the notation you want to enter: HEX, RGB or HSL. You can also pick a color with the color picker. RGBA, HSLA and 8-digit HEX with transparency are out of scope.
Enter the value and check the preview
Enter a hexadecimal code for HEX, three channels for RGB, and hue, saturation and lightness for HSL. If the preview is the color you intended, it's easy to spot whether you chose the wrong format for the code you copied.
Read the result in the format you need
HEX is shown as 6 uppercase digits, and RGB and HSL as strings in each format. RGB channels are handled as integers, so converting HSL values back and forth can produce small differences from rounding.
Copy the code and apply it to your work
Use the copy button for the format you need. After applying it on screen, check it together with the surrounding background. This tool converts color codes and does not check accessibility contrast between text and background.

What it’s good for

Converting HEX and RGB color codes

HEX can be entered with 3 or 6 digits. #FFF expands to #FFFFFF, and in RGB you enter each channel as an integer from 0 to 255. For example, #FF0000 corresponds to rgb(255, 0, 0). Check the color preview together with the converted codes.

Checking hue, saturation and lightness with HSL

Enter HSL with hue from 0 to 360 and saturation and lightness from 0 to 100%. The resulting HSL is shown to three decimal places. Because values are rounded when converting to the integer channels of HEX and RGB, going back and forth between formats can change the decimals slightly.

Worked examples

Expressing red in three formats

Input and settings

#FF0000

Result

#FF0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)

The same opaque color expressed in different number systems. An HSL lightness of 50% does not mean the perceived brightness on screen is exactly half.

Expanding a short HEX code

Input and settings

#0F8

Result

#00FF88
rgb(0, 255, 136)
hsl(152, 100%, 50%)

A 3-digit HEX expands to 6 digits by repeating each digit twice. #0F8 does not become something like #000F08 by padding zeros at the front.

How to choose between HEX, RGB and HSL

Swipe the table sideways to see the rest.

How to choose between HEX, RGB and HSL
Format	How it expresses color	Use
HEX	Shows red, green and blue channels in hexadecimal	Moving short color codes into design and web work
RGB	Shows the three channels as numbers from 0 to 255	Checking each channel value directly or matching other tools
HSL	Shows hue, saturation and lightness	Adjusting a color's family, vividness and lightness separately

When the result isn’t what you expected

I entered a HEX but get an error

Check that it is 3 or 6 digits and has no characters other than 0-9 and A-F. 4-digit and 8-digit HEX containing transparency are not supported. Bring in an opaque RGB color code from your design tool and use that.

The decimals differ when it comes back as HSL

Rounding can occur when converting HSL to RGB integer channels. Calculating back to HSL can differ slightly from the original decimals, so keep the original code as your reference too.

The printed color differs from the screen

This tool converts RGB-family values used on screen. It does not apply CMYK conversion or print profiles. If you need to match printed results, calibrate separately in your print workflow.

Key terms

Hue: In HSL, a value that expresses the family of a color as an angle on a circle.
Saturation: In HSL, a value showing whether a color is close to gray or vivid.
Alpha: A value showing the transparency of a color. This tool does not convert alpha.

Color Code Converter FAQ

Does it support RGBA or HEX with transparency?

Currently only opaque HEX, RGB and HSL are supported. The alpha value of RGBA, HSLA, and 4-digit or 8-digit HEX is not supported.

Can I extract colors from an image?

This tool only converts colors you pick yourself or codes you type. Extracting colors after uploading an image or generating a palette automatically is not provided.

Can I convert to CMYK print colors?

CMYK conversion is not provided at present. On-screen RGB-family values and actual printed colors can differ depending on the device and color profile.

Can I convert several color codes at once?

At present it converts one color at a time. Processing a multi-line color list or a file at once is not provided.

If I raise the lightness, can I tell whether text is still readable?

You can check with the color preview, but it does not calculate contrast ratio or accessibility level. Check the actual combination of background and text color with a separate contrast checker.