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 and the others update instantly.
The panel below adds the shades and the complement, plus the contrast figures for text use.
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.
The panel shows both of those moves for whatever you type in. The five shades are the same hue and saturation with lightness stepped by 15 either way, which is how a UI palette is usually built: one brand colour, five tints, nothing hand-picked. The complement is the hue turned a half circle. Try building the same five in RGB by eye and the point makes itself.
One caveat on the contrast figures. They come from the WCAG relative luminance formula, which weights green far more heavily than blue (0.7152 against 0.0722) because the eye is much more sensitive to it. That is why a saturated blue can look bright and still fail as body text, and why a mid yellow passes on black but almost never on white.
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.