HEX to RGB - With Contrast Checker & Eyedropper
Convert HEX to RGB, RGBA, HSL, and CMYK instantly. Check WCAG accessibility contrast, preview the color on real buttons and cards, pick a color directly from any image, and export ready-to-use code for CSS, Tailwind, Swift, or Android.
Sample body text
Sample body text
What makes it different
Other converters give you
a number. This gives you a decision.
Accessibility built in, live preview on real UI, eyedropper from any image, and code-ready exports - not just a hex-to-rgb math conversion.
Eyedropper from any image
Upload a screenshot or photo and click any pixel to extract its exact color - instantly converted to every format. No other free converter does this.
click any pixelWCAG contrast built in
Every color is automatically checked against white and black backgrounds for WCAG AA/AAA pass/fail - with a suggested fix if it fails.
accessibility, not an afterthoughtLive preview on real UI
See your color as an actual button, card, badge, and border - not just a flat square. Know how it really looks before you ship it.
buttons, cards, badgesCode-ready exports
Copy your color as a CSS variable, Tailwind class, SwiftUI Color, or Android Color.parseColor() - the exact syntax for your stack.
7 export formatsInstant palette, not one color
Shades, tints, and harmony colors generated automatically - click any swatch to explore further instead of starting over.
exploration, not a dead endColor blindness simulation
See your exact color as it appears under protanopia, deuteranopia, and tritanopia - make sure your palette works for everyone.
real accessibility checkQuick guide
Convert and check a color in seconds
Enter or pick a color
Type a HEX code, use the color picker, or upload an image and click a pixel with the eyedropper.
Check it works
Review the contrast ratio against white and dark backgrounds, and preview the color on real buttons and cards.
Export to your code
Copy the exact syntax for CSS, Tailwind, Swift, or Android - or explore shades and tints first.
HEX to RGB - the conversion and why it matters
A HEX color code like #3B82F6 represents a color using three pairs of hexadecimal digits - one each for red, green, and blue. Each pair ranges from 00 to FF in hexadecimal, which is 0 to 255 in decimal. So 3B becomes 59, 82 becomes 130, and F6 becomes 246 - giving rgb(59, 130, 246).
Why you'd use RGB instead of HEX
HEX is compact and common in design tools, but RGB (and RGBA) is often more useful in code when you need to manipulate individual channels or add transparency. CSS, JavaScript color libraries, and canvas drawing APIs frequently expect RGB or RGBA values directly. HSL is preferable when you want to adjust lightness or saturation predictably - increasing the L value in HSL reliably makes a color lighter, while no such simple adjustment exists in RGB or HEX.
Choosing accessible color combinations
The contrast ratio between two colors is calculated from their relative luminance - a weighted measure of how much light each color reflects, accounting for how the human eye perceives different wavelengths. A pure black-on-white combination has the maximum possible ratio of 21:1. Pastel colors on white backgrounds often fail contrast checks even though they look pleasant, because their luminance is too close to white's.
| WCAG level | Normal text | Large text / UI |
|---|---|---|
| AA (standard) | 4.5:1 minimum | 3:1 minimum |
| AAA (enhanced) | 7:1 minimum | 4.5:1 minimum |
Using the eyedropper for design handoff
A common real-world need: someone sends a screenshot or a competitor's website and asks "what color is that?" Instead of guessing or using a separate browser extension, upload the image directly here and click the exact pixel - the tool extracts the precise color and gives you every format you might need to actually use it.