点击上传 或把图片拖到这里
PNG、JPG、GIF 或 WebP — 图片始终留在你的浏览器中关于从照片提取配色
每个做设计的人都经历过:某张照片恰好就是项目需要的那种气质,而接下来的活,就是把这种气质从图片里取出来,放进样式表。
靠猜是不行的。屏幕上看着像「暖灰」的颜色,几乎不会是你自己敲出来的那个灰。唯一能取准的办法,就是取那个真实的像素。
把照片拖进来,用放大镜在上面移动,点击你要的色调。 每一个都会加入下方的配色,附带可直接复制的 HEX、RGB 和 HSL 值。
使用方法
- 点击点击上传,把照片拖到页面上,或者粘贴图片网址
- 把指针移到图片上 — 放大镜会显示正下方的那个像素
- 点击即可把该颜色加入你的配色
- 需要几个就取几个 — 五六个通常就是一套配色了
- 点击配色里的任一色块即可切回它:大色块和 HEX、RGB、HSL 三个数值都会跟着切换,同时复制它的 HEX
- 用复制 HEX / RGB / HSL 取走你需要的格式
为什么由你自己挑颜色
有些工具会把出现最多的颜色归类,自动「猜」出一套配色。这听上去比实际好。照片里出现最多的颜色,通常是天空、墙面、阴影这类又大又沉闷的区域;而真正赋予画面性格的,往往是很小的一块:门上的锈、一片叶子的绿、杯沿的高光。
哪个是哪个,你一眼就能分辨。放大镜让你在最大倍率下取到正是那一个像素,于是这套配色是你想要的那套,而不是平均值算出来的那套。
配色是一个可以回头的地方
色块不只是你点过什么的记录。点击其中一个,它就成为当前颜色 — 大色块和三个数值全部切换过去,正在查看的那一块会被描上一圈,让你知道对应的是哪一个。
正是这一点让比较两个色调变得可行:先从照片里把两个都取下来,然后在它们之间来回点击、读取数值,而不必回到图片里重新寻找一分钟前的那个像素。
三种格式,因为不同的地方要的不一样
你选中的每个颜色都会同时以三种格式显示:
- HEX — #3f7a5e。CSS、设计软件,几乎哪儿都用
- RGB — rgb(63, 122, 94)。需要单独处理通道时很方便
- HSL — hsl(154, 32%, 36%)。要做出一组深浅色阶时就用它:保持色相不变、只调明度,就能得到彼此协调的浅色与深色
人们用它做什么
- 谁也找不到品牌手册时,从标志里取出品牌色
- 从主视觉照片构建网站或幻灯片的配色
- 对照实物照片挑选涂料、布料或线
- 取得截图中某个颜色的准确 HEX
- 找出想要借鉴的画作或照片所用的颜色
- 弄清一个颜色究竟是什么,而不是它挨着另一个颜色时看起来像什么
值得知道
- 不上传任何内容。图片在页面内读取,绝不会离开你的设备
- 支持 PNG、JPG、GIF 和 WebP
- 你也可以粘贴图片网址而不是上传文件 — 但有些服务器禁止其他站点读取其像素(CORS)。遇到这种情况,请先下载图片再上传文件
- 颜色取自原始尺寸的真实像素,而不是缩小后的预览,因此数值是精确的
- 在手机和平板上同样可用
- 这与图片取色器是同一个工具 — 只想取一个颜色时,请用那个页面