取色器

在色板上滑动来挑颜色,或者取现成的:用吸管从图片上取,浏览器支持的话还能直接从屏幕上取。三种写法的代码立刻出现。

选择颜色

最近用过

从屏幕任意位置取色是只有 Chrome 和 Edge 才有的浏览器能力。在 Safari 和 Firefox 里这个按钮根本不显示——先承诺再拒绝,比不提供更糟。那里请用图片:截个屏一样好用。

图片留在这个标签页里:颜色就在本地画布上读取,不上传任何内容。最近用过的颜色只记在这台设备上。

相关工具: 颜色转换器 · 配色生成器 · CSS 渐变生成器 · HEX 转 RGB

使用方法

  1. 在色板上拖动选择明暗,下面的滑条切换色相。
  2. 需要半透明就调不透明度——它会出现在 rgba 里,或者变成 HEX 末尾多出的两个字符。
  3. 要取现成的颜色,点「从图片取色」再点图片。在 Chrome 和 Edge 里还能直接从屏幕上取。
  4. 点你需要那一行旁边的「复制」。颜色会进入最近用过的色条,方便回头再用。

实用说明

为什么色板用 HSV

在 HSV 里,饱和度对明度的方块是铺满的:每一点都是一种颜色。同样的方块换成 HSL 就退化了——上边一排全白,下边一排全黑,一半面积什么都选不出来。这就是选择 HSV 的全部理由,测试守的也正是这一条。

三个入口,因为来的人问题不同

挑一个颜色和找一个颜色是两件事。色板用来挑。图片上的吸管,用来取已经存在的颜色:截图里的、标志里的、照片里的。从屏幕上取是同一件事,只是不用离开窗口,而这只有 Chrome 和 Edge 会。

透明度出现在什么时候

只有不完全不透明时才写:写「rgb(31, 95, 214)」而不是「rgba(31, 95, 214, 1)」,后者反正要手工清掉。在 HEX 里透明度是末尾多出的两个字符:现在的浏览器都认,老工具不认,所以完全不透明时不写这个尾巴。

常见问题

为什么我的浏览器里没有「从屏幕取色」按钮?

因为 Safari 和 Firefox 不支持。这是浏览器的能力,不是我们的,只有 Chrome 和 Edge 有。先摆出按钮再拒绝,比不提供更糟——所以干脆不显示。截个屏,用图片取色,结果完全一样。

怎么取照片上某个像素的颜色?

点「从图片取色」,选好文件,把指针在图上移动——颜色跟着指针走。点一下就留住。图片不会上传到任何地方:它画在本标签页的画布上,颜色也从那里读。

能直接输入颜色而不是挑吗?

能。在三个输入框的任意一个里按常见写法填——#1f5fd6、1f5fd6、rgb(31, 95, 214)——另外两个连同色板会自动跟上。如果只是要在写法之间转换,隔壁的颜色转换器路更短。

我把明度拉到零时,色相滑条会跳。

不该跳,也确实不跳:黑和白根本没有色相,所以滑条保留原来的,而不是弹回红色。这是有意为之——否则每次滑到色板底部,都会丢掉你正在用的那个色系。

最近用过的颜色存在哪里?

存在这台设备的浏览器里。它们不会发出去,也不会和你挂钩:清掉本站数据,色条就又空了。

相关工具