应用介绍
在浏览器里完成取色、颜色格式互转、配色方案生成与对比度检查，计算全部在本地。
它解决什么问题
调色的麻烦常常不在挑颜色本身，而在颜色要跨好几道格式：设计稿里给的是 HEX，CSS 里写 rgb()，调深浅要转成 HSL；颜色定下来还得确认文字压在上面能不能看清；想找一组能搭配的颜色，又只能凭感觉反复试。
这个工具把这些动作收在一个页面里：在 HEX、RGB、HSL 任意一个输入框里改值，另外两个立刻跟着变；旁边的色板按色彩关系自动算出互补色、类比色等方案，点一下色块就能把它设为新的基准色继续往下推；对比度检查直接给出比值和等级，告诉你这组前景色 / 背景色是否达到常见的可读性门槛。
因为它是纯前端页面，连"图片取色"这类操作也在浏览器内完成——图片不会被上传到服务器。
核心功能
- 格式互转：HEX、RGB、HSL 三个输入框互相联动，改任意一个，另外两个即时更新，并额外可复制一段
--color-primary: #xxxxxx;形式的 CSS 变量写法。 - 对比度检查：分别填入前景色与背景色，实时给出对比度比值（保留两位小数）与等级——比值 ≥7 记为 AAA、≥4.5 记为 AA、≥3 记为「勉强」、低于 3 记为「失败」，并附一块真实配色的文字预览。
- 色板生成：围绕当前颜色同时生成 6 组方案——互补色（色相 +180°）、类比色（基准色相两侧 ±30°/±60°，共 5 色）、三角色（色相间隔 120°）、单色（亮度 ±15 的 5 档）、分裂互补（+150° / +210°）、四角色（色相间隔 90°）；点任一色块即可设为当前色再继续衍推。
- 渐变生成器：设置起始色、结束色与方向（水平、垂直、对角线、反对角线、径向），生成可直接复制的 CSS
background代码。 - 色板与图片取色：「Tailwind 配色」区内置 22 组常用色系、每组 10 个色阶，点击即可取色；「图片取色」可上传一张图片，在本地把图片缩放采样后统计出现频率最高的 8 个颜色作为主色。
- CSS 变量生成：按当前颜色生成一段
:root变量代码，包含主色与 50–900 共 10 个色阶，一键复制；页面可跟随系统深浅色主题，也可手动切换。
怎么用
- 1打开
/wit-lab/color。 - 2用原生取色器选一个颜色，或在 HEX / RGB / HSL 任一输入框里直接填值。
- 3在「色板生成」里挑一组方案，点色块把它设成新的基准色继续推。
- 4在「对比度检查」里填前景色与背景色，确认比值达到需要的等级。
- 5需要交付给开发时，复制渐变代码或
:rootCSS 变量。
常见问题
Q：输入颜色值没有反应？
A：三个输入框都有格式校验：HEX 需要 6 位十六进制数字（可带 #），RGB 需要 0–255 之间的三个数值，HSL 需要 0–360 / 0–100 / 0–100。格式不合法时不会更新。
Q：对比度到多少才算合格？
A：工具按常见门槛分档：4.5:1 以上记 AA，7:1 以上记 AAA。正文文字建议至少达到 AA，字号很大或加粗的标题可以放宽到 3:1。
Q：「类比色」「三角色」是怎么算出来的？
A：都基于 HSL 色相环：类比色取基准色相两侧各 30°、60°；三角色取间隔 120° 的三个色相；互补色是 +180°；分裂互补在互补色两侧各偏 30°；四角色是间隔 90° 的四个色相。生成时只改色相，饱和度与亮度沿用基准色。
Q：图片取色会把图片上传吗？
A：不会。读取与采样都在浏览器本地完成，页面没有把图片发往服务器的请求。
Q：生成的色板可以直接用吗？
A：色板给出的是按色彩关系推出来的候选值，适合当起点。落到具体界面时还要结合实际材质、品牌规范与无障碍要求做微调——机械套用公式不保证效果一定好看。