取色器与调色板生成器

屏幕上的每一种颜色都可以用三种方式描述，本工具会让它们保持同步：HEX 是 CSS 和设计工具中常用的简写；RGB 描述红、绿、蓝三色光按多少比例叠加出这种颜色；HSL——色相、饱和度、明度——则更接近人们真正思考颜色的方式：它是什么色调、有多鲜艳、偏亮还是偏暗。拖动原生色块、输入 HEX 代码，或直接调整任意 R/G/B 或 H/S/L 字段，其他字段都会立即更新，你可以按自己习惯的方式切换，不必亲自换算。

色轮是六种经典配色规则的基础，它们都会根据你选定的基础色自动生成。互补色把一种颜色和它的对面色搭在一起，对比最强烈；邻近色选取色轮上相邻的颜色，看起来柔和协调；三角与四角配色把三种或四种颜色均匀分布在色轮上，活泼又不失平衡；分裂互补色用对面色两侧的两种颜色代替对面色本身，让互补搭配更柔和；单色系则只用一种色相，仅改变明度，对于需要用同一品牌色呈现多种深浅的界面来说，往往是最稳妥的选择。

好的调色板并不一定都来自色彩理论——有时你只是想随便看看会出现什么。随机调色板生成器（按空格键，或点击“生成”）一次产生五种颜色，色相和明度经过调校，避免出现浑浊或过于粉淡的结果。点击任意色块上的锁形图标可保留该颜色，再次生成时只有未锁定的颜色会变化，这样你可以像 Coolors 之类的工具那样逐步搭出调色板。点击任一色块可复制其 HEX 代码，也可以用调色板下方的按钮把整组颜色复制为 CSS 自定义属性、SCSS 变量、Tailwind 配置片段或 JSON 数组，或导出适用于 Illustrator 和 Photoshop 的 Adobe .ase 色板文件。你还可以从任意图片中提取调色板（在本地处理，绝不上传），并把喜欢的调色板保存在浏览器中以备日后使用。

挑出一个好看的颜色，不等于挑出一个好用的颜色——文字颜色与背景的明度太接近，就可能看不清。网页内容无障碍指南（WCAG）为此设定了明确的阈值：正常文字的对比度至少要达到 4.5:1 才能通过 AA 级，达到 7:1 才能通过更严格的 AAA 级。对比度检查器按照 WCAG 规范定义的相对亮度公式，精确计算所选颜色与白色、黑色文字之间的对比度，并标明每种组合是否通过，让你在上线之前而不是之后，就能发现对比度过低的按钮或标题。