[{"data":1,"prerenderedAt":124},["ShallowReactive",2],{"topic-doc-image-color-picker-hex-rgb-guide":3},{"id":4,"title":5,"body":6,"canonical":102,"description":103,"draft":104,"extension":105,"faqRefs":106,"h1":5,"meta":108,"navigation":109,"path":110,"published":109,"relatedTools":111,"robots":115,"seo":116,"slug":118,"stem":119,"summary":120,"theme":121,"updatedAt":122,"__hash__":123},"topics\u002Ftopics\u002Fimage-color-picker-hex-rgb-guide.md","图片颜色怎么取 HEX 和 RGB",{"type":7,"value":8,"toc":92},"minimark",[9,13,26,29,50,53,67,70,84,87],[10,11,12],"h2",{"id":12},"使用场景",[14,15,16,20,23],"ul",{},[17,18,19],"li",{},"想从商品主图里提取背景色或品牌色。",[17,21,22],{},"做头像、封面、海报时，需要复用已有图片的主色。",[17,24,25],{},"和设计、开发沟通时，需要给出准确色值，而不是只描述“浅蓝”“深红”。",[10,27,28],{"id":28},"推荐处理顺序",[30,31,32,35,38,41,44,47],"ol",{},[17,33,34],{},"打开原图，先放大到颜色边界看得清楚。",[17,36,37],{},"在目标颜色的实色区域点选，不要选在高光、阴影或渐变边缘。",[17,39,40],{},"先记录 HEX，网页、封面和常见在线编辑场景更容易直接使用。",[17,42,43],{},"同时记录 RGB，方便在设计软件、办公软件或开发沟通中核对。",[17,45,46],{},"对同一颜色取样 2 到 3 个点，选择最稳定的值。",[17,48,49],{},"如果图片经过滤镜或压缩，尽量回到原图重新取色。",[10,51,52],{"id":52},"重点看哪里",[14,54,55,58,61,64],{},[17,56,57],{},"透明边缘和阴影区域会偏色，尽量在实色区取样。",[17,59,60],{},"渐变色没有唯一色值，应说明取的是顶部、中部还是底部颜色。",[17,62,63],{},"品牌色不要只取一次，至少对照页面或成片效果确认。",[17,65,66],{},"若用于网页，优先 HEX；若用于界面开发，也常会同时需要 RGB。",[10,68,69],{"id":69},"常见错误与修正",[14,71,72,75,78,81],{},[17,73,74],{},"错误：只取一次颜色就定稿。\n修正：在同一色块内取多个点，选最稳定的值。",[17,76,77],{},"错误：把压缩后缩略图当源图。\n修正：用清晰原图取色。",[17,79,80],{},"错误：忽略采样上下文。\n修正：记录颜色来自哪个区域，避免别人误用到相邻色。",[17,82,83],{},"错误：从阴影或反光位置取样。\n修正：改到受光均匀、没有透明边的区域取色。",[10,85,86],{"id":86},"进阶建议",[14,88,89],{},[17,90,91],{},"把色值放回实际页面、封面或商品图里看一次，确认视觉效果和原图一致。",{"title":93,"searchDepth":94,"depth":94,"links":95},"",3,[96,98,99,100,101],{"id":12,"depth":97,"text":12},2,{"id":28,"depth":97,"text":28},{"id":52,"depth":97,"text":52},{"id":69,"depth":97,"text":69},{"id":86,"depth":97,"text":86},null,"从图片、商品图、头像或封面图中提取颜色时，先避开阴影和透明边缘，再复制 HEX、RGB 等常用色值。",false,"md",[107],"image-color-picker-format",{},true,"\u002Ftopics\u002Fimage-color-picker-hex-rgb-guide",[112,113,114],"image-color-picker","image-filter","image-adjustment","index,follow",{"title":5,"description":117,"robots":115},"图片取色方法，适合从商品图、头像、封面图和品牌截图中提取 HEX、RGB、HSL、HSV、CMYK 色值，并避免阴影和透明边缘偏色。","image-color-picker-hex-rgb-guide","topics\u002Fimage-color-picker-hex-rgb-guide","先在实色区域取样，再对比多个点位；网页配色优先记录 HEX，设计交接可同时保留 RGB。","workflow","2026-06-18","OvB_PowuDhmzgZt-JjB9baa6uQR-2Pae2Ie6yEVcTXI",1781797968867]