取色器
在色板上滑动来挑颜色,或者取现成的:用吸管从图片上取,浏览器支持的话还能直接从屏幕上取。三种写法的代码立刻出现。
- 免费
- 文件不会离开你的设备
- 无需注册
- 不限文件数量
使用方法
- 在色板上拖动选择明暗,下面的滑条切换色相。
- 需要半透明就调不透明度——它会出现在 rgba 里,或者变成 HEX 末尾多出的两个字符。
- 要取现成的颜色,点「从图片取色」再点图片。在 Chrome 和 Edge 里还能直接从屏幕上取。
- 点你需要那一行旁边的「复制」。颜色会进入最近用过的色条,方便回头再用。
实用说明
为什么色板用 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)——另外两个连同色板会自动跟上。如果只是要在写法之间转换,隔壁的颜色转换器路更短。
我把明度拉到零时,色相滑条会跳。
不该跳,也确实不跳:黑和白根本没有色相,所以滑条保留原来的,而不是弹回红色。这是有意为之——否则每次滑到色板底部,都会丢掉你正在用的那个色系。
最近用过的颜色存在哪里?
存在这台设备的浏览器里。它们不会发出去,也不会和你挂钩:清掉本站数据,色条就又空了。
相关工具
- 颜色转换器 用任何常见写法输入颜色——#1f5fd6、1f5fd6、#1f5、rgb(31, 95, 214)——其余写法会同时出现,还附带保证文字可读所需的对比度数值。
- 配色生成器 选一个起始颜色,工具会按色轮算出其余的颜色。点击任意色块即可复制色值,或者放入一张照片,直接从中取出配色。
- CSS 渐变生成器 拖动滑块,上方的预览会跟着变化。满意之后复制那一行,粘贴进样式表就行了,不需要别的。
- HEX 转 RGB 粘贴 HEX 代码,读出 RGB 通道值。#1f5fd6 会变成 rgb(31, 95, 214);如果代码带有透明通道,你会得到保留透明度的 rgba()。
- RGB 转 HEX 粘贴 rgb(31, 95, 214)——用逗号还是空格都可以——就能得到 #1f5fd6,可直接用于 CSS、设计文件或规范文档。
- CSS 阴影生成器 拖动滑块,示例会跟着变。一层不够就叠加图层 — 真实界面里那种柔和可信的立体感就是这样做出来的。