Tint tool
Color Converter
Flip any color between hex, RGB, and HSL.
Any color
HEX
#EA2558
RGB
rgb(234, 37, 88)
HSL
hsl(344, 82%, 53%)
How it works
This color converter accepts a color in hex, rgb(), hsl(), or bare "r, g, b" format and instantly returns all three formats side by side with copy buttons and a live swatch. Hex and RGB are the same numbers in different notation, while HSL is a genuine transformation onto hue, saturation, and lightness — which is why it's the format most people find easiest to reason about when adjusting a color.
When you'd use this
- Translating a design file color into code: converting a hex code from a design tool into the rgb() or hsl() format a specific CSS property or JavaScript library expects.
- Reading a color out of existing CSS: pasting an rgb() or hsl() value found in a stylesheet to get its hex code for use in a design tool or brand document.
- Adjusting a color by feel using HSL: converting to HSL specifically to make a one-number lightness or saturation adjustment, then converting the result back to hex for use elsewhere.
Frequently asked questions
How do I convert HEX to RGB?
Paste the hex code above — #FE7825 returns rgb(254, 120, 37) instantly. Each hex pair is one channel in base 16: FE=254 red, 78=120 green, 25=37 blue.
What is HSL and why use it?
Hue (0–360° on the color wheel), Saturation (0–100% intensity), Lightness (0% black to 100% white). It's the most human-editable format: making a color darker or softer changes one number.
Does the converter accept 3-digit hex codes?
Yes — short hex like #F72 expands each digit (#FF7722) per the CSS standard, along with rgb(), hsl(), and plain comma-separated values.
Are hex and RGB the same color space?
Yes — identical numbers, different notation (base 16 vs base 10). HSL is a different representation of the same sRGB color, so all three describe exactly the same set of colors.
How do I convert RGB to HEX?
Paste or type the rgb() value — rgb(254, 120, 37) returns #FE7825. Each channel (0–255) is converted to a two-digit base-16 pair and the three pairs are joined after the #.
From the blog
Related tools
