Color Converter: HEX to RGB to HSL (and Back)
Type or paste a colour in any format, or use the picker, and get every other format with a preview.
- Works on your device. Nothing is uploaded.
- Free, no watermark
- No signup
How to use
- Type a colour such as #ff5a1f, rgb(255, 90, 31) or hsl(16, 100%, 56%), or use the picker.
- See the swatch and all formats at once.
- Copy the values, and check the contrast before using the colour for text.
Good to know
Accepted inputs: HEX with 3, 4, 6 or 8 digits (#f50, #ff5a1f, #ff5a1f80), rgb() and rgba() with commas or spaces, hsl() and hsla(), or three plain numbers like 255 90 31. Transparency is kept and shown as 8-digit HEX, rgba() and hsla().
HSL values are rounded to whole numbers, as CSS usually shows them, so converting HSL → HEX → HSL can move a value by 1. HEX and RGB are exact.
The contrast ratio uses the WCAG 2 formula. Text needs at least 4.5:1 against its background to be easy to read (3:1 for large headings). Our tangerine #ff5a1f, for example, is about 3.1:1 on white, too low for small text but fine for a button background with dark text.
Questions
How do I convert HEX to RGB?
Paste the HEX value; the RGB value appears below the swatch.
What is HSL?
Hue (0–360°), saturation and lightness. It is easier for making lighter or darker shades.
Does it support transparency?
Yes, through 8-digit HEX, rgba() or hsla().
What contrast do I need for text?
At least 4.5:1 for normal text and 3:1 for large text (WCAG AA).
Can I convert to CMYK for printing?
Not here; screen-to-print conversion depends on the printer profile.