Color Converter

How Color Converter Works

This tool keeps three common ways of describing a color -- HEX code, RGB (red/green/blue), and HSL (hue/saturation/lightness) -- in sync with each other. Edit any field, drag any slider, and every other representation updates instantly along with a live swatch preview, so you can move freely between whichever format a design tool or codebase needs.

Formula & Method

HEX ↔ RGB conversion is a straight base-16 (hexadecimal) to base-10 conversion of each of the red, green, and blue channels (each 0–255). RGB ↔ HSL uses the standard formulas: lightness is the average of the largest and smallest of the R/G/B values (each scaled to 0–1); saturation depends on how far apart the largest and smallest channel values are relative to the lightness; and hue is derived from which channel is largest and the relative difference between the other two, expressed as an angle from 0° to 360° around the color wheel.

Worked Example

The default color, HEX #4F46E5, converts to RGB(79, 70, 229) and HSL(243°, 75%, 59%) -- a vivid indigo/blue-violet. Changing just the lightness slider down to a lower value, with hue and saturation unchanged, would darken this same hue toward navy while keeping RGB proportions consistent with a lower blend of white.

Frequently Asked Questions

Why do my RGB and HSL numbers look so different for the same color?

They're just two different coordinate systems describing the same point in color space. RGB expresses a color as an amount of red, green, and blue light; HSL expresses the same color as a position on a color wheel (hue), how vivid it is (saturation), and how light or dark it is (lightness). Both fully describe the color -- neither is more "correct."

Does this tool support transparency (alpha)?

No -- it works with fully opaque colors only, in 6-digit HEX, RGB, and HSL. If you need an alpha channel, you'd add it separately in your CSS or design tool as RGBA/HSLA/8-digit HEX once you have the base color from here.

Can I type a 3-digit HEX code like #FFF?

Yes -- the tool automatically expands shorthand 3-digit HEX codes (like #FFF) to their full 6-digit equivalent (#FFFFFF) before converting.

Why does the HEX code show letters as well as numbers?

HEX is base-16, so each channel (0-255) is written using digits 0-9 plus letters A-F to represent values 10 through 15. That lets each channel be written compactly as exactly two characters.