颜色工具完全手册：从取色到配色再到无障碍检测

颜色是视觉设计里最直观的语言。同一个按钮，换一种颜色就能让点击率差出几个百分点；同一条信息，配色失当会直接被读者跳过。但把颜色用对，远比想象中复杂：取色要精准到HEX值、配色要有章法可循、对比度要满足无障碍标准、色盲群体要能正常识别。本文围绕设计工作流中常见的几类颜色需求，整理了速查工具盒里对应的工具入口。

取色是第一步。在屏幕上看到一张图片或网页上某个色块，想知道具体的RGB、HEX、HSL数值——打开颜色选择器就能直接吸取。把吸管拖到目标位置，所有色值即时显示，复制即用。支持从图片取色、从屏幕取色、从历史调色板取色，覆盖了大部分日常场景。

配色是核心。从单一颜色扩展成和谐的多色方案，是设计师的基本功。调色板生成器会根据输入的基础色自动生成互补色、类比色、分裂补色、三元色等多种配色方案，并且实时显示每个颜色对应的HEX和RGB。色阶生成器则把单个颜色展开成由浅到深的渐变序列，做数据可视化时生成连续色阶非常方便。颜色混合器支持两种颜色的混合比例调节，可以模拟颜料的混合效果，对插画师和平面设计特别实用。

无障碍检测容易被忽视。WCAG标准要求正文与背景的对比度至少达到4.5:1，大字体达到3:1。前端开发完成后如果随手挑两个颜色就用，很可能不符合标准。打开颜色对比度检查器，输入前景色和背景色的HEX值，工具会给出对比度数值和WCAG等级（AAA/AA/Fail），直接判断是否达标。同时色盲模拟器可以预览色盲人群看到的实际效果，把设计调成对色盲友好的版本。

辅助工具让工作流更顺畅。Favicon是网站的标志性小图标，Favicon生成器支持上传图片自动裁剪成多尺寸输出（16×16、32×32、48×48等），直接打包下载。占位图生成器能在前端开发阶段生成自定义尺寸和颜色的占位图，避免设计稿还没出完时页面空白一片。SVG编辑器则可以在线编辑矢量图形，调整路径、颜色、尺寸后导出SVG文件。

速查工具盒把上述工具按设计工作流整理在同一分类下，从取色到配色再到导出，每一步都能找到对应入口。所有工具纯前端实现，浏览器打开即用，处理结果实时显示，无需上传图片到服务器，私密性有保障。