RGB to HEX - With Contrast Checker & Eyedropper
Drag the R, G, B sliders or type exact values to get instant HEX, HSL, and CMYK output. Check WCAG accessibility contrast, preview the color on real buttons and cards, pick RGB values straight from an 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.
Drag-to-explore sliders, accessibility built in, live preview on real UI, and code-ready exports.
Drag-to-explore sliders
Adjust R, G, B and watch HEX, contrast, and preview update live - faster than typing a hex code.
visual, not just numericWCAG contrast built in
Every RGB value is automatically checked against white and black backgrounds for WCAG AA/AAA pass/fail.
accessibility, not an afterthoughtLive preview on real UI
See your color as an actual button, card, badge, and border - not just a flat square.
buttons, cards, badgesCode-ready exports
Copy as CSS variable, Tailwind class, SwiftUI Color, or Android Color.parseColor() - the exact syntax for your stack.
7 export formatsEyedropper updates the sliders
Click any pixel in an uploaded image and watch the R, G, B sliders jump to that exact value.
image → sliders → hexColor blindness simulation
See your RGB color under protanopia, deuteranopia, and tritanopia - make sure your palette works for everyone.
real accessibility checkQuick guide
Convert RGB to HEX in seconds
Set your RGB values
Drag the sliders or type exact 0-255 values, or use the eyedropper to pick a color from an uploaded image.
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 HEX value plus the exact syntax for CSS, Tailwind, Swift, or Android.
RGB to HEX - the conversion and why sliders help
RGB describes a color as three values from 0 to 255 - one each for red, green, and blue intensity. Converting to HEX means converting each decimal value to a two-digit hexadecimal number and concatenating them. rgb(59, 130, 246) becomes #3B82F6 because 59 in hex is 3B, 130 is 82, and 246 is F6.
Why sliders beat typing a HEX code directly
If you already have a color and just want its HEX code, typing is fine. But RGB sliders are far better when you're designing a color - nudging the blue channel up by 10 to make a color feel cooler is one drag of a slider, whereas doing the same in HEX requires mental hex-to-decimal math.
What happens with out-of-range RGB values
Each RGB channel must be between 0 and 255. If you type a value outside this range, this tool clamps it to the nearest valid number and shows a brief warning, rather than silently producing an invalid HEX code.
| RGB value | HEX equivalent | Meaning |
|---|---|---|
| 0 | 00 | None of this channel - fully off |
| 128 | 80 | Roughly half intensity |
| 255 | FF | Full intensity - fully on |
Using the eyedropper to reverse-engineer a color
A common real-world need: someone sends a screenshot and asks "what RGB value is that blue?" Upload the image here and click the exact pixel - the R, G, B sliders jump to the extracted values immediately, and every other format updates alongside them.