Convert hex color codes to RGB and HSL values and back, with a live color preview and ready-to-copy CSS.
How hex color codes work
A hex color like #5B2A60 is three pairs of hexadecimal (base-16) digits: red, green and blue. Each pair ranges from 00 (0) to FF (255).
#5B2A60 → 5B = 91 (red), 2A = 42 (green), 60 = 96 (blue) → rgb(91, 42, 96)
To convert a pair by hand, multiply the first digit by 16 and add the second, where A = 10, B = 11 up to F = 15. 5B = 5 × 16 + 11 = 91.
Shorthand hex codes
Three-digit codes double each digit: #F80 is the same as #FF8800.
RGB versus HSL
- RGB mixes red, green and blue light, which is how screens display color.
- HSL describes hue (the color angle on a wheel), saturation (intensity) and lightness, which is easier for creating lighter or darker shades of the same color.
Accessible color contrast
The calculator shows the contrast ratio of your color against white and black using the WCAG formula. For normal body text, aim for at least 4.5:1; for large text, at least 3:1.
Frequently asked questions
Are hex codes case-sensitive?
No. #5b2a60 and #5B2A60 are the same color.
What about transparency?
8-digit hex codes (#RRGGBBAA) and rgba() add an alpha channel for transparency. This converter handles the color part.
Related tools
Results are estimates for planning and education only. They are not financial, tax, legal or medical advice. Check important numbers with a qualified professional.