All Guides

How to Convert HEX to RGB and HSL

Color Converter keeps HEX, RGB, and HSL in sync: change any one and the others update immediately, so you can move between whichever format a given tool, codebase, or design file expects.

  1. 1Open the Color Converter tool.
  2. 2Pick a color with the swatch, type a HEX code, set RGB or HSL values directly, or search for it by name.
  3. 3Copy whichever format you need with the copy button next to it.
  4. 4Use the Tints & Shades strip to grab a lighter or darker version of the same color.
Open Color Converter

Frequently asked questions

What's the difference between HEX, RGB, and HSL?

They're three ways of describing the same color. HEX (like #0071e3) is a compact code mostly used in CSS and design tools. RGB spells out red, green, and blue as numbers from 0 to 255. HSL describes a color by hue, saturation, and lightness, which is often more intuitive for adjusting a color by hand, since lightening or desaturating a color is just one number.

How many named colors can I search?

Over 140 standard CSS color names (like "cornflower blue" or "tomato"), the same set recognized by browsers when you use a color name directly in CSS.

How are the tints and shades generated?

By keeping the color's hue and saturation fixed and stepping its lightness up (tints) and down (shades) in HSL. The highlighted swatch in the middle is your current color.

Is my color data sent anywhere?

No. All conversion happens locally in your browser using plain math. Nothing is sent to a server.