[{"data":1,"prerenderedAt":1181},["ShallowReactive",2],{"guide-extracting-colors-from-images":3},{"id":4,"title":5,"body":6,"date":1173,"description":1174,"extension":1175,"meta":1176,"navigation":417,"path":1177,"readingTime":414,"seo":1178,"stem":1179,"__hash__":1180},"guides\u002Fguides\u002Fextracting-colors-from-images.md","Extracting Colors from Images",{"type":7,"value":8,"toc":1150},"minimark",[9,14,18,21,25,30,33,37,40,51,54,58,61,65,133,137,141,144,157,161,164,168,171,182,186,189,251,254,258,262,918,929,933,1010,1014,1086,1090,1110,1114,1122,1126,1146],[10,11,13],"h2",{"id":12},"why-extract-colors-from-images","Why Extract Colors from Images?",[15,16,17],"p",{},"Every photograph, illustration, and screenshot contains a hidden palette. Extracting dominant colors lets you build designs that feel visually connected to their imagery — product pages that match hero photos, dashboards themed around user avatars, or brand systems derived from a mood board.",[15,19,20],{},"Manual color picking with an eyedropper is slow and subjective. Algorithmic extraction gives you consistent, repeatable palettes in seconds.",[10,22,24],{"id":23},"how-color-extraction-works","How Color Extraction Works",[26,27,29],"h3",{"id":28},"simple-histogram-method","Simple histogram method",[15,31,32],{},"The most basic approach counts every pixel and ranks colors by frequency. The problem: images contain millions of pixels, and raw frequency rewards large uniform areas (backgrounds, skies) over the visually significant colors you care about.",[26,34,36],{"id":35},"median-cut-algorithm","Median cut algorithm",[15,38,39],{},"Median cut divides the color space into boxes, then recursively splits the box with the largest color range until you have the desired number of boxes. The average color of each box becomes a palette entry.",[41,42,47],"pre",{"className":43,"code":45,"language":46},[44],"language-text","All pixels (one box)\n  → Split along the channel with the widest range\n  → Two boxes\n  → Split the box with the largest range again\n  → Continue until N boxes\n  → One representative color per box\n","text",[48,49,45],"code",{"__ignoreMap":50},"",[15,52,53],{},"Median cut produces balanced palettes because it prioritizes color diversity over pixel frequency. A small but visually important red accent gets represented alongside the large blue sky.",[26,55,57],{"id":56},"k-means-clustering","K-means clustering",[15,59,60],{},"K-means groups pixels into K clusters by minimizing the distance between each pixel and its cluster center. It is more accurate than median cut but computationally heavier — fine for tooling, impractical for real-time use.",[26,62,64],{"id":63},"which-method-to-use","Which method to use?",[66,67,68,87],"table",{},[69,70,71],"thead",{},[72,73,74,78,81,84],"tr",{},[75,76,77],"th",{},"Method",[75,79,80],{},"Speed",[75,82,83],{},"Quality",[75,85,86],{},"Best For",[88,89,90,105,119],"tbody",{},[72,91,92,96,99,102],{},[93,94,95],"td",{},"Histogram",[93,97,98],{},"Fast",[93,100,101],{},"Low — biased by area",[93,103,104],{},"Quick prototypes",[72,106,107,110,113,116],{},[93,108,109],{},"Median cut",[93,111,112],{},"Medium",[93,114,115],{},"Good — balanced",[93,117,118],{},"Most production use",[72,120,121,124,127,130],{},[93,122,123],{},"K-means",[93,125,126],{},"Slow",[93,128,129],{},"Best — perceptual",[93,131,132],{},"Precision palette generation",[10,134,136],{"id":135},"practical-extraction-workflow","Practical Extraction Workflow",[26,138,140],{"id":139},"step-1-choose-the-right-image","Step 1: Choose the right image",[15,142,143],{},"Extraction works best on images with clear color subjects. Avoid:",[145,146,147,151,154],"ul",{},[148,149,150],"li",{},"Overexposed photos (washed-out palette)",[148,152,153],{},"Images with heavy filters (distorted color distribution)",[148,155,156],{},"Low-resolution sources (not enough pixel diversity)",[26,158,160],{"id":159},"step-2-extract-58-dominant-colors","Step 2: Extract 5–8 dominant colors",[15,162,163],{},"Five to eight colors give you enough variety for a full interface palette — primary, secondary, accent, background, and neutral shades. Fewer than five feels limiting; more than eight becomes hard to distinguish.",[26,165,167],{"id":166},"step-3-clean-the-palette","Step 3: Clean the palette",[15,169,170],{},"Raw extraction includes near-duplicates and visually irrelevant colors (a single black pixel from a shadow). Clean by:",[145,172,173,176,179],{},[148,174,175],{},"Merging colors within a small ΔE distance (\u003C 5)",[148,177,178],{},"Removing colors below a 2% frequency threshold",[148,180,181],{},"Replacing gray\u002Fneutral entries with intentional neutral scales",[26,183,185],{"id":184},"step-4-assign-roles","Step 4: Assign roles",[15,187,188],{},"Map extracted colors to UI roles:",[66,190,191,201],{},[69,192,193],{},[72,194,195,198],{},[75,196,197],{},"Role",[75,199,200],{},"Selection criteria",[88,202,203,211,219,227,235,243],{},[72,204,205,208],{},[93,206,207],{},"Primary",[93,209,210],{},"Most saturated, visually dominant",[72,212,213,216],{},[93,214,215],{},"Secondary",[93,217,218],{},"Second most saturated, complements primary",[72,220,221,224],{},[93,222,223],{},"Accent",[93,225,226],{},"High contrast against primary — often warm if primary is cool",[72,228,229,232],{},[93,230,231],{},"Background",[93,233,234],{},"Lightest extracted color or derived light neutral",[72,236,237,240],{},[93,238,239],{},"Surface",[93,241,242],{},"Slightly darker than background",[72,244,245,248],{},[93,246,247],{},"Text",[93,249,250],{},"Darkest extracted color, verified for contrast",[15,252,253],{},"Not every extracted color needs a role. Some are scratch candidates that inform the final choices without being used directly.",[10,255,257],{"id":256},"extracting-colors-in-code","Extracting Colors in Code",[26,259,261],{"id":260},"browser-based-with-canvas","Browser-based with canvas",[41,263,267],{"className":264,"code":265,"language":266,"meta":50,"style":50},"language-javascript shiki shiki-themes github-light github-dark","function extractColors(imageElement, colorCount = 5) {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  canvas.width = 50   \u002F\u002F Downsample for speed\n  canvas.height = 50\n  ctx.drawImage(imageElement, 0, 0, 50, 50)\n\n  const imageData = ctx.getImageData(0, 0, 50, 50).data\n  const colors = {}\n\n  for (let i = 0; i \u003C imageData.length; i += 4) {\n    const r = imageData[i]\n    const g = imageData[i + 1]\n    const b = imageData[i + 2]\n    \u002F\u002F Quantize to reduce noise\n    const key = `${Math.round(r\u002F16)*16},${Math.round(g\u002F16)*16},${Math.round(b\u002F16)*16}`\n    colors[key] = (colors[key] || 0) + 1\n  }\n\n  return Object.entries(colors)\n    .sort((a, b) => b[1] - a[1])\n    .slice(0, colorCount)\n    .map(([key]) => {\n      const [r, g, b] = key.split(',').map(Number)\n      return { r, g, b, hex: '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('') }\n    })\n}\n","javascript",[48,268,269,306,332,355,371,382,412,419,454,467,472,514,528,550,569,575,666,690,696,701,716,760,775,797,839,906,912],{"__ignoreMap":50},[270,271,274,278,282,286,290,293,296,299,303],"span",{"class":272,"line":273},"line",1,[270,275,277],{"class":276},"szBVR","function",[270,279,281],{"class":280},"sScJk"," extractColors",[270,283,285],{"class":284},"sVt8B","(",[270,287,289],{"class":288},"s4XuR","imageElement",[270,291,292],{"class":284},", ",[270,294,295],{"class":288},"colorCount",[270,297,298],{"class":276}," =",[270,300,302],{"class":301},"sj4cs"," 5",[270,304,305],{"class":284},") {\n",[270,307,309,312,315,317,320,323,325,329],{"class":272,"line":308},2,[270,310,311],{"class":276},"  const",[270,313,314],{"class":301}," canvas",[270,316,298],{"class":276},[270,318,319],{"class":284}," document.",[270,321,322],{"class":280},"createElement",[270,324,285],{"class":284},[270,326,328],{"class":327},"sZZnC","'canvas'",[270,330,331],{"class":284},")\n",[270,333,335,337,340,342,345,348,350,353],{"class":272,"line":334},3,[270,336,311],{"class":276},[270,338,339],{"class":301}," ctx",[270,341,298],{"class":276},[270,343,344],{"class":284}," canvas.",[270,346,347],{"class":280},"getContext",[270,349,285],{"class":284},[270,351,352],{"class":327},"'2d'",[270,354,331],{"class":284},[270,356,358,361,364,367],{"class":272,"line":357},4,[270,359,360],{"class":284},"  canvas.width ",[270,362,363],{"class":276},"=",[270,365,366],{"class":301}," 50",[270,368,370],{"class":369},"sJ8bj","   \u002F\u002F Downsample for speed\n",[270,372,374,377,379],{"class":272,"line":373},5,[270,375,376],{"class":284},"  canvas.height ",[270,378,363],{"class":276},[270,380,381],{"class":301}," 50\n",[270,383,385,388,391,394,397,399,401,403,406,408,410],{"class":272,"line":384},6,[270,386,387],{"class":284},"  ctx.",[270,389,390],{"class":280},"drawImage",[270,392,393],{"class":284},"(imageElement, ",[270,395,396],{"class":301},"0",[270,398,292],{"class":284},[270,400,396],{"class":301},[270,402,292],{"class":284},[270,404,405],{"class":301},"50",[270,407,292],{"class":284},[270,409,405],{"class":301},[270,411,331],{"class":284},[270,413,415],{"class":272,"line":414},7,[270,416,418],{"emptyLinePlaceholder":417},true,"\n",[270,420,422,424,427,429,432,435,437,439,441,443,445,447,449,451],{"class":272,"line":421},8,[270,423,311],{"class":276},[270,425,426],{"class":301}," imageData",[270,428,298],{"class":276},[270,430,431],{"class":284}," ctx.",[270,433,434],{"class":280},"getImageData",[270,436,285],{"class":284},[270,438,396],{"class":301},[270,440,292],{"class":284},[270,442,396],{"class":301},[270,444,292],{"class":284},[270,446,405],{"class":301},[270,448,292],{"class":284},[270,450,405],{"class":301},[270,452,453],{"class":284},").data\n",[270,455,457,459,462,464],{"class":272,"line":456},9,[270,458,311],{"class":276},[270,460,461],{"class":301}," colors",[270,463,298],{"class":276},[270,465,466],{"class":284}," {}\n",[270,468,470],{"class":272,"line":469},10,[270,471,418],{"emptyLinePlaceholder":417},[270,473,475,478,481,484,487,489,492,495,498,501,504,506,509,512],{"class":272,"line":474},11,[270,476,477],{"class":276},"  for",[270,479,480],{"class":284}," (",[270,482,483],{"class":276},"let",[270,485,486],{"class":284}," i ",[270,488,363],{"class":276},[270,490,491],{"class":301}," 0",[270,493,494],{"class":284},"; i ",[270,496,497],{"class":276},"\u003C",[270,499,500],{"class":284}," imageData.",[270,502,503],{"class":301},"length",[270,505,494],{"class":284},[270,507,508],{"class":276},"+=",[270,510,511],{"class":301}," 4",[270,513,305],{"class":284},[270,515,517,520,523,525],{"class":272,"line":516},12,[270,518,519],{"class":276},"    const",[270,521,522],{"class":301}," r",[270,524,298],{"class":276},[270,526,527],{"class":284}," imageData[i]\n",[270,529,531,533,536,538,541,544,547],{"class":272,"line":530},13,[270,532,519],{"class":276},[270,534,535],{"class":301}," g",[270,537,298],{"class":276},[270,539,540],{"class":284}," imageData[i ",[270,542,543],{"class":276},"+",[270,545,546],{"class":301}," 1",[270,548,549],{"class":284},"]\n",[270,551,553,555,558,560,562,564,567],{"class":272,"line":552},14,[270,554,519],{"class":276},[270,556,557],{"class":301}," b",[270,559,298],{"class":276},[270,561,540],{"class":284},[270,563,543],{"class":276},[270,565,566],{"class":301}," 2",[270,568,549],{"class":284},[270,570,572],{"class":272,"line":571},15,[270,573,574],{"class":369},"    \u002F\u002F Quantize to reduce noise\n",[270,576,578,580,583,585,588,591,594,597,599,602,605,608,611,614,616,619,621,623,625,627,630,632,634,636,638,640,642,644,646,648,650,653,655,657,659,661,663],{"class":272,"line":577},16,[270,579,519],{"class":276},[270,581,582],{"class":301}," key",[270,584,298],{"class":276},[270,586,587],{"class":327}," `${",[270,589,590],{"class":284},"Math",[270,592,593],{"class":327},".",[270,595,596],{"class":280},"round",[270,598,285],{"class":327},[270,600,601],{"class":284},"r",[270,603,604],{"class":276},"\u002F",[270,606,607],{"class":301},"16",[270,609,610],{"class":327},")",[270,612,613],{"class":276},"*",[270,615,607],{"class":301},[270,617,618],{"class":327},"},${",[270,620,590],{"class":284},[270,622,593],{"class":327},[270,624,596],{"class":280},[270,626,285],{"class":327},[270,628,629],{"class":284},"g",[270,631,604],{"class":276},[270,633,607],{"class":301},[270,635,610],{"class":327},[270,637,613],{"class":276},[270,639,607],{"class":301},[270,641,618],{"class":327},[270,643,590],{"class":284},[270,645,593],{"class":327},[270,647,596],{"class":280},[270,649,285],{"class":327},[270,651,652],{"class":284},"b",[270,654,604],{"class":276},[270,656,607],{"class":301},[270,658,610],{"class":327},[270,660,613],{"class":276},[270,662,607],{"class":301},[270,664,665],{"class":327},"}`\n",[270,667,669,672,674,677,680,682,685,687],{"class":272,"line":668},17,[270,670,671],{"class":284},"    colors[key] ",[270,673,363],{"class":276},[270,675,676],{"class":284}," (colors[key] ",[270,678,679],{"class":276},"||",[270,681,491],{"class":301},[270,683,684],{"class":284},") ",[270,686,543],{"class":276},[270,688,689],{"class":301}," 1\n",[270,691,693],{"class":272,"line":692},18,[270,694,695],{"class":284},"  }\n",[270,697,699],{"class":272,"line":698},19,[270,700,418],{"emptyLinePlaceholder":417},[270,702,704,707,710,713],{"class":272,"line":703},20,[270,705,706],{"class":276},"  return",[270,708,709],{"class":284}," Object.",[270,711,712],{"class":280},"entries",[270,714,715],{"class":284},"(colors)\n",[270,717,719,722,725,728,731,733,735,737,740,743,746,749,752,755,757],{"class":272,"line":718},21,[270,720,721],{"class":284},"    .",[270,723,724],{"class":280},"sort",[270,726,727],{"class":284},"((",[270,729,730],{"class":288},"a",[270,732,292],{"class":284},[270,734,652],{"class":288},[270,736,684],{"class":284},[270,738,739],{"class":276},"=>",[270,741,742],{"class":284}," b[",[270,744,745],{"class":301},"1",[270,747,748],{"class":284},"] ",[270,750,751],{"class":276},"-",[270,753,754],{"class":284}," a[",[270,756,745],{"class":301},[270,758,759],{"class":284},"])\n",[270,761,763,765,768,770,772],{"class":272,"line":762},22,[270,764,721],{"class":284},[270,766,767],{"class":280},"slice",[270,769,285],{"class":284},[270,771,396],{"class":301},[270,773,774],{"class":284},", colorCount)\n",[270,776,778,780,783,786,789,792,794],{"class":272,"line":777},23,[270,779,721],{"class":284},[270,781,782],{"class":280},"map",[270,784,785],{"class":284},"(([",[270,787,788],{"class":288},"key",[270,790,791],{"class":284},"]) ",[270,793,739],{"class":276},[270,795,796],{"class":284}," {\n",[270,798,800,803,806,808,810,812,814,816,818,820,823,826,828,831,834,836],{"class":272,"line":799},24,[270,801,802],{"class":276},"      const",[270,804,805],{"class":284}," [",[270,807,601],{"class":301},[270,809,292],{"class":284},[270,811,629],{"class":301},[270,813,292],{"class":284},[270,815,652],{"class":301},[270,817,748],{"class":284},[270,819,363],{"class":276},[270,821,822],{"class":284}," key.",[270,824,825],{"class":280},"split",[270,827,285],{"class":284},[270,829,830],{"class":327},"','",[270,832,833],{"class":284},").",[270,835,782],{"class":280},[270,837,838],{"class":284},"(Number)\n",[270,840,842,845,848,851,854,857,859,861,864,867,870,873,875,877,879,882,884,887,889,892,895,898,900,903],{"class":272,"line":841},25,[270,843,844],{"class":276},"      return",[270,846,847],{"class":284}," { r, g, b, hex: ",[270,849,850],{"class":327},"'#'",[270,852,853],{"class":276}," +",[270,855,856],{"class":284}," [r, g, b].",[270,858,782],{"class":280},[270,860,285],{"class":284},[270,862,863],{"class":288},"v",[270,865,866],{"class":276}," =>",[270,868,869],{"class":284}," v.",[270,871,872],{"class":280},"toString",[270,874,285],{"class":284},[270,876,607],{"class":301},[270,878,833],{"class":284},[270,880,881],{"class":280},"padStart",[270,883,285],{"class":284},[270,885,886],{"class":301},"2",[270,888,292],{"class":284},[270,890,891],{"class":327},"'0'",[270,893,894],{"class":284},")).",[270,896,897],{"class":280},"join",[270,899,285],{"class":284},[270,901,902],{"class":327},"''",[270,904,905],{"class":284},") }\n",[270,907,909],{"class":272,"line":908},26,[270,910,911],{"class":284},"    })\n",[270,913,915],{"class":272,"line":914},27,[270,916,917],{"class":284},"}\n",[15,919,920,921,924,925,928],{},"This simplified histogram approach works for quick extraction. For production quality, use a library like ",[48,922,923],{},"colorthief"," or ",[48,926,927],{},"quantize"," that implements median cut.",[26,930,932],{"id":931},"nodejs-with-color-thief","Node.js with Color-Thief",[41,934,936],{"className":264,"code":935,"language":266,"meta":50,"style":50},"import ColorThief from 'colorthief'\n\nconst ct = new ColorThief()\nconst palette = await ct.getPalette('.\u002Fphoto.jpg', 5)\n\u002F\u002F Returns array of [r, g, b] arrays\n",[48,937,938,952,956,975,1005],{"__ignoreMap":50},[270,939,940,943,946,949],{"class":272,"line":273},[270,941,942],{"class":276},"import",[270,944,945],{"class":284}," ColorThief ",[270,947,948],{"class":276},"from",[270,950,951],{"class":327}," 'colorthief'\n",[270,953,954],{"class":272,"line":308},[270,955,418],{"emptyLinePlaceholder":417},[270,957,958,961,964,966,969,972],{"class":272,"line":334},[270,959,960],{"class":276},"const",[270,962,963],{"class":301}," ct",[270,965,298],{"class":276},[270,967,968],{"class":276}," new",[270,970,971],{"class":280}," ColorThief",[270,973,974],{"class":284},"()\n",[270,976,977,979,982,984,987,990,993,995,998,1000,1003],{"class":272,"line":357},[270,978,960],{"class":276},[270,980,981],{"class":301}," palette",[270,983,298],{"class":276},[270,985,986],{"class":276}," await",[270,988,989],{"class":284}," ct.",[270,991,992],{"class":280},"getPalette",[270,994,285],{"class":284},[270,996,997],{"class":327},"'.\u002Fphoto.jpg'",[270,999,292],{"class":284},[270,1001,1002],{"class":301},"5",[270,1004,331],{"class":284},[270,1006,1007],{"class":272,"line":373},[270,1008,1009],{"class":369},"\u002F\u002F Returns array of [r, g, b] arrays\n",[10,1011,1013],{"id":1012},"use-cases","Use Cases",[66,1015,1016,1029],{},[69,1017,1018],{},[72,1019,1020,1023,1026],{},[75,1021,1022],{},"Use case",[75,1024,1025],{},"How many colors",[75,1027,1028],{},"Notes",[88,1030,1031,1042,1053,1064,1075],{},[72,1032,1033,1036,1039],{},[93,1034,1035],{},"Product page matching hero image",[93,1037,1038],{},"3–4",[93,1040,1041],{},"Primary accent derived from product photo",[72,1043,1044,1047,1050],{},[93,1045,1046],{},"Dynamic avatar themes",[93,1048,1049],{},"2–3",[93,1051,1052],{},"Extract from profile picture",[72,1054,1055,1058,1061],{},[93,1056,1057],{},"Brand palette from mood board",[93,1059,1060],{},"5–8",[93,1062,1063],{},"Curate extracted colors, refine manually",[72,1065,1066,1069,1072],{},[93,1067,1068],{},"Data visualization palettes",[93,1070,1071],{},"6–10",[93,1073,1074],{},"Ensure perceptual uniformity between entries",[72,1076,1077,1080,1083],{},[93,1078,1079],{},"Accessibility-themed palettes",[93,1081,1082],{},"4–6",[93,1084,1085],{},"Verify contrast after extraction",[10,1087,1089],{"id":1088},"key-takeaways","Key Takeaways",[145,1091,1092,1095,1098,1101,1104,1107],{},[148,1093,1094],{},"Color extraction reveals the hidden palette inside any image",[148,1096,1097],{},"Median cut algorithm balances diversity and fidelity for most use cases",[148,1099,1100],{},"Extract 5–8 colors, then clean duplicates and low-frequency noise",[148,1102,1103],{},"Map extracted colors to UI roles rather than using them raw",[148,1105,1106],{},"Always verify WCAG contrast after extraction — dominant does not mean accessible",[148,1108,1109],{},"Browser canvas provides a quick extraction method; use dedicated libraries for quality palettes",[10,1111,1113],{"id":1112},"try-it-yourself","Try It Yourself",[15,1115,1116,1117,1121],{},"Pick and refine colors visually with our free ",[730,1118,1120],{"href":1119},"\u002Ftools\u002Fcolor-picker","Color Picker",". Choose from any source, convert between formats, and copy production-ready color values instantly.",[10,1123,1125],{"id":1124},"related-guides","Related Guides",[145,1127,1128,1134,1140],{},[148,1129,1130],{},[730,1131,1133],{"href":1132},"\u002Fguides\u002Fcolor-code-formats","Color Code Formats",[148,1135,1136],{},[730,1137,1139],{"href":1138},"\u002Fguides\u002Fcolor-picker-workflow-designers","Color Picker Workflow for Designers",[148,1141,1142],{},[730,1143,1145],{"href":1144},"\u002Fguides\u002Fdesign-color-fundamentals","Design Color Fundamentals",[1147,1148,1149],"style",{},"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 .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"title":50,"searchDepth":308,"depth":308,"links":1151},[1152,1153,1159,1165,1169,1170,1171,1172],{"id":12,"depth":308,"text":13},{"id":23,"depth":308,"text":24,"children":1154},[1155,1156,1157,1158],{"id":28,"depth":334,"text":29},{"id":35,"depth":334,"text":36},{"id":56,"depth":334,"text":57},{"id":63,"depth":334,"text":64},{"id":135,"depth":308,"text":136,"children":1160},[1161,1162,1163,1164],{"id":139,"depth":334,"text":140},{"id":159,"depth":334,"text":160},{"id":166,"depth":334,"text":167},{"id":184,"depth":334,"text":185},{"id":256,"depth":308,"text":257,"children":1166},[1167,1168],{"id":260,"depth":334,"text":261},{"id":931,"depth":334,"text":932},{"id":1012,"depth":308,"text":1013},{"id":1088,"depth":308,"text":1089},{"id":1112,"depth":308,"text":1113},{"id":1124,"depth":308,"text":1125},"2026-05-28","Learn how to extract dominant colors and palettes from images — methods, algorithms, tools, and practical use cases for designers and developers.","md",{"immutable":417},"\u002Fguides\u002Fextracting-colors-from-images",{"title":5,"description":1174},"guides\u002Fextracting-colors-from-images","-zk3MUQlSMIDm1TtFnBZPC_hcuEoG_ITF1rVKluMads",1780401333745]