[{"data":1,"prerenderedAt":930},["ShallowReactive",2],{"guide-eyedropper-tool-web-design":3},{"id":4,"title":5,"body":6,"date":922,"description":923,"extension":924,"meta":925,"navigation":269,"path":926,"readingTime":138,"seo":927,"stem":928,"__hash__":929},"guides\u002Fguides\u002Feyedropper-tool-web-design.md","Eyedropper Tools for Web Designers",{"type":7,"value":8,"toc":900},"minimark",[9,14,18,21,25,33,38,192,196,354,358,431,434,509,513,516,520,523,527,606,610,638,642,645,716,720,723,745,748,752,756,770,831,835,838,852,855,859,880,884,887,896],[10,11,13],"h2",{"id":12},"the-modern-color-picking-workflow","The Modern Color Picking Workflow",[15,16,17],"p",{},"Every web designer has been there: you see a color on a website, in an image, or in another application and need to match it in your project. The old workflow — screenshot, paste into Photoshop, sample — is slow. Modern eyedropper tools let you pick any color on screen in seconds.",[15,19,20],{},"The landscape splits into three categories: native browser APIs, browser extensions, and standalone desktop apps. Each has different strengths depending on your workflow.",[10,22,24],{"id":23},"the-eyedropper-api","The EyeDropper API",[15,26,27,28,32],{},"Modern browsers now support the ",[29,30,31],"strong",{},"EyeDropper API",", a JavaScript API that lets web applications access a system-level color picker directly. No extensions needed.",[34,35,37],"h3",{"id":36},"how-it-works","How It Works",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-javascript shiki shiki-themes github-light github-dark","async function pickColor() {\n  try {\n    const eyeDropper = new EyeDropper()\n    const result = await eyeDropper.open()\n    console.log(result.sRGBHex) \u002F\u002F \"#ff6600\"\n    return result.sRGBHex\n  } catch (e) {\n    \u002F\u002F User cancelled the picker\n    console.log('Color picking cancelled')\n  }\n}\n","javascript","",[46,47,48,68,77,99,120,136,145,157,163,180,186],"code",{"__ignoreMap":44},[49,50,53,57,60,64],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"szBVR","async",[49,58,59],{"class":55}," function",[49,61,63],{"class":62},"sScJk"," pickColor",[49,65,67],{"class":66},"sVt8B","() {\n",[49,69,71,74],{"class":51,"line":70},2,[49,72,73],{"class":55},"  try",[49,75,76],{"class":66}," {\n",[49,78,80,83,87,90,93,96],{"class":51,"line":79},3,[49,81,82],{"class":55},"    const",[49,84,86],{"class":85},"sj4cs"," eyeDropper",[49,88,89],{"class":55}," =",[49,91,92],{"class":55}," new",[49,94,95],{"class":62}," EyeDropper",[49,97,98],{"class":66},"()\n",[49,100,102,104,107,109,112,115,118],{"class":51,"line":101},4,[49,103,82],{"class":55},[49,105,106],{"class":85}," result",[49,108,89],{"class":55},[49,110,111],{"class":55}," await",[49,113,114],{"class":66}," eyeDropper.",[49,116,117],{"class":62},"open",[49,119,98],{"class":66},[49,121,123,126,129,132],{"class":51,"line":122},5,[49,124,125],{"class":66},"    console.",[49,127,128],{"class":62},"log",[49,130,131],{"class":66},"(result.sRGBHex) ",[49,133,135],{"class":134},"sJ8bj","\u002F\u002F \"#ff6600\"\n",[49,137,139,142],{"class":51,"line":138},6,[49,140,141],{"class":55},"    return",[49,143,144],{"class":66}," result.sRGBHex\n",[49,146,148,151,154],{"class":51,"line":147},7,[49,149,150],{"class":66},"  } ",[49,152,153],{"class":55},"catch",[49,155,156],{"class":66}," (e) {\n",[49,158,160],{"class":51,"line":159},8,[49,161,162],{"class":134},"    \u002F\u002F User cancelled the picker\n",[49,164,166,168,170,173,177],{"class":51,"line":165},9,[49,167,125],{"class":66},[49,169,128],{"class":62},[49,171,172],{"class":66},"(",[49,174,176],{"class":175},"sZZnC","'Color picking cancelled'",[49,178,179],{"class":66},")\n",[49,181,183],{"class":51,"line":182},10,[49,184,185],{"class":66},"  }\n",[49,187,189],{"class":51,"line":188},11,[49,190,191],{"class":66},"}\n",[34,193,195],{"id":194},"triggering-the-picker","Triggering the Picker",[39,197,201],{"className":198,"code":199,"language":200,"meta":44,"style":44},"language-html shiki shiki-themes github-light github-dark","\u003Cbutton onclick=\"pickColor()\">Pick a Color\u003C\u002Fbutton>\n\u003Cdiv id=\"preview\" style=\"width:40px; height:40px; border:1px solid #ccc;\">\u003C\u002Fdiv>\n\n\u003Cscript>\nasync function pickColor() {\n  const eyeDropper = new EyeDropper()\n  const result = await eyeDropper.open()\n  document.getElementById('preview').style.backgroundColor = result.sRGBHex\n}\n\u003C\u002Fscript>\n","html",[46,202,203,235,265,271,280,290,305,321,341,345],{"__ignoreMap":44},[49,204,205,208,212,215,218,221,224,227,230,232],{"class":51,"line":52},[49,206,207],{"class":66},"\u003C",[49,209,211],{"class":210},"s9eBZ","button",[49,213,214],{"class":62}," onclick",[49,216,217],{"class":66},"=",[49,219,220],{"class":175},"\"",[49,222,223],{"class":62},"pickColor",[49,225,226],{"class":175},"()\"",[49,228,229],{"class":66},">Pick a Color\u003C\u002F",[49,231,211],{"class":210},[49,233,234],{"class":66},">\n",[49,236,237,239,242,245,247,250,253,255,258,261,263],{"class":51,"line":70},[49,238,207],{"class":66},[49,240,241],{"class":210},"div",[49,243,244],{"class":62}," id",[49,246,217],{"class":66},[49,248,249],{"class":175},"\"preview\"",[49,251,252],{"class":62}," style",[49,254,217],{"class":66},[49,256,257],{"class":175},"\"width:40px; height:40px; border:1px solid #ccc;\"",[49,259,260],{"class":66},">\u003C\u002F",[49,262,241],{"class":210},[49,264,234],{"class":66},[49,266,267],{"class":51,"line":79},[49,268,270],{"emptyLinePlaceholder":269},true,"\n",[49,272,273,275,278],{"class":51,"line":101},[49,274,207],{"class":66},[49,276,277],{"class":210},"script",[49,279,234],{"class":66},[49,281,282,284,286,288],{"class":51,"line":122},[49,283,56],{"class":55},[49,285,59],{"class":55},[49,287,63],{"class":62},[49,289,67],{"class":66},[49,291,292,295,297,299,301,303],{"class":51,"line":138},[49,293,294],{"class":55},"  const",[49,296,86],{"class":85},[49,298,89],{"class":55},[49,300,92],{"class":55},[49,302,95],{"class":62},[49,304,98],{"class":66},[49,306,307,309,311,313,315,317,319],{"class":51,"line":147},[49,308,294],{"class":55},[49,310,106],{"class":85},[49,312,89],{"class":55},[49,314,111],{"class":55},[49,316,114],{"class":66},[49,318,117],{"class":62},[49,320,98],{"class":66},[49,322,323,326,329,331,334,337,339],{"class":51,"line":159},[49,324,325],{"class":66},"  document.",[49,327,328],{"class":62},"getElementById",[49,330,172],{"class":66},[49,332,333],{"class":175},"'preview'",[49,335,336],{"class":66},").style.backgroundColor ",[49,338,217],{"class":55},[49,340,144],{"class":66},[49,342,343],{"class":51,"line":165},[49,344,191],{"class":66},[49,346,347,350,352],{"class":51,"line":182},[49,348,349],{"class":66},"\u003C\u002F",[49,351,277],{"class":210},[49,353,234],{"class":66},[34,355,357],{"id":356},"browser-support","Browser Support",[359,360,361,377],"table",{},[362,363,364],"thead",{},[365,366,367,371,374],"tr",{},[368,369,370],"th",{},"Browser",[368,372,373],{},"Support",[368,375,376],{},"Notes",[378,379,380,392,401,411,422],"tbody",{},[365,381,382,386,389],{},[383,384,385],"td",{},"Chrome",[383,387,388],{},"95+",[383,390,391],{},"Full support",[365,393,394,397,399],{},[383,395,396],{},"Edge",[383,398,388],{},[383,400,391],{},[365,402,403,406,409],{},[383,404,405],{},"Opera",[383,407,408],{},"81+",[383,410,391],{},[365,412,413,416,419],{},[383,414,415],{},"Firefox",[383,417,418],{},"No",[383,420,421],{},"Not implemented",[365,423,424,427,429],{},[383,425,426],{},"Safari",[383,428,418],{},[383,430,421],{},[15,432,433],{},"For unsupported browsers, fall back to a manual color input:",[39,435,437],{"className":41,"code":436,"language":43,"meta":44,"style":44},"function isEyeDropperSupported() {\n  return 'EyeDropper' in window\n}\n\nif (isEyeDropperSupported()) {\n  \u002F\u002F Show eyedropper button\n} else {\n  \u002F\u002F Show fallback color input\n}\n",[46,438,439,449,463,467,471,485,490,500,505],{"__ignoreMap":44},[49,440,441,444,447],{"class":51,"line":52},[49,442,443],{"class":55},"function",[49,445,446],{"class":62}," isEyeDropperSupported",[49,448,67],{"class":66},[49,450,451,454,457,460],{"class":51,"line":70},[49,452,453],{"class":55},"  return",[49,455,456],{"class":175}," 'EyeDropper'",[49,458,459],{"class":55}," in",[49,461,462],{"class":66}," window\n",[49,464,465],{"class":51,"line":79},[49,466,191],{"class":66},[49,468,469],{"class":51,"line":101},[49,470,270],{"emptyLinePlaceholder":269},[49,472,473,476,479,482],{"class":51,"line":122},[49,474,475],{"class":55},"if",[49,477,478],{"class":66}," (",[49,480,481],{"class":62},"isEyeDropperSupported",[49,483,484],{"class":66},"()) {\n",[49,486,487],{"class":51,"line":138},[49,488,489],{"class":134},"  \u002F\u002F Show eyedropper button\n",[49,491,492,495,498],{"class":51,"line":147},[49,493,494],{"class":66},"} ",[49,496,497],{"class":55},"else",[49,499,76],{"class":66},[49,501,502],{"class":51,"line":159},[49,503,504],{"class":134},"  \u002F\u002F Show fallback color input\n",[49,506,507],{"class":51,"line":165},[49,508,191],{"class":66},[34,510,512],{"id":511},"security-considerations","Security Considerations",[15,514,515],{},"The EyeDropper API requires user activation — you can't open the picker automatically. This prevents malicious sites from silently sampling screen content. The browser shows explicit UI indicating the picker is active, and users can cancel at any time with Escape.",[10,517,519],{"id":518},"browser-extensions","Browser Extensions",[15,521,522],{},"Extensions work everywhere on the page and can pick colors from any visible element, including areas outside the web page content area.",[34,524,526],{"id":525},"top-extensions-compared","Top Extensions Compared",[359,528,529,546],{},[362,530,531],{},[365,532,533,536,538,540,543],{},[368,534,535],{},"Extension",[368,537,385],{},[368,539,415],{},[368,541,542],{},"Features",[368,544,545],{},"Price",[378,547,548,564,578,592],{},[365,549,550,553,556,558,561],{},[383,551,552],{},"ColorZilla",[383,554,555],{},"Yes",[383,557,555],{},[383,559,560],{},"Eyedropper, CSS gradient generator, palette history",[383,562,563],{},"Free",[365,565,566,569,571,573,576],{},[383,567,568],{},"Eye Dropper",[383,570,555],{},[383,572,418],{},[383,574,575],{},"Simple picker, history, multiple formats",[383,577,563],{},[365,579,580,583,585,587,590],{},[383,581,582],{},"ColorPick Eyedropper",[383,584,555],{},[383,586,418],{},[383,588,589],{},"Zoom picker, auto-copy, formats",[383,591,563],{},[365,593,594,597,599,601,604],{},[383,595,596],{},"Rainbow Color Tools",[383,598,418],{},[383,600,555],{},[383,602,603],{},"Picker, inspector, library",[383,605,563],{},[34,607,609],{"id":608},"what-extensions-offer-over-the-api","What Extensions Offer Over the API",[611,612,613,620,626,632],"ul",{},[614,615,616,619],"li",{},[29,617,618],{},"Cross-origin picking",": Extensions can sample colors from browser chrome (toolbars, other tabs), while the EyeDropper API is limited to screen pixels",[614,621,622,625],{},[29,623,624],{},"Persistent history",": Save picked colors across sessions",[614,627,628,631],{},[29,629,630],{},"Format conversion",": Instantly convert between hex, RGB, HSL, and OKLCH",[614,633,634,637],{},[29,635,636],{},"Palette building",": Click multiple colors to build a palette without leaving the picker",[10,639,641],{"id":640},"desktop-eyedropper-apps","Desktop Eyedropper Apps",[15,643,644],{},"When you need to pick colors outside the browser — from desktop apps, games, or system UI — a desktop tool is the only option.",[359,646,647,660],{},[362,648,649],{},[365,650,651,654,657],{},[368,652,653],{},"Tool",[368,655,656],{},"Platform",[368,658,659],{},"Key Feature",[378,661,662,673,684,695,705],{},[365,663,664,667,670],{},[383,665,666],{},"macOS Digital Color Meter",[383,668,669],{},"macOS",[383,671,672],{},"Built-in, no install",[365,674,675,678,681],{},[383,676,677],{},"PowerToys Color Picker",[383,679,680],{},"Windows",[383,682,683],{},"Win+Shift+C, auto-copy",[365,685,686,689,692],{},[383,687,688],{},"gpick",[383,690,691],{},"Linux",[383,693,694],{},"Advanced palette management",[365,696,697,700,702],{},[383,698,699],{},"Sip",[383,701,669],{},[383,703,704],{},"Design app integration",[365,706,707,710,713],{},[383,708,709],{},"Just Color Picker",[383,711,712],{},"Win\u002FMac",[383,714,715],{},"Multiple format output",[34,717,719],{"id":718},"windows-powertoys-setup","Windows PowerToys Setup",[15,721,722],{},"PowerToys Color Picker is the fastest option for Windows users:",[724,725,726,729,732,739,742],"ol",{},[614,727,728],{},"Install PowerToys from Microsoft Store or GitHub",[614,730,731],{},"Enable \"Color Picker\" in PowerToys settings",[614,733,734,735,738],{},"Set activation shortcut (default: ",[46,736,737],{},"Win+Shift+C",")",[614,740,741],{},"Click any pixel on screen to copy the hex value",[614,743,744],{},"Press the shortcut again to view history",[15,746,747],{},"The picked color is automatically copied to your clipboard, ready to paste into CSS.",[10,749,751],{"id":750},"integrating-eyedropper-picks-into-your-workflow","Integrating Eyedropper Picks Into Your Workflow",[34,753,755],{"id":754},"from-pick-to-css-variable","From Pick to CSS Variable",[724,757,758,761,764,767],{},[614,759,760],{},"Pick the color using any tool above",[614,762,763],{},"Paste the hex value into your color converter",[614,765,766],{},"Convert to OKLCH for your design tokens",[614,768,769],{},"Add to your CSS custom properties",[39,771,775],{"className":772,"code":773,"language":774,"meta":44,"style":44},"language-css shiki shiki-themes github-light github-dark",":root {\n  --brand-primary: oklch(0.55 0.2 260);\n  \u002F* Fallback *\u002F\n  --brand-primary: #3366ff;\n}\n","css",[46,776,777,784,810,815,827],{"__ignoreMap":44},[49,778,779,782],{"class":51,"line":52},[49,780,781],{"class":62},":root",[49,783,76],{"class":66},[49,785,786,790,793,796,798,801,804,807],{"class":51,"line":70},[49,787,789],{"class":788},"s4XuR","  --brand-primary",[49,791,792],{"class":66},": ",[49,794,795],{"class":85},"oklch",[49,797,172],{"class":66},[49,799,800],{"class":85},"0.55",[49,802,803],{"class":85}," 0.2",[49,805,806],{"class":85}," 260",[49,808,809],{"class":66},");\n",[49,811,812],{"class":51,"line":79},[49,813,814],{"class":134},"  \u002F* Fallback *\u002F\n",[49,816,817,819,821,824],{"class":51,"line":101},[49,818,789],{"class":788},[49,820,792],{"class":66},[49,822,823],{"class":85},"#3366ff",[49,825,826],{"class":66},";\n",[49,828,829],{"class":51,"line":122},[49,830,191],{"class":66},[34,832,834],{"id":833},"building-palettes-from-picks","Building Palettes from Picks",[15,836,837],{},"Don't use picked colors directly — they're almost never part of a coherent system. Instead:",[724,839,840,843,846,849],{},[614,841,842],{},"Pick the reference color from your inspiration source",[614,844,845],{},"Identify the hue angle in OKLCH",[614,847,848],{},"Generate a full shade scale from that hue",[614,850,851],{},"Validate contrast ratios for text usage",[15,853,854],{},"This converts a single inspiration color into a complete, accessible design system.",[10,856,858],{"id":857},"related-guides","Related Guides",[611,860,861,868,874],{},[614,862,863],{},[864,865,867],"a",{"href":866},"\u002Fguides\u002Fcolor-picker-guide","Color Picker Guide",[614,869,870],{},[864,871,873],{"href":872},"\u002Fguides\u002Fcolor-code-formats","Color Code Formats",[614,875,876],{},[864,877,879],{"href":878},"\u002Fguides\u002Foklch-color-space-explained","OKLCH Color Space Explained",[10,881,883],{"id":882},"try-it-yourself","Try It Yourself",[15,885,886],{},"Pick colors from anywhere on your screen and instantly convert them to hex, RGB, HSL, and OKLCH. Our free tool handles every format you need.",[15,888,889,890],{},"👉 ",[864,891,893],{"href":892},"\u002Ftools\u002Fcolor-picker",[29,894,895],{},"Free Color Picker",[897,898,899],"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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":44,"searchDepth":70,"depth":70,"links":901},[902,903,909,913,916,920,921],{"id":12,"depth":70,"text":13},{"id":23,"depth":70,"text":24,"children":904},[905,906,907,908],{"id":36,"depth":79,"text":37},{"id":194,"depth":79,"text":195},{"id":356,"depth":79,"text":357},{"id":511,"depth":79,"text":512},{"id":518,"depth":70,"text":519,"children":910},[911,912],{"id":525,"depth":79,"text":526},{"id":608,"depth":79,"text":609},{"id":640,"depth":70,"text":641,"children":914},[915],{"id":718,"depth":79,"text":719},{"id":750,"depth":70,"text":751,"children":917},[918,919],{"id":754,"depth":79,"text":755},{"id":833,"depth":79,"text":834},{"id":857,"depth":70,"text":858},{"id":882,"depth":70,"text":883},"2026-05-28","How to use browser eyedropper APIs and extensions to pick colors from any screen element.","md",{"immutable":269},"\u002Fguides\u002Feyedropper-tool-web-design",{"title":5,"description":923},"guides\u002Feyedropper-tool-web-design","RvLhfRZxRe8PZXF65-BNQhkk0fFfQPzBGk0XYL4AFYk",1780401333815]