从图片提取配色

从任意照片构建配色 — 挑出想要的色调,并以 HEX、RGB 或 HSL 复制。

100% 隐私安全 — 完全在您的浏览器中运行。您的数据在本地设备上处理,绝不会发送到互联网。

点击上传 或把图片拖到这里

PNG、JPG、GIF 或 WebP — 图片始终留在你的浏览器中

关于从照片提取配色

每个做设计的人都经历过:某张照片恰好就是项目需要的那种气质,而接下来的活,就是把这种气质从图片里取出来,放进样式表。

靠猜是不行的。屏幕上看着像「暖灰」的颜色,几乎不会是你自己敲出来的那个灰。唯一能取准的办法,就是取那个真实的像素。

把照片拖进来,用放大镜在上面移动,点击你要的色调。 每一个都会加入下方的配色,附带可直接复制的 HEX、RGB 和 HSL 值。

使用方法

  • 点击点击上传,把照片拖到页面上,或者粘贴图片网址
  • 把指针移到图片上 — 放大镜会显示正下方的那个像素
  • 点击即可把该颜色加入你的配色
  • 需要几个就取几个 — 五六个通常就是一套配色了
  • 点击配色里的任一色块即可切回它:大色块和 HEX、RGB、HSL 三个数值都会跟着切换,同时复制它的 HEX
  • 复制 HEX / RGB / HSL 取走你需要的格式

为什么由你自己挑颜色

有些工具会把出现最多的颜色归类,自动「猜」出一套配色。这听上去比实际好。照片里出现最的颜色,通常是天空、墙面、阴影这类又大又沉闷的区域;而真正赋予画面性格的,往往是很小的一块:门上的锈、一片叶子的绿、杯沿的高光。

哪个是哪个,你一眼就能分辨。放大镜让你在最大倍率下取到正是那一个像素,于是这套配色是你想要的那套,而不是平均值算出来的那套。

配色是一个可以回头的地方

色块不只是你点过什么的记录。点击其中一个,它就成为当前颜色 — 大色块和三个数值全部切换过去,正在查看的那一块会被描上一圈,让你知道对应的是哪一个。

正是这一点让比较两个色调变得可行:先从照片里把两个都取下来,然后在它们之间来回点击、读取数值,而不必回到图片里重新寻找一分钟前的那个像素。

三种格式,因为不同的地方要的不一样

你选中的每个颜色都会同时以三种格式显示:

  • HEX#3f7a5e。CSS、设计软件,几乎哪儿都用
  • RGBrgb(63, 122, 94)。需要单独处理通道时很方便
  • HSLhsl(154, 32%, 36%)。要做出一组深浅色阶时就用它:保持色相不变、只调明度,就能得到彼此协调的浅色与深色

人们用它做什么

  • 谁也找不到品牌手册时,从标志里取出品牌色
  • 从主视觉照片构建网站或幻灯片的配色
  • 对照实物照片挑选涂料、布料或线
  • 取得截图中某个颜色的准确 HEX
  • 找出想要借鉴的画作或照片所用的颜色
  • 弄清一个颜色究竟是什么,而不是它挨着另一个颜色时看起来像什么

值得知道

  • 不上传任何内容。图片在页面内读取,绝不会离开你的设备
  • 支持 PNG、JPG、GIF 和 WebP
  • 你也可以粘贴图片网址而不是上传文件 — 但有些服务器禁止其他站点读取其像素(CORS)。遇到这种情况,请先下载图片再上传文件
  • 颜色取自原始尺寸的真实像素,而不是缩小后的预览,因此数值是精确的
  • 在手机和平板上同样可用
  • 这与图片取色器是同一个工具 — 只想取一个颜色时,请用那个页面

相关工具

我们会定期添加新工具——在 YouTube 上订阅,即可在每个新工具上线时收到通知。

更多工具

查看全部

推荐应用

查看全部