[{"data":1,"prerenderedAt":917},["ShallowReactive",2],{"guide-hex-shorthand-colors":3},{"id":4,"title":5,"body":6,"date":909,"description":910,"extension":911,"meta":912,"navigation":687,"path":913,"readingTime":684,"seo":914,"stem":915,"__hash__":916},"guides\u002Fguides\u002Fhex-shorthand-colors.md","HEX Shorthand Color Codes Guide",{"type":7,"value":8,"toc":896},"minimark",[9,14,30,100,114,118,170,173,299,303,306,339,354,358,363,404,407,411,444,456,460,473,515,590,593,597,600,838,842,880,884,892],[10,11,13],"h2",{"id":12},"what-are-hex-shorthand-codes","What Are HEX Shorthand Codes?",[15,16,17,18,22,23,26,27,29],"p",{},"Standard hex color codes use six hexadecimal digits — two each for red, green, and blue: ",[19,20,21],"code",{},"#RRGGBB",". Shorthand codes compress this to three digits by duplicating each digit: ",[19,24,25],{},"#RGB"," becomes ",[19,28,21],{},".",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes github-light github-dark","\u002F* These are equivalent *\u002F\ncolor: #f00;      \u002F* #ff0000 *\u002F\ncolor: #0f0;      \u002F* #00ff00 *\u002F\ncolor: #00f;      \u002F* #0000ff *\u002F\ncolor: #abc;      \u002F* #aabbcc *\u002F\n","css","",[19,38,39,48,62,76,89],{"__ignoreMap":36},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sJ8bj","\u002F* These are equivalent *\u002F\n",[40,49,51,55,59],{"class":42,"line":50},2,[40,52,54],{"class":53},"sVt8B","color: ",[40,56,58],{"class":57},"s7hpK","#f00;",[40,60,61],{"class":46},"      \u002F* #ff0000 *\u002F\n",[40,63,65,67,70,73],{"class":42,"line":64},3,[40,66,54],{"class":53},[40,68,69],{"class":57},"#0f0",[40,71,72],{"class":53},";      ",[40,74,75],{"class":46},"\u002F* #00ff00 *\u002F\n",[40,77,79,81,84,86],{"class":42,"line":78},4,[40,80,54],{"class":53},[40,82,83],{"class":57},"#00f",[40,85,72],{"class":53},[40,87,88],{"class":46},"\u002F* #0000ff *\u002F\n",[40,90,92,94,97],{"class":42,"line":91},5,[40,93,54],{"class":53},[40,95,96],{"class":57},"#abc;",[40,98,99],{"class":46},"      \u002F* #aabbcc *\u002F\n",[15,101,102,103,106,107,110,111,29],{},"Each shorthand digit is repeated to fill the two-digit slot for that channel. The shorthand ",[19,104,105],{},"#3a5"," expands to ",[19,108,109],{},"#33aa55",", not ",[19,112,113],{},"#300a50",[10,115,117],{"id":116},"when-shorthand-works","When Shorthand Works",[15,119,120,121,124,125,124,128,124,131,124,134,124,137,124,140,124,143,124,146,124,149,124,152,124,155,124,158,124,161,124,164,124,167,29],{},"Shorthand codes work when both digits of each channel are identical. There are only 16 values per channel where this is true: ",[19,122,123],{},"00",", ",[19,126,127],{},"11",[19,129,130],{},"22",[19,132,133],{},"33",[19,135,136],{},"44",[19,138,139],{},"55",[19,141,142],{},"66",[19,144,145],{},"77",[19,147,148],{},"88",[19,150,151],{},"99",[19,153,154],{},"aa",[19,156,157],{},"bb",[19,159,160],{},"cc",[19,162,163],{},"dd",[19,165,166],{},"ee",[19,168,169],{},"ff",[15,171,172],{},"That gives you 16 × 16 × 16 = 4,096 colors representable in shorthand — a tiny fraction of the 16.7 million colors available in full notation.",[174,175,176,192],"table",{},[177,178,179],"thead",{},[180,181,182,186,189],"tr",{},[183,184,185],"th",{},"Shorthand",[183,187,188],{},"Expanded",[183,190,191],{},"Color",[193,194,195,211,226,241,255,269,284],"tbody",{},[180,196,197,203,208],{},[198,199,200],"td",{},[19,201,202],{},"#000",[198,204,205],{},[19,206,207],{},"#000000",[198,209,210],{},"Black",[180,212,213,218,223],{},[198,214,215],{},[19,216,217],{},"#fff",[198,219,220],{},[19,221,222],{},"#ffffff",[198,224,225],{},"White",[180,227,228,233,238],{},[198,229,230],{},[19,231,232],{},"#f00",[198,234,235],{},[19,236,237],{},"#ff0000",[198,239,240],{},"Red",[180,242,243,247,252],{},[198,244,245],{},[19,246,69],{},[198,248,249],{},[19,250,251],{},"#00ff00",[198,253,254],{},"Green",[180,256,257,261,266],{},[198,258,259],{},[19,260,83],{},[198,262,263],{},[19,264,265],{},"#0000ff",[198,267,268],{},"Blue",[180,270,271,276,281],{},[198,272,273],{},[19,274,275],{},"#888",[198,277,278],{},[19,279,280],{},"#888888",[198,282,283],{},"Mid-gray",[180,285,286,291,296],{},[198,287,288],{},[19,289,290],{},"#f80",[198,292,293],{},[19,294,295],{},"#ff8800",[198,297,298],{},"Orange",[10,300,302],{"id":301},"when-shorthand-does-not-work","When Shorthand Does Not Work",[15,304,305],{},"Most colors require distinct digits in at least one channel and cannot be represented in shorthand:",[31,307,309],{"className":33,"code":308,"language":35,"meta":36,"style":36},"\u002F* No shorthand equivalent exists for these *\u002F\ncolor: #d94f4f;   \u002F* Not #d4f (#dd44ff — completely different color) *\u002F\ncolor: #1e40af;   \u002F* Not #14a (#1144aa — completely different color) *\u002F\n",[19,310,311,316,326],{"__ignoreMap":36},[40,312,313],{"class":42,"line":43},[40,314,315],{"class":46},"\u002F* No shorthand equivalent exists for these *\u002F\n",[40,317,318,320,323],{"class":42,"line":50},[40,319,54],{"class":53},[40,321,322],{"class":57},"#d94f4f;",[40,324,325],{"class":46},"   \u002F* Not #d4f (#dd44ff — completely different color) *\u002F\n",[40,327,328,330,333,336],{"class":42,"line":64},[40,329,54],{"class":53},[40,331,332],{"class":57},"#1e40af",[40,334,335],{"class":53},";   ",[40,337,338],{"class":46},"\u002F* Not #14a (#1144aa — completely different color) *\u002F\n",[15,340,341,342,345,346,349,350,353],{},"The critical mistake is assuming you can truncate each channel to one digit. ",[19,343,344],{},"#d94f4f"," shortened to ",[19,347,348],{},"#d4f"," produces ",[19,351,352],{},"#dd44ff",", a purple — not the red you intended.",[10,355,357],{"id":356},"shorthand-in-css-practice","Shorthand in CSS Practice",[359,360,362],"h3",{"id":361},"acceptable-uses","Acceptable Uses",[31,364,366],{"className":33,"code":365,"language":35,"meta":36,"style":36},"\u002F* Common named colors where shorthand is instantly recognizable *\u002F\nbackground: #fff;\nborder-color: #000;\ncolor: #333;\n",[19,367,368,373,381,395],{"__ignoreMap":36},[40,369,370],{"class":42,"line":43},[40,371,372],{"class":46},"\u002F* Common named colors where shorthand is instantly recognizable *\u002F\n",[40,374,375,378],{"class":42,"line":50},[40,376,377],{"class":53},"background: ",[40,379,380],{"class":57},"#fff;\n",[40,382,383,387,390,392],{"class":42,"line":64},[40,384,386],{"class":385},"s9eBZ","border-color",[40,388,389],{"class":53},": ",[40,391,202],{"class":57},[40,393,394],{"class":53},";\n",[40,396,397,399,402],{"class":42,"line":78},[40,398,54],{"class":53},[40,400,401],{"class":57},"#333",[40,403,394],{"class":53},[15,405,406],{},"These are universally understood by developers and reduce visual noise in stylesheets.",[359,408,410],{"id":409},"problematic-uses","Problematic Uses",[31,412,414],{"className":33,"code":413,"language":35,"meta":36,"style":36},"\u002F* Obscure shorthands that require mental expansion *\u002F\nbackground: #b8d; \u002F* What color is this? Most developers cannot tell at a glance *\u002F\ncolor: #6a4;     \u002F* Requires mental math to expand to #66aa44 *\u002F\n",[19,415,416,421,431],{"__ignoreMap":36},[40,417,418],{"class":42,"line":43},[40,419,420],{"class":46},"\u002F* Obscure shorthands that require mental expansion *\u002F\n",[40,422,423,425,428],{"class":42,"line":50},[40,424,377],{"class":53},[40,426,427],{"class":57},"#b8d;",[40,429,430],{"class":46}," \u002F* What color is this? Most developers cannot tell at a glance *\u002F\n",[40,432,433,435,438,441],{"class":42,"line":64},[40,434,54],{"class":53},[40,436,437],{"class":57},"#6a4",[40,439,440],{"class":53},";     ",[40,442,443],{"class":46},"\u002F* Requires mental math to expand to #66aa44 *\u002F\n",[15,445,446,447,124,449,124,451,124,453,455],{},"If a shorthand is not immediately recognizable (",[19,448,217],{},[19,450,202],{},[19,452,232],{},[19,454,401],{},"), use the full six-digit form for readability.",[10,457,459],{"id":458},"shorthand-and-alpha-transparency","Shorthand and Alpha Transparency",[15,461,462,463,466,467,106,470,472],{},"The shorthand system extends to the 8-digit hex format with alpha (",[19,464,465],{},"#RRGGBBAA","). A 4-digit shorthand ",[19,468,469],{},"#RGBA",[19,471,465],{},":",[31,474,476],{"className":33,"code":475,"language":35,"meta":36,"style":36},"\u002F* 4-digit shorthand with alpha *\u002F\ncolor: #fff8;   \u002F* #ffffff88 — white at ~53% opacity *\u002F\ncolor: #000c;   \u002F* #000000cc — black at ~80% opacity *\u002F\ncolor: #f00a;   \u002F* #ff0000aa — red at ~67% opacity *\u002F\n",[19,477,478,483,493,505],{"__ignoreMap":36},[40,479,480],{"class":42,"line":43},[40,481,482],{"class":46},"\u002F* 4-digit shorthand with alpha *\u002F\n",[40,484,485,487,490],{"class":42,"line":50},[40,486,54],{"class":53},[40,488,489],{"class":57},"#fff8;",[40,491,492],{"class":46},"   \u002F* #ffffff88 — white at ~53% opacity *\u002F\n",[40,494,495,497,500,502],{"class":42,"line":64},[40,496,54],{"class":53},[40,498,499],{"class":57},"#000c",[40,501,335],{"class":53},[40,503,504],{"class":46},"\u002F* #000000cc — black at ~80% opacity *\u002F\n",[40,506,507,509,512],{"class":42,"line":78},[40,508,54],{"class":53},[40,510,511],{"class":57},"#f00a;",[40,513,514],{"class":46},"   \u002F* #ff0000aa — red at ~67% opacity *\u002F\n",[174,516,517,528],{},[177,518,519],{},[180,520,521,523,525],{},[183,522,185],{},[183,524,188],{},[183,526,527],{},"Description",[193,529,530,545,560,575],{},[180,531,532,537,542],{},[198,533,534],{},[19,535,536],{},"#fff0",[198,538,539],{},[19,540,541],{},"#ffffff00",[198,543,544],{},"Fully transparent white",[180,546,547,552,557],{},[198,548,549],{},[19,550,551],{},"#fff8",[198,553,554],{},[19,555,556],{},"#ffffff88",[198,558,559],{},"White at 53% opacity",[180,561,562,567,572],{},[198,563,564],{},[19,565,566],{},"#ffff",[198,568,569],{},[19,570,571],{},"#ffffffff",[198,573,574],{},"Fully opaque white",[180,576,577,582,587],{},[198,578,579],{},[19,580,581],{},"#000a",[198,583,584],{},[19,585,586],{},"#000000aa",[198,588,589],{},"Black at 67% opacity",[15,591,592],{},"Browser support for 8-digit hex (and therefore 4-digit shorthand with alpha) is strong in modern browsers but verify your target environments.",[10,594,596],{"id":595},"conversion-rules","Conversion Rules",[15,598,599],{},"To convert between shorthand and full notation:",[31,601,605],{"className":602,"code":603,"language":604,"meta":36,"style":36},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Expand 3-digit shorthand to 6-digit\nfunction expandHex(short) {\n  return short.replace(\u002F([0-9a-f])\u002Fgi, '$1$1');\n}\n\u002F\u002F expandHex('f80') → 'ff8800'\n\n\u002F\u002F Compress 6-digit to 3-digit shorthand (when possible)\nfunction compressHex(full) {\n  if (full[0] === full[1] && full[2] === full[3] && full[4] === full[5]) {\n    return full[0] + full[2] + full[4];\n  }\n  return full; \u002F\u002F Not compressible\n}\n\u002F\u002F compressHex('ff8800') → 'f80'\n\u002F\u002F compressHex('d94f4f') → 'd94f4f' (unchanged)\n","javascript",[19,606,607,612,632,672,677,682,689,695,710,774,804,810,821,826,832],{"__ignoreMap":36},[40,608,609],{"class":42,"line":43},[40,610,611],{"class":46},"\u002F\u002F Expand 3-digit shorthand to 6-digit\n",[40,613,614,618,622,625,629],{"class":42,"line":50},[40,615,617],{"class":616},"szBVR","function",[40,619,621],{"class":620},"sScJk"," expandHex",[40,623,624],{"class":53},"(",[40,626,628],{"class":627},"s4XuR","short",[40,630,631],{"class":53},") {\n",[40,633,634,637,640,643,645,649,652,656,659,661,664,666,669],{"class":42,"line":64},[40,635,636],{"class":616},"  return",[40,638,639],{"class":53}," short.",[40,641,642],{"class":620},"replace",[40,644,624],{"class":53},[40,646,648],{"class":647},"sZZnC","\u002F",[40,650,624],{"class":651},"sA_wV",[40,653,655],{"class":654},"sj4cs","[0-9a-f]",[40,657,658],{"class":651},")",[40,660,648],{"class":647},[40,662,663],{"class":616},"gi",[40,665,124],{"class":53},[40,667,668],{"class":647},"'$1$1'",[40,670,671],{"class":53},");\n",[40,673,674],{"class":42,"line":78},[40,675,676],{"class":53},"}\n",[40,678,679],{"class":42,"line":91},[40,680,681],{"class":46},"\u002F\u002F expandHex('f80') → 'ff8800'\n",[40,683,685],{"class":42,"line":684},6,[40,686,688],{"emptyLinePlaceholder":687},true,"\n",[40,690,692],{"class":42,"line":691},7,[40,693,694],{"class":46},"\u002F\u002F Compress 6-digit to 3-digit shorthand (when possible)\n",[40,696,698,700,703,705,708],{"class":42,"line":697},8,[40,699,617],{"class":616},[40,701,702],{"class":620}," compressHex",[40,704,624],{"class":53},[40,706,707],{"class":627},"full",[40,709,631],{"class":53},[40,711,713,716,719,722,725,728,731,734,736,739,741,744,746,748,750,753,755,757,759,762,764,766,768,771],{"class":42,"line":712},9,[40,714,715],{"class":616},"  if",[40,717,718],{"class":53}," (full[",[40,720,721],{"class":654},"0",[40,723,724],{"class":53},"] ",[40,726,727],{"class":616},"===",[40,729,730],{"class":53}," full[",[40,732,733],{"class":654},"1",[40,735,724],{"class":53},[40,737,738],{"class":616},"&&",[40,740,730],{"class":53},[40,742,743],{"class":654},"2",[40,745,724],{"class":53},[40,747,727],{"class":616},[40,749,730],{"class":53},[40,751,752],{"class":654},"3",[40,754,724],{"class":53},[40,756,738],{"class":616},[40,758,730],{"class":53},[40,760,761],{"class":654},"4",[40,763,724],{"class":53},[40,765,727],{"class":616},[40,767,730],{"class":53},[40,769,770],{"class":654},"5",[40,772,773],{"class":53},"]) {\n",[40,775,777,780,782,784,786,789,791,793,795,797,799,801],{"class":42,"line":776},10,[40,778,779],{"class":616},"    return",[40,781,730],{"class":53},[40,783,721],{"class":654},[40,785,724],{"class":53},[40,787,788],{"class":616},"+",[40,790,730],{"class":53},[40,792,743],{"class":654},[40,794,724],{"class":53},[40,796,788],{"class":616},[40,798,730],{"class":53},[40,800,761],{"class":654},[40,802,803],{"class":53},"];\n",[40,805,807],{"class":42,"line":806},11,[40,808,809],{"class":53},"  }\n",[40,811,813,815,818],{"class":42,"line":812},12,[40,814,636],{"class":616},[40,816,817],{"class":53}," full; ",[40,819,820],{"class":46},"\u002F\u002F Not compressible\n",[40,822,824],{"class":42,"line":823},13,[40,825,676],{"class":53},[40,827,829],{"class":42,"line":828},14,[40,830,831],{"class":46},"\u002F\u002F compressHex('ff8800') → 'f80'\n",[40,833,835],{"class":42,"line":834},15,[40,836,837],{"class":46},"\u002F\u002F compressHex('d94f4f') → 'd94f4f' (unchanged)\n",[10,839,841],{"id":840},"key-takeaways","Key Takeaways",[843,844,845,855,858,861,871,877],"ul",{},[846,847,848,849,851,852,854],"li",{},"Shorthand hex duplicates each digit: ",[19,850,25],{}," → ",[19,853,21],{},". It does not truncate or pad.",[846,856,857],{},"Only 4,096 out of 16.7 million colors can be represented in shorthand.",[846,859,860],{},"Never truncate a 6-digit code to 3 digits — the resulting color is completely different.",[846,862,863,864,124,866,868,869,29],{},"Use shorthand only for universally recognizable values like ",[19,865,217],{},[19,867,202],{},", and ",[19,870,401],{},[846,872,873,874,876],{},"4-digit shorthand (",[19,875,469],{},") extends the system to include alpha transparency.",[846,878,879],{},"When in doubt, use the full 6-digit or 8-digit form for clarity.",[10,881,883],{"id":882},"try-it-yourself","Try It Yourself",[15,885,886,887,29],{},"Convert between hex, RGB, and HSL color formats with the ",[888,889,891],"a",{"href":890},"\u002Ftools\u002Fhex-to-rgb","Hex to RGB Converter",[893,894,895],"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 .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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":36,"searchDepth":50,"depth":50,"links":897},[898,899,900,901,905,906,907,908],{"id":12,"depth":50,"text":13},{"id":116,"depth":50,"text":117},{"id":301,"depth":50,"text":302},{"id":356,"depth":50,"text":357,"children":902},[903,904],{"id":361,"depth":64,"text":362},{"id":409,"depth":64,"text":410},{"id":458,"depth":50,"text":459},{"id":595,"depth":50,"text":596},{"id":840,"depth":50,"text":841},{"id":882,"depth":50,"text":883},"2026-05-28","When #fff equals #ffffff and when it doesn't — understanding 3-digit hex notation.","md",{"immutable":687},"\u002Fguides\u002Fhex-shorthand-colors",{"title":5,"description":910},"guides\u002Fhex-shorthand-colors","8387Q-5EVxmB9Hv7ksFDj7igAneugmDHHSlUQDwJrW0",1780401334152]