HEX to RGB Converter — Convert Color Codes Free in Your Browser

Colour codes appear in different formats depending on where you’re working — CSS might use HEX, design software might output RGB, and some workflows require HSL. SimpleTools HEX RGB Converter converts between all three instantly, with one-click copy for each format.

The Three Main CSS Color Formats

HEX (#RRGGBB)

Hexadecimal colour codes are the most widely recognised format in web development. Each pair of hex digits represents a value from 0–255 for red, green, and blue.

• #FF0000 = pure red
• #00FF00 = pure green
• #0000FF = pure blue
• #FFFFFF = white
• #000000 = black

Short form #RGB is also valid: #F00 = #FF0000.

RGB (rgb(R, G, B))

The rgb() CSS function takes three integers from 0–255:

• rgb(255, 0, 0) = red
• rgba(255, 0, 0, 0.5) = semi-transparent red

HSL (hsl(H, S%, L%))

Hue, Saturation, Lightness — a more intuitive model for humans:

• Hue (0–360°): the colour angle on the colour wheel
• Saturation (0–100%): how vivid the colour is (0% = grey)
• Lightness (0–100%): how light or dark (0% = black, 100% = white)

hsl(0, 100%, 50%) = pure red; hsl(0, 100%, 75%) = light red

Why Convert Between Formats?

• Copying from a design file: Figma and Sketch often provide RGB values; your CSS needs HEX or HSL
• Building colour palettes: HSL makes it easy to create consistent shades by varying only Lightness
• Matching brand colours: Briefs often specify colours in HEX; code may need RGB
• Reading legacy CSS: Older codebases use HEX; you want to understand or modify the colour using HSL logic

Why Do It in the Browser?

Colour conversion is pure mathematics — there’s no reason to involve a server. But beyond the technical argument:

✅ Instant results — no round-trip latency
✅ Works offline — no internet needed
✅ One-click copy for HEX, RGB, and HSL separately
✅ Visual preview — see the actual colour, not just numbers

How It Works

The conversions are standard mathematical transformations:

HEX → RGB: Parse each pair of hex digits as a base-16 integer.

RGB → HSL: Normalise R, G, B to 0–1, find the min/max components to compute hue, saturation, and lightness using the standard formula.

HSL → RGB: Apply the inverse formula to reconstruct R, G, B from hue, saturation, and lightness.

All of this runs as pure JavaScript in your browser tab with zero external dependencies.

How to Use the HEX RGB Converter

1. Go to simpletools.one/hex-rgb-converter
2. Enter a colour value in any field:
   • Type a HEX code like #3498db or 3498db
   • Type RGB values like 52, 152, 219
   • Type HSL values like 204, 70%, 53%
3. All three formats update instantly
4. Click Copy next to HEX, RGB, or HSL to copy the value

Quick Conversion Reference

Who Uses This Tool?

• Front-end developers converting design tokens to CSS
• Designers checking cross-format colour equivalence
• Anyone building a Tailwind or CSS custom property theme who needs consistent colour references

Convert your colour codes at simpletools.one/hex-rgb-converter — instant, offline-capable, completely free.