ColorBox

一、网站概况

ColorBox 是一款面向设计师和前端开发者的在线色彩生成工具，由设计师 Kevyn 开发并维护。该网站专注于帮助用户创建系统化、可访问的色彩调色板，尤其适用于 UI/UX 设计中的色彩系统搭建。

上线时间虽未明确标注，但该工具在设计师社区中已积累相当口碑。网站定位为“色彩系统生成器”，而非简单的取色器或调色盘。其核心服务是：通过调整色相（Hue）、饱和度（Saturation）和明度（Brightness）等多个维度，自动生成一整套符合无障碍对比度标准的渐变色彩阶梯。ColorBox 提供 HSV 和 OKLCH 两种色彩模式，并支持跨色阶的对比度检测，帮助用户在设计时兼顾美观与可用性。

二、核心功能详解

1. 多维色彩参数调节
ColorBox 的核心在于其精细的参数控制。用户可以分别调整色相、饱和度和明度的“起始值”、“结束值”、“旋转方向（顺时针/逆时针）”、“曲线类型（Quad、Quart 等）”以及“插值方向（easeOut 等）”。这意味着你能精确控制从一种颜色到另一种颜色的过渡方式，生成平滑或有节奏感的渐变阶梯。

2. 无障碍对比度检测
该功能是 ColorBox 的突出亮点。在生成的色彩阶梯中，每个色板上都会标注出该颜色与白色（#FFFFFF）或黑色（#000000）的对比度值，并明确标示是否符合 WCAG 标准（如 3:1、4.5:1）。例如，“3:1 (#FFFFFF) ↓”表示该颜色与白色对比度为 3:1，仅适用于大号文字。这让设计师能快速选出既美观又满足无障碍要求的颜色。

3. 色阶锁定和自定义微调
ColorBox 允许用户锁定某个主要色阶（Major Step），并在此基础上自由调整其附属的次要色阶（Minor Step），从 0 到 10 共 11 个级别。通过“Add locked color”功能，你可以将特定颜色固定在调色板中，方便在不同色相之间保持一致性。此外，网站还支持导入和导出功能，方便与团队协作。

三、使用教程/操作指南

第一步：选择色彩模式
打开网站后，先在“Color Space”区域选择 HSV 或 OKLCH 模式。OKLCH 是较新的颜色空间，能更好地模拟人眼感知，推荐优先使用。

第二步：设置基础色相和参数
在“Hue”区域，设置“Start”为你的主色相值（如蓝色为 210），设置“End”为辅色相值。然后调整“Rotation”（顺时针/逆时针）和“Curve”（Quad 或 Quart）来控制色相变化路径。同样的操作重复于“Saturation”和“Brightness”区域。

第三步：调整步数和锁定颜色
在“Steps”区域，设置“Major”步数（如 10 个主要色阶）和“Minor”步数（如 2）。点击任意色板，可以将其颜色值锁定并添加为独立参考。使用“Dark Mode”切换可预览调色板在暗色背景下的表现。

小技巧：当你需要一套品牌色系时，先锁定一个主色，再调整饱和度和明度的曲线，往往能得到比简单渐变更高级的配色方案。

四、内容与资源质量

ColorBox 本身不存储或提供现成的色板库，而是一个纯粹的工具型网站。其“资源”和“导入/导出”功能允许用户将生成的色板以代码或文件形式保存到本地或分享给他人。

资源质量取决于用户自身的参数设置。网站提供的参数控制非常精细，理论上可以生成几乎无限种色彩组合。由于是工具型而非资源库，不存在更新频率或版权问题。所有生成的色板均为用户原创，ColorBox 不保留任何授权。

五、适用人群与场景

适用人群：
– UI/UX 设计师：需要基于品牌色构建完整且可访问的色彩系统。
– 前端开发者：需要将设计文件中的色板转化为代码，并确保无障碍达标。
– 品牌视觉设计师：希望从零开始构建品牌色板，且对色彩过渡有精确要求。

不适用人群：
– 只需要简单取色或随机配色的普通用户。
– 没有颜色理论基础的初学者（参数较多，上手较陡）。

使用场景举例：
1. 为一个电商 App 从主色蓝色衍生出深蓝、浅蓝、高亮蓝等 10 级渐变，并确认所有颜色与白色文字对比度达标。
2. 为暗色模式设计配色方案，利用“Dark Mode”预览功能即时调整明度曲线。
3. 团队协作中，将色板导出为 JSON 或 SCSS 变量，直接集成到项目中。

六、优缺点分析

与同类工具（如 Coolors 或 Adobe Color）相比，ColorBox 在色彩系统的结构化生成和无障碍检测方面更具优势，但在快速灵感和随机探索上稍显不足。