HEX to RGB Color Converter
Convert an opaque sRGB color as you type, copy modern CSS values, and see its WCAG contrast against white and black.
- Features others lock behind paywalls
- Fewer clicks, keyboard friendly
WCAG contrast
Opaque color against a solid white or black background.
On white
3.68:1
On black
5.71:1
Copy-ready CSS values
HEX color
#3B82F6
RGB channels
rgb(59 130 246)
HSL
hsl(217.2 91.2% 59.8%)
OKLCH
oklch(62.3% 0.188 259.8)
How to use
- Paste a 3- or 6-digit HEX value, choose a color, or enter the three RGB channels.
- Read the normalized HEX, RGB, HSL, and OKLCH CSS values as they update.
- Use the Copy button beside the format needed by your stylesheet or design token.
- Check the contrast ratios and AA or AAA result for white and black backgrounds.
HEX and RGB describe the same opaque sRGB color
A six-digit HEX code has one two-digit base-16 value for each sRGB channel: #3B82F6 means 3B = 59, 82 = 130, and F6 = 246, or rgb(59 130 246). Each RGB channel has 256 possible integer values, from 0 to 255, so an opaque 24-bit RGB color has 256³ = 16,777,216 possible combinations. The three-digit CSS shorthand #3BF expands to #33BBFF.
CSS Color Module Level 4 defines hexadecimal and rgb() notation for sRGB colors. This converter intentionally accepts only opaque #RGB and #RRGGBB values; alpha compositing needs a known background before contrast can be calculated correctly.
Why use HSL and OKLCH?
HSL writes the same sRGB color as hue (0–360 degrees), saturation, and lightness, which is convenient for a quick visual adjustment. HSL is not perceptually uniform: changing lightness by the same amount does not always look equally bright.
OKLCH is the cylindrical form of Oklab: L is perceived lightness, C is chroma, and h is hue in degrees. CSS Color 4 includes oklch() notation. The result here is calculated from the selected sRGB color and rounded for readable CSS; it does not create colors outside the sRGB gamut.
Reading the WCAG contrast result
The contrast ratio compares relative luminance after sRGB is converted to linear light: (lighter + 0.05) / (darker + 0.05). It ranges from 1:1 for identical colors to 21:1 for black and white.
Under WCAG 2.2, normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs at least 3:1 for AA and 4.5:1 for AAA. This tool checks an opaque foreground against solid white and black only; an image, gradient, transparency, font weight, and actual text size still need review in the final interface.
Frequently asked questions
How do I convert HEX to RGB?
Split a six-digit HEX code into three pairs and read each pair in base 16. For example, #3B82F6 becomes 0x3B = 59, 0x82 = 130, and 0xF6 = 246, so its CSS RGB form is rgb(59 130 246).
Is #RGB the same as #RRGGBB?
A three-digit HEX value is CSS shorthand that repeats every digit: #3BF expands to #33BBFF. It can represent only colors whose two digits in each 8-bit RGB channel are the same.
What contrast ratio passes WCAG AA?
WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal AA text and 3:1 for large AA text. For AAA, the thresholds are 7:1 for normal text and 4.5:1 for large text.
Does this color converter upload or share my color values?
No. Conversion and contrast calculations run in the browser. The last unfinished value is stored only in this browser so it can be restored after a refresh.
Related tools
Updated 2026-10-15