{"id":128,"date":"2026-05-04T19:48:03","date_gmt":"2026-05-04T23:48:03","guid":{"rendered":"https:\/\/simpletool.io\/blog\/?p=128"},"modified":"2026-05-04T19:48:03","modified_gmt":"2026-05-04T23:48:03","slug":"rgb-to-hex","status":"publish","type":"post","link":"https:\/\/simpletool.io\/blog\/rgb-to-hex\/","title":{"rendered":"RGB to HEX Converter: Convert Any Color [2026]"},"content":{"rendered":"
TL;DR:<\/strong> RGB to HEX conversion takes a color expressed as three 0\u2013255 channels (red, green, blue) and outputs a 6-digit hexadecimal code prefixed with #<\/code>. rgb(99, 91, 255)<\/code> becomes #635BFF<\/code>. With an alpha channel, you get an 8-digit HEX: rgba(99, 91, 255, 0.5)<\/code> \u2192 #635BFF80<\/code>. Our free RGB to HEX converter<\/a> handles all common formats \u2014 RGB, RGBA, HSL, HSV, CMYK, OKLCH \u2014 with a live colour swatch, WCAG contrast scores, and named-colour matching.<\/div>\n

Web designers convert colours between RGB and HEX dozens of times a week. A designer hands you an RGB triplet from Figma; a stylesheet uses HEX; a UI library expects HSL; a print spec demands CMYK. Every framework picks its favourite and assumes you’ll convert the rest. Mental math works for greyscale (rgb(255,255,255)<\/code> = #FFFFFF<\/code>) but fails for anything in between \u2014 converting 91 to 5B<\/code> in your head is a recipe for typos.<\/p>\n

Our RGB to HEX converter<\/a> handles every direction (RGB \u2194 HEX \u2194 HSL \u2194 HSV \u2194 CMYK \u2194 OKLCH), preserves alpha channels correctly, and shows a large colour preview alongside every value. Each output also includes the WCAG contrast ratio against pure black and pure white, so you can rule out colours that fail accessibility audits in one glance. This guide covers exactly how the conversion works, why 8-digit HEX matters in modern CSS, and the gotchas that turn a perfect conversion into a wrong one.<\/p>\n

Format reference: RGB, HEX, HSL, OKLCH<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n
Format<\/th>\nExample<\/th>\nBest for<\/th>\n<\/tr>\n<\/thead>\n
HEX<\/strong> (6-digit)<\/td>\n#635BFF<\/code><\/td>\nBrand colours, opaque CSS, copy-paste from Figma<\/td>\n<\/tr>\n
HEX<\/strong> (8-digit, with alpha)<\/td>\n#635BFF80<\/code><\/td>\nTranslucent overlays \u2014 same brevity as HEX<\/td>\n<\/tr>\n
RGB<\/strong><\/td>\nrgb(99, 91, 255)<\/code><\/td>\nProgrammatic generation, design tools<\/td>\n<\/tr>\n
RGBA<\/strong><\/td>\nrgba(99, 91, 255, 0.5)<\/code><\/td>\nTranslucent fills with explicit alpha<\/td>\n<\/tr>\n
HSL<\/strong><\/td>\nhsl(243, 100%, 68%)<\/code><\/td>\nDynamic shade adjustments (modify L only)<\/td>\n<\/tr>\n
HSV \/ HSB<\/strong><\/td>\nhsv(243, 64%, 100%)<\/code><\/td>\nPhotoshop \/ Sketch picker workflow<\/td>\n<\/tr>\n
CMYK<\/strong><\/td>\ncmyk(61%, 64%, 0%, 0%)<\/code><\/td>\nPrint specs only \u2014 never web<\/td>\n<\/tr>\n
OKLCH<\/strong><\/td>\noklch(56% 0.27 270)<\/code><\/td>\nModern CSS, perceptually-uniform palettes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

How the math works<\/h2>\n

RGB to HEX is a straight base-10 to base-16 conversion of three numbers, padded to 2 digits each:<\/p>\n

\/\/ rgb(99, 91, 255) \u2192 #635BFF\r\nconst toHex = (n) => n.toString(16).padStart(2, \"0\").toUpperCase();\r\nconst hex = `#${toHex(99)}${toHex(91)}${toHex(255)}`;\r\n\/\/ \u2192 \"#635BFF\"<\/code><\/pre>\n
For 8-digit HEX with alpha, append a fourth pair scaled from 0\u20131 to 0\u2013255: 0.5 \u00d7 255 = 127.5<\/code> \u2192 rounds to 128 \u2192 0x80<\/code>. Result: #635BFF80<\/code>. Note that 8-digit HEX with alpha is widely supported (Chrome 62+, Firefox 49+, Safari 9.1+) \u2014 well over 95% of users in 2026 \u2014 so you can safely replace rgba(...)<\/code> with 8-digit HEX in modern stylesheets.<\/p>\n
How to convert RGB to HEX in your browser<\/h2>\n
    \n
  1. Open the RGB to HEX converter<\/a><\/li>\n
  2. Pick the colour with the visual picker, OR type a value in any format<\/li>\n
  3. All other formats update in real time below the input<\/li>\n
  4. Copy any result with one click; the colour preview matches what you’ll get on screen<\/li>\n
  5. WCAG contrast scores against black and white show inline \u2014 useful for accessibility checks<\/li>\n<\/ol>\n
    3-digit HEX shorthand and when it works<\/h2>\n
    CSS allows #FFF<\/code> as shorthand for #FFFFFF<\/code>, and #F0A<\/code> for #FF00AA<\/code>. Each digit duplicates: #ABC<\/code> means #AABBCC<\/code>. This works only when each channel pair has identical digits \u2014 #635BFF<\/code> (no duplicate pairs) cannot be expressed in 3-digit form. The shorthand also has a 4-digit alpha variant: #FFF8<\/code> means #FFFFFF88<\/code> \u2014 an alpha of 0x88 (about 53%).<\/p>\n
    Most minifiers expand 3-digit HEX to 6-digit during build, then the gzipped output ends up similar size. Don’t write code that depends on the format \u2014 semantically #FFF<\/code> and #FFFFFF<\/code> are identical.<\/p>\n
    Common gotchas<\/h2>\n