Hex Color Converter
Convert between hex, RGB, and HSL color formats. Live preview, contrast checker, and CSS code — all in your browser.
Client-Side Only
•
Live Preview
Need a value now? Use the converter below.
For the underlying notation, formulas, and accessibility method, read
how hex color codes work.
Pick a color
CSS color values
—
—
—
WCAG text contrast
Ratios use the WCAG 2.2 relative-luminance formula. AA requires 4.5:1 for normal text or 3:1 for large text.
vs White (#FFF)
—
vs Black (#000)
—
Worked example: convert #FF5733
This page is the interactive tool; the separate hex color reference guide explains the notation and formulas in depth.
| Representation | Verified result | How it was derived |
|---|---|---|
| Hex | #FF5733 | FF, 57, 33 are the red, green, and blue bytes. |
| RGB | rgb(255, 87, 51) | Base-16 pairs converted to decimal. |
| HSL | hsl(10.59 100% 60%) | sRGB converted with the CSS Color 4 HSL algorithm. |
| On white | 3.15:1 | Passes AA only for large text; fails AA for normal text. |
| On black | 6.66:1 | Passes AA for normal text; falls short of 7:1 AAA for normal text. |
Primary references: W3C CSS Color 4 hex notation and WCAG 2.2 Contrast (Minimum). Values were recalculated and covered by automated tests on 17 July 2026.
Frequently Asked Questions
How do I convert a hex color to RGB?
Enter a hex color code (e.g., #FF5733) and the tool instantly shows RGB values (255, 87, 51). Each pair of hex digits represents one color channel: RR=red, GG=green, BB=blue. The conversion is: decimal_value = parseInt(hex_pair, 16).
What is the difference between hex and RGB color formats?
Hex colors use base-16 notation (#RRGGBB) — compact and widely used in CSS/HTML. RGB uses decimal values 0-255 for each channel — easier to read and adjust. HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%) — most intuitive for color picking. All three represent the same colors.
Do I need to include the # symbol?
No. Both "FF5733" and "#FF5733" are accepted. This converter supports opaque 3-digit shorthand (#F53 expands to #FF5533) and 6-digit hex. CSS also defines 4- and 8-digit alpha notation, which the linked reference guide explains.
What is HSL color format?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle (0°=red, 120°=green, 240°=blue). Saturation ranges from gray at 0% to the fullest available chroma at 100%. Lightness ranges from black at 0% to white at 100%; at 100% saturation, 50% produces the fully saturated hue.