Color Converter Online

The same color can be written as a HEX string, an RGB triple, an HSL triple, or a CSS keyword — and different parts of a project prefer different notations. Design tools hand you HEX, CSS variables often use RGB, and HSL is the one you reach for when you want to nudge a shade lighter or more saturated without guessing new numbers. This tool converts a color between all of them so you can copy the exact format your code expects instead of eyeballing it.

HEX and RGB describe a color by its red, green, and blue channels; HSL describes it by hue, saturation, and lightness, which maps far better to how people think about adjusting color. Converting between them is lossless in principle, but because each channel is stored as an integer, a HEX → HSL → HEX round trip can occasionally shift by one unit from rounding.

How to use it

  1. Enter a color in any supported format: a HEX code, an rgb() value, an hsl() value, or a CSS color name.
  2. Read the equivalent value in every other format from the output.
  3. Copy the notation your stylesheet or code needs.
  4. Adjust the HSL lightness or saturation when you want a related shade of the same hue.

Common use cases

Examples

HEX to RGB and HSL

Input #3498db

Output rgb(52, 152, 219) · hsl(204, 70%, 53%)

All three describe the same blue; HSL makes it obvious how to lighten or mute it.

CSS name to HEX

Input tomato

Output #ff6347 · rgb(255, 99, 71)

CSS color keywords map to fixed values you can drop straight into code.

Frequently asked questions

What is the difference between HEX, RGB, and HSL?
HEX and RGB both encode red, green, and blue channels (HEX in base-16, RGB in decimal). HSL instead uses hue, saturation, and lightness, which is easier to reason about when tweaking a shade.
How do I represent transparency?
Add an alpha channel: eight-digit HEX (#RRGGBBAA), or the rgba()/hsla() functions where the last value is opacity from 0 to 1.
Can a conversion lose precision?
Channels are rounded to whole numbers, so a HEX → HSL → HEX round trip can shift by one unit. The visible difference is negligible.
Are CSS color names reliable?
Yes. The 147 standard CSS color keywords map to fixed values and are supported in every modern browser.

Related tools