配色生成器
选一个起始颜色，工具会按色轮算出其余的颜色。点击任意色块即可复制色值，或者放入一张照片，直接从中取出配色。
配色方案
点击色块即可复制色值
从照片提取配色
照片不会离开你的设备，直接在浏览器中读取。
- 免费
- 文件不会离开你的设备
- 无需注册
- 不限文件数量
使用方法
- 输入颜色代码或打开取色器，配色会随着选择实时重绘。
- 切换方案：互补色位于色轮正对面，三色方案把圆周分成三份。
- 点击色块复制色值，也可以把整套配色复制为 CSS 变量。
- 要从照片取色，选择一张图片 — 它只在你的设备上读取。
实用说明
这些角度是怎么来的
配色方案不是靠感觉，而是色轮上的几何关系。互补色正好在对面，相隔 180°；三色方案把圆周平分成三份，每份 120°；类似色是三十度以内的邻居。工具在旋转色相时保持饱和度和明度不变，因此配出的颜色和起始色一样鲜艳、一样厚重。
为什么从照片取色不会取出一团泥
在照片上统计出现最多的像素是行不通的：单是天空就有上百万种细微差别的蓝，每种只出现一次。这个工具沿着跨度最大的通道把色彩空间一分为二，反复切分直到得到足够多的盒子 — 于是天空、面孔和阴影各自留在结果里，而不是变成一个平均出来的褐色。
常见问题
网站配色该选哪种方案？
单色和类似色最稳妥：页面安静，元素之间不会互相抢注意力。互补色留给唯一需要被看见的东西 — 按钮、角标或者警告。
怎么在代码里使用这套配色？
复制色块下方的 CSS 变量，粘贴到样式表里。变量名是 --color-1 … --color-6，在别人的项目里比一排十六进制数字好读得多。
我的照片会被上传吗？
不会。图片在页面里解码，统计颜色前先缩小到 160 像素 — 没有任何数据离开设备，结果也就立刻出来了。
为什么暗色调那一行不以纯黑结束？
纯黑和纯白不携带信息 — 谁都知道它们，放进配色里只是占位置。这一行在接近边缘处停下，让每个色块都还是能用的颜色。
相关工具
- 颜色转换器 用任何常见写法输入颜色——#1f5fd6、1f5fd6、#1f5、rgb(31, 95, 214)——其余写法会同时出现，还附带保证文字可读所需的对比度数值。
- HEX 转 RGB 粘贴 HEX 代码，读出 RGB 通道值。#1f5fd6 会变成 rgb(31, 95, 214)；如果代码带有透明通道，你会得到保留透明度的 rgba()。
- CSS 渐变生成器 拖动滑块，上方的预览会跟着变化。满意之后复制那一行，粘贴进样式表就行了，不需要别的。
- CSS 阴影生成器 拖动滑块，示例会跟着变。一层不够就叠加图层 — 真实界面里那种柔和可信的立体感就是这样做出来的。
- RGB 转 HEX 粘贴 rgb(31, 95, 214)——用逗号还是空格都可以——就能得到 #1f5fd6，可直接用于 CSS、设计文件或规范文档。
- 密码生成器 打开页面即生成新密码，使用浏览器的加密级随机数生成器。密码不会被发送、记录或保存。
- 二维码生成器 输入链接或任意文本，二维码随打随现。屏幕使用下载 PNG，印刷则选 SVG——放到多大都依然清晰。
- UUID 生成器 按下按钮，就能得到可以直接贴进数据库、配置文件或测试数据的标识符。它们在页面内生成——没有哪台服务器会给你一个别人已经见过的号码。