ColorBox

ColorBox 是一个在线颜色生成与色阶配置工具，页面通过色相、饱和度和亮度等参数生成一组连续颜色，并将每个颜色显示为色值、色彩空间参数和对比度信息。它提供 HSV 与 OKLCH 两种色彩模式，支持调整色相起止范围、旋转方向、曲线、饱和度变化、亮度变化以及色阶数量。生成结果可以复制、导出或通过分享 URL 重新打开，也提供 Figma Plugin 入口和 Tailwind CSS、Swift 等输出选项。\n\n### 核心功能\n\n#### 基于参数生成颜色阶梯\nColorBox 会根据配置生成一组颜色，并在界面中显示从浅到深的连续色阶。生成配置包含 steps，示例配置使用 11 个步骤；颜色变化可以从指定的起始色相走向结束色相，并按照顺时针或逆时针方向旋转。\n\n#### 调整色相变化方式\n色相设置包含 Start、End、Rotation 和 Curve。Rotation 可选择 Clockwise 或 Counter，Curve 可选择 Quad，并可结合 easeOut 方向控制色相在色阶中的变化曲线。页面示例使用 220 到 240 的色相范围，以及 easeOutQuad 曲线。\n\n#### 控制饱和度与亮度\n饱和度区域可以设置 Start、End、Rate、Curve 和 Direction，用于定义颜色从低饱和度到高饱和度的变化。亮度区域则提供 Start、End、Curve 和 Direction；示例配置将亮度从 1 变化到 0.2，并使用 easeInQuart 曲线。\n\n#### HSV 与 OKLCH 色彩模式\n页面提供 Color Space 设置，当前界面显示 HSV，并提供 OKLCH New 选项。用户可以在颜色空间区域切换模式，使用对应的色彩参数来配置和查看生成结果。\n\n#### 设置主色阶与辅助色阶\n界面提供 Steps、Major、Minor、Major Lock 和 Add locked color 等设置，并列出 Minor Step 的多个数值选项，包括 0、0.5、1、1.5、2、3、4、5、6、7、8、9、10。生成结果中还会显示色阶编号、十六进制颜色值以及 H、S、B 参数。\n\n#### 查看对比度并导出结果\n部分颜色会显示相对于白色 #FFFFFF 的对比度，例如 3:1 和 4.5:1。结果区域提供 Config、Output、TailwindCSS 和 OKLCH 等选项，页面还列出 Swift 输出入口。用户可以使用 Copy、Export、Share URL 和 Copy URL 操作处理当前配置或结果，并可通过 Figma Plugin 的 Open 入口打开相关插件。\n\n### 使用方式\n\nColorBox 以网页界面呈现，用户可以直接在页面中调整色相、饱和度、亮度、步骤数、色彩空间和明暗模式等控制项。生成结果可在 Config、Output、TailwindCSS、OKLCH 和 Swift 等输出区域查看或处理。页面提供 Export、Copy、Share URL、Copy URL 以及 Figma Plugin 的 Open 操作；官网正文未说明是否需要注册，也未说明是否需要额外配置模型或密钥。\n\n### 适用人群与场景\n\n需要制作颜色阶梯的人可以使用 ColorBox 调整色相、饱和度和亮度，生成从浅色到深色的连续颜色。需要检查颜色与白色对比度的人可以查看结果中标注的对比度数值。使用 Tailwind CSS 或 Swift 的开发者可以通过对应输出入口处理生成结果；使用 Figma 的用户则可以通过 Figma Plugin 的 Open 入口访问插件。对于需要保存或分享当前配置的用户，页面提供 Share URL 和 Copy URL 操作。\n\n### 注意事项\n\n官网正文展示了 HSV 和 OKLCH 两种色彩模式，但未说明两种模式的具体适用条件。页面示例包含 Figma Plugin、TailwindCSS 和 Swift 输出入口，但正文未进一步说明插件、导出文件或各类输出的具体格式。官网正文也未提供价格、免费额度或付费方案信息。