Hex to RGB Color Converter
Type a color as hex, rgb() or hsl(). You get the color in all three forms and the WCAG contrast ratio against white and black text.
Your numbers
How we calculate it
A hex color is three bytes written in base 16: red, green and blue. #1E90FF is red 1E = 30, green 90 = 144 and blue FF = 255, which is rgb(30, 144, 255). HSL describes the same color as a hue angle from 0 to 360 degrees, a saturation percentage and a lightness percentage. Here that is hsl(210, 100%, 56%), rounded to whole numbers.
Contrast follows the WCAG 2 definition. Each channel is turned into a linear value, the relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B, and the ratio is (lighter + 0.05) ÷ (darker + 0.05). It runs from 1:1 to 21:1. Normal text needs at least 4.5:1 for level AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA.
Assumptions and limits
- Accepted forms are #RGB, #RRGGBB (the # is optional), rgb(r, g, b) with whole numbers from 0 to 255 and hsl(h, s%, l%). Color names and transparency (alpha) are not supported.
- HSL values are rounded to whole numbers, so converting hsl back to hex can differ by one or two steps in a channel.
- The pass and fail marks apply the exact ratio, not the rounded one that is shown. WCAG sets the thresholds. Large text means 18 pt or more, or 14 pt or more in bold.
Frequently asked questions
How do I convert hex to RGB?
Split the hex into three pairs and convert each from base 16. #FF8800 is FF = 255, 88 = 136 and 00 = 0, so rgb(255, 136, 0).
What contrast ratio do I need for accessible text?
WCAG level AA needs 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 and 4.5:1. For example #767676 on white is 4.54:1, the lightest gray that passes AA for normal text.
What is HSL?
HSL stands for hue, saturation and lightness. The hue is the position on the color wheel in degrees (0 red, 120 green, 240 blue), saturation is how vivid the color is and lightness runs from 0% black to 100% white.
Related calculators
- PX to REM ConverterEnter a size, choose the direction and the base font size.
- Aspect Ratio CalculatorEnter the original width and height, then the new width or the new height you want.
- Binary and Hex ConverterType a whole number, say which base it is in and which base you want.
- Percent Change CalculatorEnter a starting value and an ending value to see the percent increase or decrease and the absolute difference.
Worked example (a fixed example using the starting numbers, it does not change as you type)
Inputs: Color (hex, rgb() or hsl()) = #1E90FF.
- HEX #1E90FF
- RGB rgb(30, 144, 255)
- HSL hsl(210, 100%, 56%)
- Contrast with white text 3.24:1
- Contrast with black text 6.49:1
Embed this calculator
Add this calculator to your own page. Paste the code where you want it. The small link keeps credit to the source.