使用指南

图片颜色怎么取 HEX 和 RGB

先在实色区域取样,再对比多个点位;网页配色优先记录 HEX,设计交接可同时保留 RGB。

使用场景

  • 想从商品主图里提取背景色或品牌色。
  • 做头像、封面、海报时,需要复用已有图片的主色。
  • 和设计、开发沟通时,需要给出准确色值,而不是只描述“浅蓝”“深红”。

推荐处理顺序

  1. 打开原图,先放大到颜色边界看得清楚。
  2. 在目标颜色的实色区域点选,不要选在高光、阴影或渐变边缘。
  3. 先记录 HEX,网页、封面和常见在线编辑场景更容易直接使用。
  4. 同时记录 RGB,方便在设计软件、办公软件或开发沟通中核对。
  5. 对同一颜色取样 2 到 3 个点,选择最稳定的值。
  6. 如果图片经过滤镜或压缩,尽量回到原图重新取色。

重点看哪里

  • 透明边缘和阴影区域会偏色,尽量在实色区取样。
  • 渐变色没有唯一色值,应说明取的是顶部、中部还是底部颜色。
  • 品牌色不要只取一次,至少对照页面或成片效果确认。
  • 若用于网页,优先 HEX;若用于界面开发,也常会同时需要 RGB。

常见错误与修正

  • 错误:只取一次颜色就定稿。 修正:在同一色块内取多个点,选最稳定的值。
  • 错误:把压缩后缩略图当源图。 修正:用清晰原图取色。
  • 错误:忽略采样上下文。 修正:记录颜色来自哪个区域,避免别人误用到相邻色。
  • 错误:从阴影或反光位置取样。 修正:改到受光均匀、没有透明边的区域取色。

进阶建议

  • 把色值放回实际页面、封面或商品图里看一次,确认视觉效果和原图一致。

相关问题