Color Contrast Checker
A color contrast checker is a tool that compares the relative luminance of two colors. The ratio is (L1 +…
Free hex to RGB converter
Convert HEX colors to RGB, RGBA and HSL and back, with a live color swatch.
Accepts #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(36, 87, 245), rgba(...) and hsl(225, 91%, 55%).
Result
0Red
0Green
0Blue
The free hex to rgb runs in your browser, needs no sign-up and never sends what you type anywhere.
Quick answer
To convert hex to RGB, split the six digit code into three pairs and convert each pair from base 16 to a number from 0 to 255. For example, #2457F5 becomes rgb(36, 87, 245) because 24 = 36, 57 = 87 and F5 = 245. Three digit codes such as #25F double each digit first.
What is a hex to rgb converter?
A hex to RGB converter is a tool that translates a CSS hex color code into its red, green and blue values. Each pair of hex digits is a base 16 number: the first digit × 16 plus the second digit gives a value from 0 to 255 for that channel.
How do you use the Hex to RGB Converter?
- Type or paste a color as HEX, rgb() or hsl(), or pick one with the color picker.
- Set the alpha (opacity) from 0 to 1 if you need a transparent RGBA or 8 digit HEX value.
- See the swatch and the RGB values update instantly.
- Copy all formats at once, or copy only the RGB value.
- Check the contrast hint to choose white or black text on that color.
How do you convert hex to RGB manually?
Split the code into pairs and convert each from base 16: for #2457F5, 24 = 2 × 16 + 4 = 36, 57 = 5 × 16 + 7 = 87, and F5 = 15 × 16 + 5 = 245, so the result is rgb(36, 87, 245). Letters A to F stand for 10 to 15. MDN documents the full hex color syntax.
What is the difference between HEX and RGB?
HEX and RGB describe exactly the same sRGB colors, only written differently: HEX uses base 16 pairs like #FF0000, RGB uses decimal numbers like rgb(255, 0, 0). Browsers treat them the same. HEX is shorter to paste, while rgb() and hsl() are easier to read and adjust by hand.
How do I add transparency to a hex color?
Add a fourth pair for alpha, from 00 (fully transparent) to FF (fully opaque): #2457F580 is about 50% opacity. You can also write rgba(36, 87, 245, 0.5) or rgb(36 87 245 / 50%). All modern browsers support 8 digit hex colors as defined in CSS Color Level 4.
Quick reference
| Color | HEX | RGB |
|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) |
| Black | #000000 | rgb(0, 0, 0) |
| Red | #FF0000 | rgb(255, 0, 0) |
| Green (lime) | #00FF00 | rgb(0, 255, 0) |
| Blue | #0000FF | rgb(0, 0, 255) |
| Mid grey | #808080 | rgb(128, 128, 128) |
Worked example
Example
Example: a brand blue #2457F5 converts to rgb(36, 87, 245) and hsl(225, 91%, 55%). For a 50% overlay you would use rgba(36, 87, 245, 0.5) or #2457F580. The contrast check shows white text at 5.59:1, which passes WCAG AA for normal text, while black text reaches only 3.76:1.
Learn more
Frequently asked questions
What does each pair in a hex code mean?
In #RRGGBB the first pair is red, the second green and the third blue. Each pair runs from 00 (none of that color) to FF (full intensity, 255). An optional fourth pair sets alpha, which controls transparency.
How do I convert RGB back to hex?
Convert each RGB number from 0 to 255 into a two digit base 16 value and join them with a # in front. For example rgb(36, 87, 245) becomes 24, 57 and F5, which gives #2457F5. Paste any rgb() value into the tool to do this instantly.
Is hex color case sensitive?
No. #2457f5 and #2457F5 are the same color in CSS and HTML. Pick one style and use it consistently in your stylesheet so colors are easier to search for and keep tidy.
What is a three digit hex color?
A three digit hex code is shorthand where each digit is doubled: #25F means #2255FF. It only works for colors whose pairs repeat the same digit, so most brand colors need the full six digits.
What is HSL and when should I use it?
HSL describes a color by hue (0 to 360 degrees), saturation and lightness as percentages. It is handy for building lighter or darker shades of a brand color, because you only change the lightness value while hue stays the same.
Do colors affect SEO?
Colors are not a ranking factor, but readable text matters for users and accessibility. Low contrast text frustrates visitors on phones in sunlight. Aim for at least 4.5:1 contrast for body text, as WCAG recommends.
Sources
Facts checked against these official pages. Read how I check facts in my editorial policy.
Related free tools
All free toolsColor Palette Generator
A color palette generator is a tool that turns one base color into a usable set of website colors. It…
CSS Gradient Generator
A CSS gradient generator is a tool that turns your color and angle choices into CSS gradient functions. The…
Want a full audit instead?
Send your website and I will check it for you, free.