Color Converter

Convert colors between HEX, RGB (0-255), and HSL (hue 0-360°) — all fields update together.
Useful for web design, CSS, and graphic design color matching.

Type in any field — the others update instantly.

Color can be represented in several formats.

HEX: A 6-digit hexadecimal code (e.g., #FF5733). Each pair of digits represents Red, Green, and Blue (00–FF).

RGB: Red, Green, Blue values from 0 to 255 each.

  • White = rgb(255, 255, 255)
  • Black = rgb(0, 0, 0)
  • Red = rgb(255, 0, 0)

HSL: Hue, Saturation, Lightness.

  • Hue: 0–360 degrees (0=red, 120=green, 240=blue)
  • Saturation: 0–100% (0=gray, 100=full color)
  • Lightness: 0–100% (0=black, 50=normal, 100=white)

Common colors:

Color HEX RGB HSL
Red #FF0000 255, 0, 0 0, 100%, 50%
Green #00FF00 0, 255, 0 120, 100%, 50%
Blue #0000FF 0, 0, 255 240, 100%, 50%
White #FFFFFF 255, 255, 255 0, 0%, 100%

The three formats describe the same color in different languages. RGB is how screens actually work, mixing red, green, and blue light, each channel running 0 to 255 (one byte). HEX is just RGB written in base-16: the two digits after the hash are red, the next two green, the last two blue, so #FF0000 is full red and nothing else. Once that clicks, reading a hex color by eye gets easy.

HSL is the format built for humans. Instead of mixing light, it describes a color the way people think about it: a hue around the color wheel, how saturated (vivid) it is, and how light or dark. That makes it far easier to adjust, since you can darken a color by dropping the lightness without recomputing three RGB values, or find a matching shade by nudging the hue. Designers reach for HSL precisely because tweaking one intuitive number beats juggling three channels.


How we build and check this converter

This converter runs entirely in your browser, so the numbers you enter stay on your device. The math behind it is written by hand and tested against worked examples and standard references before the page goes live.

SuperGlobalCalculator is independently built and maintained. See how we build and verify our calculators.

Embed This Calculator

Copy the code below and paste it into your website or blog.
The calculator will work directly on your page.