原站网页截图，页面可能随时间更新。
- 分类：设计素材与工具
- 名称：ColorBox – Color Palette Generator
- 来源：colorbox.io
ColorBox 面向需要系统化设计颜色的用户，通过起止颜色参数和变化曲线生成连续色阶。使用者可以观察不同色阶的颜色表现与对比度，再复制或导出结果，用于界面设计、设计系统和前端开发中的颜色整理。
用途与核心能力
工具可围绕色相、饱和度和亮度设置起点、终点、变化方向与曲线类型，自动生成一组连续颜色。生成结果会按步数排列，并显示十六进制色值、色相、饱和度、亮度以及相应的对比度信息。部分色阶还会标出与白色之间的对比度，便于在配色阶段关注文字和背景的可读性。
除常规颜色调整外，ColorBox 支持 HSV 与 OKLCH 两种色彩空间，可设置主要步数和次要步数，也能添加锁定颜色，以便在调整整体系统时保留特定节点。
适用场景
它适合建立品牌或产品界面的单色阶梯，例如从浅色背景、边框和辅助状态逐步过渡到深色文字、按钮或强调色。设计师可以利用曲线控制颜色变化的节奏，避免简单平均插值带来的层级不均。
对于需要检查可读性的界面配色，工具提供的对比度数值可作为筛选参考；对于需要交付给开发者的设计系统，生成后的颜色也可转换为 Tailwind、CSS、OKLCH 或 Swift 等输出形式。Figma 插件入口则适合将配色流程与 Figma 工作环境衔接起来。
上手方式
打开工具后，先选择颜色空间与模式，再设置色相的起止值、旋转方向和曲线；随后分别调整饱和度、亮度的起止值、变化速率和曲线方向。根据需要修改主要步数、次要步数，并通过加减控制增减色阶。
生成后可逐项查看颜色代码、参数和对比度。需要保留某个关键颜色时，可以将其锁定，再继续调整其他参数。确认调色板结构后，可在输出区域选择 Tailwind、CSS、OKLCH 或 Swift 等格式进行复制或导出，也可以使用分享地址或复制地址功能保存当前结果。
可确认的限制与使用提醒
工具公开展示的是基于参数和曲线生成的颜色系统，输出质量取决于色彩空间、起止值、曲线及步数的组合。对比度数值能够帮助比较颜色关系，但是否满足具体产品、平台或内容规范，仍需结合实际文字字号、背景和使用场景判断。
不同输出格式面向不同开发或设计流程，复制结果前应确认所选格式与项目使用方式一致。锁定颜色和主要、次要步数会影响最终色阶结构，因此大幅调整基础参数后，建议重新检查颜色顺序、层级和对比度。
常见问题
可以直接生成适合无障碍使用的颜色吗？
工具会显示部分色阶的对比度信息，可用来辅助判断颜色之间的可读性；最终是否适合具体无障碍要求，需要结合实际文字、字号和背景进行确认。
生成的颜色可以用于前端代码吗？
可以。输出区域提供 Tailwind、CSS、OKLCH 和 Swift 等格式，用户可选择相应格式后复制或导出。