[{"data":1,"prerenderedAt":1125},["ShallowReactive",2],{"guide-hex-to-rgb-guide":3},{"id":4,"title":5,"body":6,"date":1115,"description":1116,"extension":1117,"meta":1118,"navigation":1119,"path":1120,"readingTime":1121,"seo":1122,"stem":1123,"__hash__":1124},"guides\u002Fguides\u002Fhex-to-rgb-guide.md","HEX to RGB: Understanding Color Code Conversions",{"type":7,"value":8,"toc":1102},"minimark",[9,14,23,26,68,72,100,103,176,179,183,193,278,295,299,302,309,381,384,445,449,455,462,470,476,503,511,517,528,532,538,550,620,631,635,645,648,700,760,769,832,845,849,852,857,868,873,889,1023,1032,1036,1064,1068,1076,1080,1098],[10,11,13],"h2",{"id":12},"what-are-hex-color-codes","What Are HEX Color Codes",[15,16,17,18,22],"p",{},"HEX color codes represent colors using the hexadecimal numbering system—base 16 instead of the base 10 you use every day. Each code starts with a ",[19,20,21],"code",{},"#"," followed by six characters: two for red, two for green, and two for blue.",[15,24,25],{},"Computers store color as three channels of light intensity. Hexadecimal is a convenient shorthand because each byte (0–255) maps neatly to exactly two hex digits (00–FF). That compactness is why HEX became the default color format on the web.",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-css shiki shiki-themes github-light github-dark","\u002F* Same coral color *\u002F\n.hero { color: #FF7F50; }\n","css","",[19,34,35,44],{"__ignoreMap":32},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sJ8bj","\u002F* Same coral color *\u002F\n",[36,45,47,51,55,59,62,65],{"class":38,"line":46},2,[36,48,50],{"class":49},"sScJk",".hero",[36,52,54],{"class":53},"sVt8B"," { ",[36,56,58],{"class":57},"sj4cs","color",[36,60,61],{"class":53},": ",[36,63,64],{"class":57},"#FF7F50",[36,66,67],{"class":53},"; }\n",[10,69,71],{"id":70},"how-the-hexadecimal-system-works","How the Hexadecimal System Works",[15,73,74,75,78,79,82,83,78,86,89,90,92,93,95,96,99],{},"The hex digits run from ",[19,76,77],{},"0"," to ",[19,80,81],{},"9",", then ",[19,84,85],{},"A",[19,87,88],{},"F",". The value ",[19,91,85],{}," equals 10 in decimal, ",[19,94,88],{}," equals 15, and ",[19,97,98],{},"FF"," equals 255. This range maps perfectly to one byte—the same range each RGB channel uses.",[15,101,102],{},"To convert a two-digit hex pair to decimal, multiply the first digit by 16 and add the second:",[104,105,106,122],"table",{},[107,108,109],"thead",{},[110,111,112,116,119],"tr",{},[113,114,115],"th",{},"Hex Pair",[113,117,118],{},"Calculation",[113,120,121],{},"Decimal",[123,124,125,138,151,164],"tbody",{},[110,126,127,132,135],{},[128,129,130],"td",{},[19,131,98],{},[128,133,134],{},"(15 × 16) + 15",[128,136,137],{},"255",[110,139,140,145,148],{},[128,141,142],{},[19,143,144],{},"80",[128,146,147],{},"(8 × 16) + 0",[128,149,150],{},"128",[110,152,153,158,161],{},[128,154,155],{},[19,156,157],{},"0A",[128,159,160],{},"(0 × 16) + 10",[128,162,163],{},"10",[110,165,166,171,174],{},[128,167,168],{},[19,169,170],{},"00",[128,172,173],{},"(0 × 16) + 0",[128,175,77],{},[15,177,178],{},"Understanding this math makes every HEX-to-RGB conversion straightforward.",[10,180,182],{"id":181},"three-digit-vs-six-digit-hex","Three-Digit vs Six-Digit HEX",[15,184,185,186,78,189,192],{},"CSS supports a three-digit shorthand when both digits in each pair are identical. The browser expands ",[19,187,188],{},"#RGB",[19,190,191],{},"#RRGGBB"," by duplicating each digit.",[104,194,195,208],{},[107,196,197],{},[110,198,199,202,205],{},[113,200,201],{},"Shorthand",[113,203,204],{},"Expanded",[113,206,207],{},"Equivalents",[123,209,210,227,244,261],{},[110,211,212,217,222],{},[128,213,214],{},[19,215,216],{},"#F00",[128,218,219],{},[19,220,221],{},"#FF0000",[128,223,224],{},[19,225,226],{},"rgb(255, 0, 0)",[110,228,229,234,239],{},[128,230,231],{},[19,232,233],{},"#0F0",[128,235,236],{},[19,237,238],{},"#00FF00",[128,240,241],{},[19,242,243],{},"rgb(0, 255, 0)",[110,245,246,251,256],{},[128,247,248],{},[19,249,250],{},"#FFF",[128,252,253],{},[19,254,255],{},"#FFFFFF",[128,257,258],{},[19,259,260],{},"rgb(255, 255, 255)",[110,262,263,268,273],{},[128,264,265],{},[19,266,267],{},"#3A9",[128,269,270],{},[19,271,272],{},"#33AA99",[128,274,275],{},[19,276,277],{},"rgb(51, 170, 153)",[15,279,280,281,283,284,287,288,291,292,294],{},"Not every color has a shorthand. ",[19,282,64],{}," (coral) cannot be shortened because each pair contains different digits (",[19,285,286],{},"7F"," is not ",[19,289,290],{},"77"," or ",[19,293,98],{},").",[10,296,298],{"id":297},"the-rgb-color-model","The RGB Color Model",[15,300,301],{},"RGB stands for Red, Green, Blue—the three primary colors of light. Screens mix these channels additively: more light means a brighter color. Each channel ranges from 0 (no light) to 255 (full intensity).",[15,303,304,305,308],{},"The RGB model gives you 256 × 256 × 256 = 16,777,216 possible colors. In CSS, you write RGB using the ",[19,306,307],{},"rgb()"," function:",[27,310,312],{"className":29,"code":311,"language":31,"meta":32,"style":32},".alert { color: rgb(255, 0, 0); }     \u002F* Red *\u002F\n.ocean { color: rgb(0, 119, 190); }   \u002F* Deep blue *\u002F\n",[19,313,314,348],{"__ignoreMap":32},[36,315,316,319,321,323,325,328,331,333,336,338,340,342,345],{"class":38,"line":39},[36,317,318],{"class":49},".alert",[36,320,54],{"class":53},[36,322,58],{"class":57},[36,324,61],{"class":53},[36,326,327],{"class":57},"rgb",[36,329,330],{"class":53},"(",[36,332,137],{"class":57},[36,334,335],{"class":53},", ",[36,337,77],{"class":57},[36,339,335],{"class":53},[36,341,77],{"class":57},[36,343,344],{"class":53},"); }     ",[36,346,347],{"class":42},"\u002F* Red *\u002F\n",[36,349,350,353,355,357,359,361,363,365,367,370,372,375,378],{"class":38,"line":46},[36,351,352],{"class":49},".ocean",[36,354,54],{"class":53},[36,356,58],{"class":57},[36,358,61],{"class":53},[36,360,327],{"class":57},[36,362,330],{"class":53},[36,364,77],{"class":57},[36,366,335],{"class":53},[36,368,369],{"class":57},"119",[36,371,335],{"class":53},[36,373,374],{"class":57},"190",[36,376,377],{"class":53},"); }   ",[36,379,380],{"class":42},"\u002F* Deep blue *\u002F\n",[15,382,383],{},"Modern CSS also accepts space-separated syntax and percentages:",[27,385,387],{"className":29,"code":386,"language":31,"meta":32,"style":32},".alert { color: rgb(255 0 0); }\n.ocean { color: rgb(0% 47% 75%); }\n",[19,388,389,413],{"__ignoreMap":32},[36,390,391,393,395,397,399,401,403,405,408,410],{"class":38,"line":39},[36,392,318],{"class":49},[36,394,54],{"class":53},[36,396,58],{"class":57},[36,398,61],{"class":53},[36,400,327],{"class":57},[36,402,330],{"class":53},[36,404,137],{"class":57},[36,406,407],{"class":57}," 0",[36,409,407],{"class":57},[36,411,412],{"class":53},"); }\n",[36,414,415,417,419,421,423,425,427,429,433,436,438,441,443],{"class":38,"line":46},[36,416,352],{"class":49},[36,418,54],{"class":53},[36,420,58],{"class":57},[36,422,61],{"class":53},[36,424,327],{"class":57},[36,426,330],{"class":53},[36,428,77],{"class":57},[36,430,432],{"class":431},"szBVR","%",[36,434,435],{"class":57}," 47",[36,437,432],{"class":431},[36,439,440],{"class":57}," 75",[36,442,432],{"class":431},[36,444,412],{"class":53},[10,446,448],{"id":447},"hex-to-rgb-step-by-step-conversion","HEX to RGB: Step-by-Step Conversion",[15,450,451,452,454],{},"Converting HEX to RGB is pure arithmetic. Follow these steps for ",[19,453,64],{},":",[15,456,457,461],{},[458,459,460],"strong",{},"Step 1"," — Split the HEX code into three pairs:",[27,463,468],{"className":464,"code":466,"language":467},[465],"language-text","#FF 7F 50\n RR GG BB\n","text",[19,469,466],{"__ignoreMap":32},[15,471,472,475],{},[458,473,474],{},"Step 2"," — Convert each pair from hexadecimal to decimal:",[477,478,479,487,495],"ul",{},[480,481,482,484,485],"li",{},[19,483,98],{}," → (15 × 16) + 15 = ",[458,486,137],{},[480,488,489,491,492],{},[19,490,286],{}," → (7 × 16) + 15 = ",[458,493,494],{},"127",[480,496,497,500,501],{},[19,498,499],{},"50"," → (5 × 16) + 0 = ",[458,502,144],{},[15,504,505,508,509,454],{},[458,506,507],{},"Step 3"," — Write the result as ",[19,510,307],{},[27,512,515],{"className":513,"code":514,"language":467},[465],"#FF7F50 = rgb(255, 127, 80)\n",[19,516,514],{"__ignoreMap":32},[15,518,519,520,522,523,82,525,527],{},"For the three-digit shorthand, expand first, then convert. ",[19,521,267],{}," becomes ",[19,524,272],{},[19,526,277],{},".",[10,529,531],{"id":530},"rgb-to-hex-the-reverse-conversion","RGB to HEX: The Reverse Conversion",[15,533,534,535,454],{},"Going from RGB to HEX is the same formula in reverse. For ",[19,536,537],{},"rgb(0, 119, 190)",[539,540,541,544,547],"ol",{},[480,542,543],{},"Divide each value by 16 to get the first hex digit (quotient).",[480,545,546],{},"The remainder becomes the second hex digit.",[480,548,549],{},"Pad single-digit results with a leading zero.",[104,551,552,569],{},[107,553,554],{},[110,555,556,559,561,564,567],{},[113,557,558],{},"Channel",[113,560,121],{},[113,562,563],{},"÷16 Quotient",[113,565,566],{},"Remainder",[113,568,115],{},[123,570,571,586,602],{},[110,572,573,576,578,580,582],{},[128,574,575],{},"Red",[128,577,77],{},[128,579,77],{},[128,581,77],{},[128,583,584],{},[19,585,170],{},[110,587,588,591,593,596,598],{},[128,589,590],{},"Green",[128,592,369],{},[128,594,595],{},"7",[128,597,595],{},[128,599,600],{},[19,601,290],{},[110,603,604,607,609,612,615],{},[128,605,606],{},"Blue",[128,608,374],{},[128,610,611],{},"11 (B)",[128,613,614],{},"14 (E)",[128,616,617],{},[19,618,619],{},"BE",[15,621,622,623,625,626],{},"Result: ",[19,624,537],{}," = ",[458,627,628],{},[19,629,630],{},"#0077BE",[10,632,634],{"id":633},"alpha-channels-hex8-and-rgba","Alpha Channels: HEX8 and RGBA",[15,636,637,638,641,642,527],{},"Transparency on the web requires an alpha channel. RGB gained alpha support early through ",[19,639,640],{},"rgba()",". HEX followed later with the 8-digit format ",[19,643,644],{},"#RRGGBBAA",[15,646,647],{},"Alpha values map like this:",[104,649,650,662],{},[107,651,652],{},[110,653,654,657,659],{},[113,655,656],{},"Alpha",[113,658,121],{},[113,660,661],{},"HEX",[123,663,664,676,688],{},[110,665,666,669,672],{},[128,667,668],{},"0% (transparent)",[128,670,671],{},"0.0",[128,673,674],{},[19,675,170],{},[110,677,678,681,684],{},[128,679,680],{},"50%",[128,682,683],{},"0.5",[128,685,686],{},[19,687,144],{},[110,689,690,693,696],{},[128,691,692],{},"100% (opaque)",[128,694,695],{},"1.0",[128,697,698],{},[19,699,98],{},[27,701,703],{"className":29,"code":702,"language":31,"meta":32,"style":32},"\u002F* Same semi-transparent blue *\u002F\n.overlay-a { background: rgba(0, 119, 190, 0.5); }\n.overlay-b { background: #0077BE80; }\n",[19,704,705,710,743],{"__ignoreMap":32},[36,706,707],{"class":38,"line":39},[36,708,709],{"class":42},"\u002F* Same semi-transparent blue *\u002F\n",[36,711,712,715,717,720,722,725,727,729,731,733,735,737,739,741],{"class":38,"line":46},[36,713,714],{"class":49},".overlay-a",[36,716,54],{"class":53},[36,718,719],{"class":57},"background",[36,721,61],{"class":53},[36,723,724],{"class":57},"rgba",[36,726,330],{"class":53},[36,728,77],{"class":57},[36,730,335],{"class":53},[36,732,369],{"class":57},[36,734,335],{"class":53},[36,736,374],{"class":57},[36,738,335],{"class":53},[36,740,683],{"class":57},[36,742,412],{"class":53},[36,744,746,749,751,753,755,758],{"class":38,"line":745},3,[36,747,748],{"class":49},".overlay-b",[36,750,54],{"class":53},[36,752,719],{"class":57},[36,754,61],{"class":53},[36,756,757],{"class":57},"#0077BE80",[36,759,67],{"class":53},[15,761,762,763,765,766,768],{},"Modern CSS lets you add alpha to ",[19,764,307],{}," directly—no separate ",[19,767,640],{}," needed:",[27,770,772],{"className":29,"code":771,"language":31,"meta":32,"style":32},".overlay-c { background: rgb(0 119 190 \u002F 0.5); }\n.overlay-c { background: rgb(0 119 190 \u002F 50%); }\n",[19,773,774,804],{"__ignoreMap":32},[36,775,776,779,781,783,785,787,789,791,794,797,800,802],{"class":38,"line":39},[36,777,778],{"class":49},".overlay-c",[36,780,54],{"class":53},[36,782,719],{"class":57},[36,784,61],{"class":53},[36,786,327],{"class":57},[36,788,330],{"class":53},[36,790,77],{"class":57},[36,792,793],{"class":57}," 119",[36,795,796],{"class":57}," 190",[36,798,799],{"class":53}," \u002F ",[36,801,683],{"class":57},[36,803,412],{"class":53},[36,805,806,808,810,812,814,816,818,820,822,824,826,828,830],{"class":38,"line":46},[36,807,778],{"class":49},[36,809,54],{"class":53},[36,811,719],{"class":57},[36,813,61],{"class":53},[36,815,327],{"class":57},[36,817,330],{"class":53},[36,819,77],{"class":57},[36,821,793],{"class":57},[36,823,796],{"class":57},[36,825,799],{"class":53},[36,827,499],{"class":57},[36,829,432],{"class":431},[36,831,412],{"class":53},[15,833,834,835,837,838,840,841,844],{},"Browser support for ",[19,836,644],{}," is good across modern browsers but absent in older Internet Explorer. Use ",[19,839,640],{}," or the modern ",[19,842,843],{},"rgb() \u002F alpha"," syntax for maximum compatibility.",[10,846,848],{"id":847},"choosing-between-hex-and-rgb-in-css","Choosing Between HEX and RGB in CSS",[15,850,851],{},"Both formats produce identical colors—the difference is readability and workflow.",[15,853,854],{},[458,855,856],{},"Use HEX when:",[477,858,859,862,865],{},[480,860,861],{},"You need compact, copy-paste-friendly values",[480,863,864],{},"Working in design tools that export HEX by default",[480,866,867],{},"Writing legacy code that must support old browsers",[15,869,870],{},[458,871,872],{},"Use RGB when:",[477,874,875,883,886],{},[480,876,877,878,291,880,882],{},"You need alpha transparency (",[19,879,640],{},[19,881,843],{},")",[480,884,885],{},"Generating colors programmatically in JavaScript",[480,887,888],{},"You want explicit channel clarity for team readability",[27,890,894],{"className":891,"code":892,"language":893,"meta":32,"style":32},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Programmatic color generation is easier with RGB\nfunction lighten(r, g, b, amount) {\n  return `rgb(${Math.min(r + amount, 255)}, ${Math.min(g + amount, 255)}, ${Math.min(b + amount, 255)})`;\n}\n","javascript",[19,895,896,901,933,1017],{"__ignoreMap":32},[36,897,898],{"class":38,"line":39},[36,899,900],{"class":42},"\u002F\u002F Programmatic color generation is easier with RGB\n",[36,902,903,906,909,911,915,917,920,922,925,927,930],{"class":38,"line":46},[36,904,905],{"class":431},"function",[36,907,908],{"class":49}," lighten",[36,910,330],{"class":53},[36,912,914],{"class":913},"s4XuR","r",[36,916,335],{"class":53},[36,918,919],{"class":913},"g",[36,921,335],{"class":53},[36,923,924],{"class":913},"b",[36,926,335],{"class":53},[36,928,929],{"class":913},"amount",[36,931,932],{"class":53},") {\n",[36,934,935,938,942,945,947,950,952,954,957,960,962,964,966,969,971,973,975,977,979,981,983,985,987,989,991,993,995,997,999,1001,1003,1005,1007,1009,1011,1014],{"class":38,"line":745},[36,936,937],{"class":431},"  return",[36,939,941],{"class":940},"sZZnC"," `rgb(${",[36,943,944],{"class":53},"Math",[36,946,527],{"class":940},[36,948,949],{"class":49},"min",[36,951,330],{"class":940},[36,953,914],{"class":53},[36,955,956],{"class":431}," +",[36,958,959],{"class":53}," amount",[36,961,335],{"class":940},[36,963,137],{"class":57},[36,965,882],{"class":940},[36,967,968],{"class":940},"}, ${",[36,970,944],{"class":53},[36,972,527],{"class":940},[36,974,949],{"class":49},[36,976,330],{"class":940},[36,978,919],{"class":53},[36,980,956],{"class":431},[36,982,959],{"class":53},[36,984,335],{"class":940},[36,986,137],{"class":57},[36,988,882],{"class":940},[36,990,968],{"class":940},[36,992,944],{"class":53},[36,994,527],{"class":940},[36,996,949],{"class":49},[36,998,330],{"class":940},[36,1000,924],{"class":53},[36,1002,956],{"class":431},[36,1004,959],{"class":53},[36,1006,335],{"class":940},[36,1008,137],{"class":57},[36,1010,882],{"class":940},[36,1012,1013],{"class":940},"})`",[36,1015,1016],{"class":53},";\n",[36,1018,1020],{"class":38,"line":1019},4,[36,1021,1022],{"class":53},"}\n",[15,1024,1025,1026,1031],{},"For design systems and theming, consider HSL instead—it makes creating color scales far more intuitive. See our ",[1027,1028,1030],"a",{"href":1029},"\u002Fguides\u002Fhex-rgb-hsl-explained","HEX, RGB, and HSL Color Formats Explained"," guide for a deeper comparison.",[10,1033,1035],{"id":1034},"key-takeaways","Key Takeaways",[477,1037,1038,1041,1044,1050,1058,1061],{},[480,1039,1040],{},"HEX and RGB describe the same color data in different notations",[480,1042,1043],{},"Each HEX pair maps to one decimal channel value (0–255)",[480,1045,1046,1047,1049],{},"Three-digit HEX (",[19,1048,188],{},") is shorthand—each digit is duplicated",[480,1051,1052,1053,1055,1056],{},"8-digit HEX (",[19,1054,644],{},") adds alpha but has poorer legacy support than ",[19,1057,640],{},[480,1059,1060],{},"Choose HEX for compactness, RGB for transparency and programmatic use",[480,1062,1063],{},"The conversion formula is simple: split HEX pairs, convert each from base-16 to base-10",[10,1065,1067],{"id":1066},"try-it-yourself","Try It Yourself",[15,1069,1070,1071,1075],{},"Convert between HEX and RGB instantly with our free ",[1027,1072,1074],{"href":1073},"\u002Ftools\u002Fcolor-converter","Color Converter"," tool. Paste any color code and get every format at once.",[10,1077,1079],{"id":1078},"related-guides","Related Guides",[477,1081,1082,1088,1094],{},[480,1083,1084],{},[1027,1085,1087],{"href":1086},"\u002Fguides\u002Fcolor-models-explained","Color Models Explained: HEX, RGB, HSL, and CMYK",[480,1089,1090],{},[1027,1091,1093],{"href":1092},"\u002Fguides\u002Fcss-color-values","CSS Color Values: Named, HEX, RGB, HSL, and Modern Functions",[480,1095,1096],{},[1027,1097,1030],{"href":1029},[1099,1100,1101],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":32,"searchDepth":46,"depth":46,"links":1103},[1104,1105,1106,1107,1108,1109,1110,1111,1112,1113,1114],{"id":12,"depth":46,"text":13},{"id":70,"depth":46,"text":71},{"id":181,"depth":46,"text":182},{"id":297,"depth":46,"text":298},{"id":447,"depth":46,"text":448},{"id":530,"depth":46,"text":531},{"id":633,"depth":46,"text":634},{"id":847,"depth":46,"text":848},{"id":1034,"depth":46,"text":1035},{"id":1066,"depth":46,"text":1067},{"id":1078,"depth":46,"text":1079},"2026-05-28","Learn how HEX and RGB color codes work, master the conversion algorithm, and choose the right format for your CSS projects.","md",{"immutable":1119},true,"\u002Fguides\u002Fhex-to-rgb-guide",6,{"title":5,"description":1116},"guides\u002Fhex-to-rgb-guide","VgR7GmMcdCdA186A0LbGa1kWKfjdwtffgcDEz_ikfpw",1780401327665]