Convert RGB to Hex
Convert RGB to hex and back with alpha, HSL, HSV, CMYK, named colors, WCAG contrast. Free, offline, client-side.
Convert RGB to hex (and back) with full multi-format output: 6-digit and 3-digit hex, 8-digit with alpha, CSS rgb / rgba / hsl / hsla, HSV, CMYK, closest CSS named color, and WCAG contrast ratios vs black and white with AA / AAA labels for accessibility.
How to Use Convert RGB to Hex
- Three input methods - paste any CSS color string into the text box (
#FF0000/rgb(255,0,0)/red/rebeccapurple), use the native color picker for visual choice, or drag the R/G/B sliders for precise control. All three stay in sync as you adjust any one. - Toggle alpha if you need transparency. The alpha slider (0-255) appears below the RGB sliders. All outputs adapt - hex becomes 8-digit, rgb() becomes rgba(), hsl() becomes hsla().
- Read the multi-format panel. Hex 6-digit (the primary headline), 3-digit shorthand when possible (only for colors like
#FF6633→#F63), 8-digit with alpha, CSS rgb/rgba/hsl/hsla strings, HSV (closer to how artists think), CMYK approximation (for print pre-checks), and the closest CSS named color. - WCAG contrast panel shows the contrast ratio of your color against pure white and pure black, with AA/AAA pass/fail markers. Use it to verify accessibility before shipping a UI color.
- Sample text preview renders your color as a swatch with both white and black sample text overlaid - visual confirmation of which text color reads better at your chosen background.
- Copy or Download. Copy puts the full multi-line report on your clipboard. Download saves
color-report.txtwith every format and contrast value. - Reset restores the default indigo brand color (
#5046E6). Clear empties everything to black.
Frequently Asked Questions
Why so many output formats?
Different contexts want different syntax. CSS uses #FF0000, rgb(255,0,0), or red; print designers think in CMYK; color pickers often use HSL or HSV because hue/saturation/lightness map to human perception better than RGB; embedded systems sometimes want 3-digit shorthand to save bytes. The tool shows them all so you can copy whichever your destination wants.
When can I use the 3-digit shorthand?
Only when each pair of hex digits is identical – #FF6633 can shorten to #F63; #FE6633 cannot. The tool detects this and shows the shorthand row only when applicable. 3-digit hex saves a few bytes in CSS but expands to the 6-digit form at parse time so there’s no rendering difference.
What does the WCAG contrast ratio tell me?
It’s the ratio of relative luminance between two colors, computed per WCAG 2.1. AA passes need ≥4.5:1 for normal text (≥3 for large text); AAA needs ≥7:1 (≥4.5 for large). Pure black on white is 21:1 – maximum. The tool shows your color’s ratio against both pure white and pure black so you can pick the better text color for your background.
What’s “large text” in WCAG?
14 pt bold or 18 pt regular and above. Larger text is easier to read at lower contrast, so WCAG relaxes the minimum ratio from 4.5:1 (AA) to 3:1 for it. Below those sizes, you need the stricter ratio. The tool’s “large AA” pass markers refer to this – useful for choosing colors that work for big headings even if they’d fail for body text.
How accurate is the CMYK conversion?
It’s a simple mathematical approximation (no ICC profile, no ink-specific color management). The values you get are roughly what your screen color would look like printed in standard process inks, but real print houses use color profiles tuned to specific paper and ink combinations. Use the CMYK numbers as a starting point, not a final print spec.
What’s HSV and how is it different from HSL?
Both use Hue (0-360°), but the second and third channels differ. HSL uses Saturation + Lightness – “lightness 50%” means fully saturated, anything above/below dims to white/black. HSV uses Saturation + Value – “value 100%” is fully bright, value drops to black. HSV matches how Photoshop’s color picker works; HSL matches CSS’s hsl() syntax. Same color, different polar coordinates.
How does the “closest CSS named color” work?
Computes the Euclidean distance from your color to each of the 70+ named colors in this tool’s table, picks the nearest. So #FF0500 matches red (distance 5); #7A5BC4 matches mediumpurple (distance 23). The number after Δ is the RGB-space distance – under 30 is usually a visually indistinguishable match.
Can I parse any CSS color?
Supports hex (#FFF / #FFFF / #FFFFFF / #FFFFFFFF), CSS rgb()/rgba() functional syntax with comma separators, and 70+ CSS named colors (red, blue, rebeccapurple, etc.). Does NOT support hsl()/hsla() string parsing (it outputs them but doesn’t parse them – pick via sliders instead), color() function, lab(), lch(), or oklab/oklch.
Is my color data uploaded?
No. All conversion, contrast calculation, and named-color lookup runs in your browser. Open DevTools → Network and confirm zero requests fire – even when you Convert. Safe for proprietary brand colors or in-development UI palettes.
Does it work offline?
Yes. Total bundle is under 22 KB. Once loaded, disconnect and keep using. Useful for design work on planes, in coffee shops with bad Wi-Fi, or wherever you don’t want every color pick logged to a cloud tool.