[{"data":1,"prerenderedAt":963},["ShallowReactive",2],{"guide-alpha-channel-hex-colors":3},{"id":4,"title":5,"body":6,"date":955,"description":956,"extension":957,"meta":958,"navigation":624,"path":959,"readingTime":584,"seo":960,"stem":961,"__hash__":962},"guides\u002Fguides\u002Falpha-channel-hex-colors.md","8-Digit HEX Colors With Alpha",{"type":7,"value":8,"toc":938},"minimark",[9,14,31,76,95,99,102,148,153,164,315,327,331,334,367,371,385,423,426,430,433,486,489,514,518,522,525,657,661,664,725,729,732,790,794,868,871,875,921,925,934],[10,11,13],"h2",{"id":12},"the-evolution-of-hex-colors","The Evolution of Hex Colors",[15,16,17,18,22,23,26,27,30],"p",{},"For decades, CSS supported only 3-digit and 6-digit hex notation — ",[19,20,21],"code",{},"#RGB"," and ",[19,24,25],{},"#RRGGBB"," — with no way to specify transparency. To add alpha, you had to switch to ",[19,28,29],{},"rgba()"," notation:",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-css shiki shiki-themes github-light github-dark","\u002F* Old approach: mix notation styles *\u002F\nbackground: #ff6600;\nbackground: rgba(255, 102, 0, 0.8); \u002F* must convert hex to decimal *\u002F\n","css","",[19,39,40,49,60],{"__ignoreMap":37},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sJ8bj","\u002F* Old approach: mix notation styles *\u002F\n",[41,50,52,56],{"class":43,"line":51},2,[41,53,55],{"class":54},"sVt8B","background: ",[41,57,59],{"class":58},"s7hpK","#ff6600;\n",[41,61,63,66,70,73],{"class":43,"line":62},3,[41,64,65],{"class":54},"background: rgba(255, 102, 0, 0",[41,67,69],{"class":68},"sScJk",".8",[41,71,72],{"class":54},"); ",[41,74,75],{"class":47},"\u002F* must convert hex to decimal *\u002F\n",[15,77,78,79,83,84,87,88,83,91,94],{},"Modern CSS adds two more hex formats: ",[80,81,82],"strong",{},"8-digit"," (",[19,85,86],{},"#RRGGBBAA",") and ",[80,89,90],{},"4-digit",[19,92,93],{},"#RGBA","). These let you specify transparency without leaving hex notation or converting to decimal values.",[10,96,98],{"id":97},"_8-digit-hex-syntax","8-Digit Hex Syntax",[15,100,101],{},"The last two digits represent the alpha channel in hexadecimal:",[32,103,105],{"className":34,"code":104,"language":36,"meta":37,"style":37},"background: #ff6600ff; \u002F* fully opaque orange *\u002F\nbackground: #ff6600cc; \u002F* orange at 80% opacity *\u002F\nbackground: #ff660080; \u002F* orange at 50% opacity *\u002F\nbackground: #ff660000; \u002F* fully transparent orange *\u002F\n",[19,106,107,117,127,137],{"__ignoreMap":37},[41,108,109,111,114],{"class":43,"line":44},[41,110,55],{"class":54},[41,112,113],{"class":58},"#ff6600ff;",[41,115,116],{"class":47}," \u002F* fully opaque orange *\u002F\n",[41,118,119,121,124],{"class":43,"line":51},[41,120,55],{"class":54},[41,122,123],{"class":58},"#ff6600cc;",[41,125,126],{"class":47}," \u002F* orange at 80% opacity *\u002F\n",[41,128,129,131,134],{"class":43,"line":62},[41,130,55],{"class":54},[41,132,133],{"class":58},"#ff660080;",[41,135,136],{"class":47}," \u002F* orange at 50% opacity *\u002F\n",[41,138,140,142,145],{"class":43,"line":139},4,[41,141,55],{"class":54},[41,143,144],{"class":58},"#ff660000;",[41,146,147],{"class":47}," \u002F* fully transparent orange *\u002F\n",[149,150,152],"h3",{"id":151},"alpha-value-conversion","Alpha Value Conversion",[15,154,155,156,159,160,163],{},"The alpha channel is a hex number from ",[19,157,158],{},"00"," to ",[19,161,162],{},"ff",", representing 0% to 100% opacity:",[165,166,167,183],"table",{},[168,169,170],"thead",{},[171,172,173,177,180],"tr",{},[174,175,176],"th",{},"Hex Alpha",[174,178,179],{},"Decimal",[174,181,182],{},"Percentage",[184,185,186,199,212,225,238,251,264,277,290,303],"tbody",{},[171,187,188,193,196],{},[189,190,191],"td",{},[19,192,158],{},[189,194,195],{},"0",[189,197,198],{},"0% (transparent)",[171,200,201,206,209],{},[189,202,203],{},[19,204,205],{},"33",[189,207,208],{},"51",[189,210,211],{},"20%",[171,213,214,219,222],{},[189,215,216],{},[19,217,218],{},"66",[189,220,221],{},"102",[189,223,224],{},"40%",[171,226,227,232,235],{},[189,228,229],{},[19,230,231],{},"80",[189,233,234],{},"128",[189,236,237],{},"~50%",[171,239,240,245,248],{},[189,241,242],{},[19,243,244],{},"99",[189,246,247],{},"153",[189,249,250],{},"60%",[171,252,253,258,261],{},[189,254,255],{},[19,256,257],{},"bb",[189,259,260],{},"187",[189,262,263],{},"~73%",[171,265,266,271,274],{},[189,267,268],{},[19,269,270],{},"cc",[189,272,273],{},"204",[189,275,276],{},"80%",[171,278,279,284,287],{},[189,280,281],{},[19,282,283],{},"dd",[189,285,286],{},"221",[189,288,289],{},"~87%",[171,291,292,297,300],{},[189,293,294],{},[19,295,296],{},"ee",[189,298,299],{},"238",[189,301,302],{},"~93%",[171,304,305,309,312],{},[189,306,307],{},[19,308,162],{},[189,310,311],{},"255",[189,313,314],{},"100% (opaque)",[15,316,317,318,320,321,323,324,326],{},"For quick mental math, ",[19,319,231],{}," is approximately 50%, ",[19,322,270],{}," is approximately 80%, and ",[19,325,162],{}," is fully opaque.",[149,328,330],{"id":329},"converting-percentage-to-hex","Converting Percentage to Hex",[15,332,333],{},"To convert a percentage to hex alpha:",[32,335,339],{"className":336,"code":337,"language":338,"meta":37,"style":37},"language-javascript shiki shiki-themes github-light github-dark","function percentToHexAlpha(percent) {\n  return Math.round(percent * 2.55).toString(16).padStart(2, '0');\n}\n\u002F\u002F percentToHexAlpha(50) → '80'\n\u002F\u002F percentToHexAlpha(80) → 'cc'\n","javascript",[19,340,341,346,351,356,361],{"__ignoreMap":37},[41,342,343],{"class":43,"line":44},[41,344,345],{},"function percentToHexAlpha(percent) {\n",[41,347,348],{"class":43,"line":51},[41,349,350],{},"  return Math.round(percent * 2.55).toString(16).padStart(2, '0');\n",[41,352,353],{"class":43,"line":62},[41,354,355],{},"}\n",[41,357,358],{"class":43,"line":139},[41,359,360],{},"\u002F\u002F percentToHexAlpha(50) → '80'\n",[41,362,364],{"class":43,"line":363},5,[41,365,366],{},"\u002F\u002F percentToHexAlpha(80) → 'cc'\n",[10,368,370],{"id":369},"_4-digit-shorthand-with-alpha","4-Digit Shorthand With Alpha",[15,372,373,374,376,377,379,380,376,382,384],{},"Just as ",[19,375,21],{}," expands to ",[19,378,25],{},", ",[19,381,93],{},[19,383,86],{}," by doubling each digit:",[32,386,388],{"className":34,"code":387,"language":36,"meta":37,"style":37},"background: #f60c; \u002F* #ff6600cc — orange at 80% *\u002F\nbackground: #f660; \u002F* #ff666600 — transparent *\u002F\nbackground: #0f0a; \u002F* #00ff00aa — green at 67% *\u002F\n",[19,389,390,400,410],{"__ignoreMap":37},[41,391,392,394,397],{"class":43,"line":44},[41,393,55],{"class":54},[41,395,396],{"class":58},"#f60c;",[41,398,399],{"class":47}," \u002F* #ff6600cc — orange at 80% *\u002F\n",[41,401,402,404,407],{"class":43,"line":51},[41,403,55],{"class":54},[41,405,406],{"class":58},"#f660;",[41,408,409],{"class":47}," \u002F* #ff666600 — transparent *\u002F\n",[41,411,412,414,417,420],{"class":43,"line":62},[41,413,55],{"class":54},[41,415,416],{"class":58},"#0f0a",[41,418,419],{"class":54},"; ",[41,421,422],{"class":47},"\u002F* #00ff00aa — green at 67% *\u002F\n",[15,424,425],{},"The same readability caveat from 3-digit shorthand applies: only use 4-digit shorthand when the color-plus-alpha combination is immediately recognizable.",[10,427,429],{"id":428},"browser-support","Browser Support",[15,431,432],{},"8-digit and 4-digit hex colors are supported in all modern browsers:",[165,434,435,445],{},[168,436,437],{},[171,438,439,442],{},[174,440,441],{},"Browser",[174,443,444],{},"Version",[184,446,447,455,463,471,479],{},[171,448,449,452],{},[189,450,451],{},"Chrome",[189,453,454],{},"62+",[171,456,457,460],{},[189,458,459],{},"Firefox",[189,461,462],{},"49+",[171,464,465,468],{},[189,466,467],{},"Safari",[189,469,470],{},"10+",[171,472,473,476],{},[189,474,475],{},"Edge",[189,477,478],{},"79+",[171,480,481,484],{},[189,482,483],{},"iOS Safari",[189,485,470],{},[15,487,488],{},"If you need to support older browsers, include a fallback:",[32,490,492],{"className":34,"code":491,"language":36,"meta":37,"style":37},"background: rgba(255, 102, 0, 0.8); \u002F* fallback *\u002F\nbackground: #ff6600cc;               \u002F* modern *\u002F\n",[19,493,494,505],{"__ignoreMap":37},[41,495,496,498,500,502],{"class":43,"line":44},[41,497,65],{"class":54},[41,499,69],{"class":68},[41,501,72],{"class":54},[41,503,504],{"class":47},"\u002F* fallback *\u002F\n",[41,506,507,509,511],{"class":43,"line":51},[41,508,55],{"class":54},[41,510,123],{"class":58},[41,512,513],{"class":47},"               \u002F* modern *\u002F\n",[10,515,517],{"id":516},"practical-applications","Practical Applications",[149,519,521],{"id":520},"overlay-tints","Overlay Tints",[15,523,524],{},"Hex-with-alpha simplifies overlay backgrounds where you previously needed a separate pseudo-element:",[32,526,528],{"className":34,"code":527,"language":36,"meta":37,"style":37},"\u002F* Before: extra element *\u002F\n.overlay::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n}\n\n\u002F* After: single property *\u002F\n.overlay {\n  background: #00000080;\n}\n",[19,529,530,535,543,559,571,582,614,619,626,632,640,652],{"__ignoreMap":37},[41,531,532],{"class":43,"line":44},[41,533,534],{"class":47},"\u002F* Before: extra element *\u002F\n",[41,536,537,540],{"class":43,"line":51},[41,538,539],{"class":68},".overlay::before",[41,541,542],{"class":54}," {\n",[41,544,545,549,552,556],{"class":43,"line":62},[41,546,548],{"class":547},"sj4cs","  content",[41,550,551],{"class":54},": ",[41,553,555],{"class":554},"sZZnC","''",[41,557,558],{"class":54},";\n",[41,560,561,564,566,569],{"class":43,"line":139},[41,562,563],{"class":547},"  position",[41,565,551],{"class":54},[41,567,568],{"class":547},"absolute",[41,570,558],{"class":54},[41,572,573,576,578,580],{"class":43,"line":363},[41,574,575],{"class":547},"  inset",[41,577,551],{"class":54},[41,579,195],{"class":547},[41,581,558],{"class":54},[41,583,585,588,590,593,596,598,600,602,604,606,608,611],{"class":43,"line":584},6,[41,586,587],{"class":547},"  background",[41,589,551],{"class":54},[41,591,592],{"class":547},"rgba",[41,594,595],{"class":54},"(",[41,597,195],{"class":547},[41,599,379],{"class":54},[41,601,195],{"class":547},[41,603,379],{"class":54},[41,605,195],{"class":547},[41,607,379],{"class":54},[41,609,610],{"class":547},"0.5",[41,612,613],{"class":54},");\n",[41,615,617],{"class":43,"line":616},7,[41,618,355],{"class":54},[41,620,622],{"class":43,"line":621},8,[41,623,625],{"emptyLinePlaceholder":624},true,"\n",[41,627,629],{"class":43,"line":628},9,[41,630,631],{"class":47},"\u002F* After: single property *\u002F\n",[41,633,635,638],{"class":43,"line":634},10,[41,636,637],{"class":68},".overlay",[41,639,542],{"class":54},[41,641,643,645,647,650],{"class":43,"line":642},11,[41,644,587],{"class":547},[41,646,551],{"class":54},[41,648,649],{"class":547},"#00000080",[41,651,558],{"class":54},[41,653,655],{"class":43,"line":654},12,[41,656,355],{"class":54},[149,658,660],{"id":659},"hover-states","Hover States",[15,662,663],{},"Add transparency on hover without a separate rgba declaration:",[32,665,667],{"className":34,"code":666,"language":36,"meta":37,"style":37},".button {\n  background: #6366f1;       \u002F* solid indigo *\u002F\n}\n\n.button:hover {\n  background: #6366f1cc;     \u002F* slightly transparent on hover *\u002F\n}\n",[19,668,669,676,691,695,699,706,721],{"__ignoreMap":37},[41,670,671,674],{"class":43,"line":44},[41,672,673],{"class":68},".button",[41,675,542],{"class":54},[41,677,678,680,682,685,688],{"class":43,"line":51},[41,679,587],{"class":547},[41,681,551],{"class":54},[41,683,684],{"class":547},"#6366f1",[41,686,687],{"class":54},";       ",[41,689,690],{"class":47},"\u002F* solid indigo *\u002F\n",[41,692,693],{"class":43,"line":62},[41,694,355],{"class":54},[41,696,697],{"class":43,"line":139},[41,698,625],{"emptyLinePlaceholder":624},[41,700,701,704],{"class":43,"line":363},[41,702,703],{"class":68},".button:hover",[41,705,542],{"class":54},[41,707,708,710,712,715,718],{"class":43,"line":584},[41,709,587],{"class":547},[41,711,551],{"class":54},[41,713,714],{"class":547},"#6366f1cc",[41,716,717],{"class":54},";     ",[41,719,720],{"class":47},"\u002F* slightly transparent on hover *\u002F\n",[41,722,723],{"class":43,"line":616},[41,724,355],{"class":54},[149,726,728],{"id":727},"design-system-tokens","Design System Tokens",[15,730,731],{},"Consistent alpha values become easier to express when your design tokens stay in hex:",[32,733,735],{"className":34,"code":734,"language":36,"meta":37,"style":37},":root {\n  --color-primary: #6366f1;\n  --color-primary-subtle: #6366f120; \u002F* 12% opacity *\u002F\n  --color-primary-hover: #6366f1cc;  \u002F* 80% opacity *\u002F\n}\n",[19,736,737,744,756,771,786],{"__ignoreMap":37},[41,738,739,742],{"class":43,"line":44},[41,740,741],{"class":68},":root",[41,743,542],{"class":54},[41,745,746,750,752,754],{"class":43,"line":51},[41,747,749],{"class":748},"s4XuR","  --color-primary",[41,751,551],{"class":54},[41,753,684],{"class":547},[41,755,558],{"class":54},[41,757,758,761,763,766,768],{"class":43,"line":62},[41,759,760],{"class":748},"  --color-primary-subtle",[41,762,551],{"class":54},[41,764,765],{"class":547},"#6366f120",[41,767,419],{"class":54},[41,769,770],{"class":47},"\u002F* 12% opacity *\u002F\n",[41,772,773,776,778,780,783],{"class":43,"line":139},[41,774,775],{"class":748},"  --color-primary-hover",[41,777,551],{"class":54},[41,779,714],{"class":547},[41,781,782],{"class":54},";  ",[41,784,785],{"class":47},"\u002F* 80% opacity *\u002F\n",[41,787,788],{"class":43,"line":363},[41,789,355],{"class":54},[10,791,793],{"id":792},"hex-alpha-vs-rgba","Hex Alpha vs rgba()",[165,795,796,811],{},[168,797,798],{},[171,799,800,803,807],{},[174,801,802],{},"Feature",[174,804,805],{},[19,806,86],{},[174,808,809],{},[19,810,29],{},[184,812,813,824,835,846,857],{},[171,814,815,818,821],{},[189,816,817],{},"Notation",[189,819,820],{},"Pure hex",[189,822,823],{},"Mixed decimal\u002Fhex",[171,825,826,829,832],{},[189,827,828],{},"Copy-paste from design tools",[189,830,831],{},"Direct",[189,833,834],{},"Must convert",[171,836,837,840,843],{},[189,838,839],{},"Alpha precision",[189,841,842],{},"0–255 (hex)",[189,844,845],{},"0–1 (decimal)",[171,847,848,851,854],{},[189,849,850],{},"Fallback support",[189,852,853],{},"Modern only",[189,855,856],{},"Universal",[171,858,859,862,865],{},[189,860,861],{},"readability",[189,863,864],{},"Requires hex familiarity",[189,866,867],{},"Intuitive percentages",[15,869,870],{},"Both are valid CSS. Use hex-with-alpha when your workflow is already hex-centric (design tokens, Figma exports). Use rgba() when you need maximum readability or legacy browser support.",[10,872,874],{"id":873},"key-takeaways","Key Takeaways",[876,877,878,885,891,900,912,918],"ul",{},[879,880,881,882,884],"li",{},"8-digit hex ",[19,883,86],{}," adds a 2-digit alpha channel after the RGB channels.",[879,886,887,888,890],{},"4-digit shorthand ",[19,889,93],{}," expands each digit by doubling it.",[879,892,893,894,896,897,899],{},"Alpha ranges from ",[19,895,158],{}," (transparent) to ",[19,898,162],{}," (opaque) — the same scale as color channels.",[879,901,902,903,905,906,908,909,911],{},"Common values: ",[19,904,231],{}," ≈ 50%, ",[19,907,270],{}," ≈ 80%, ",[19,910,162],{}," = 100%.",[879,913,914,915,917],{},"Supported in all modern browsers; add ",[19,916,29],{}," fallbacks for older ones.",[879,919,920],{},"Use hex-with-alpha when your workflow already uses hex — no need to switch notation just for transparency.",[10,922,924],{"id":923},"try-it-yourself","Try It Yourself",[15,926,927,928,933],{},"Convert hex colors with alpha to RGB and HSL formats using the ",[929,930,932],"a",{"href":931},"\u002Ftools\u002Fhex-to-rgb","Hex to RGB Converter",".",[935,936,937],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":37,"searchDepth":51,"depth":51,"links":939},[940,941,945,946,947,952,953,954],{"id":12,"depth":51,"text":13},{"id":97,"depth":51,"text":98,"children":942},[943,944],{"id":151,"depth":62,"text":152},{"id":329,"depth":62,"text":330},{"id":369,"depth":51,"text":370},{"id":428,"depth":51,"text":429},{"id":516,"depth":51,"text":517,"children":948},[949,950,951],{"id":520,"depth":62,"text":521},{"id":659,"depth":62,"text":660},{"id":727,"depth":62,"text":728},{"id":792,"depth":51,"text":793},{"id":873,"depth":51,"text":874},{"id":923,"depth":51,"text":924},"2026-05-28","How #RRGGBBAA notation adds transparency to hex color codes in modern CSS.","md",{"immutable":624},"\u002Fguides\u002Falpha-channel-hex-colors",{"title":5,"description":956},"guides\u002Falpha-channel-hex-colors","G6AqfB63Tqh1KtWJFI5FWyPuLuqE11giZEkP9xsIZjg",1780401331370]