Convert colors between HEX, RGB, and HSL

How it works

1. 1

   Edit the hex, RGB or HSL field.

2. 2

   Read the matching values in the other fields.

3. 3

   Paste the converted value into your CSS or design tool.

About the Color Converter

Design tools, CSS and code libraries describe colours in different notations, so moving a brand colour from a Figma file into a stylesheet often means converting it. This converter keeps hex, RGB and HSL values in sync: edit any one and the other two are recalculated, using the standard formulas browsers use for sRGB colours.

What you can do

• Convert between hex, rgb() and hsl() notations.
• Enter three-digit shorthand hex like #369 as well as the full six digits.
• Paste rgb() and hsl() values in the usual CSS form, such as rgb(51, 102, 153).
• Get clear messages when a value cannot be read.

When it works best

• Moving a colour from a design file into CSS in the notation your codebase uses.
• Making lighter or darker shades by editing the lightness in HSL and reading back the hex.
• Checking that a hex code in a brand guide matches the RGB values a printer or developer was given.

Things to know

• Calculations run in your browser.
• Alpha transparency is not supported, so rgba(), hsla() and eight-digit hex codes are not handled.
• HSL values are rounded to whole numbers, so converting back and forth can shift a hex value by one step.
• Newer CSS spaces such as OKLCH, and print colours such as CMYK, are not covered. To sample a colour from an image, use Color Picker from Image.

Frequently asked questions