专业级色彩工具开发

开发一个基于HTML5/CSS3/JavaScript的专业色彩工具,包含色彩选择器、格式转换、配色方案、渐变生成、无障碍检测等功能,支持实时联动和多格式导出。

技术游戏设计2026-02-23
提示词内容

构建一个面向设计师与开发者的专业级色彩工具,基于HTML5、CSS3和JavaScript技术栈实现。需包含以下核心功能模块:

1. 交互界面要求

  • 提供多种色彩选择方式:吸管工具、色轮选择器、滑块调节器、手动输入字段
  • 所有控件需支持实时联动更新

2. 色彩格式转换

  • 实时互转支持:RGB/RGBA、HSL/HSLA、HEX、CMYK格式
  • 每种格式需自带一键复制功能
  • 转换过程需保持色彩值精度不丢失

3. 配色方案生成器

  • 支持生成以下专业配色方案:
  • 互补色(Complementary)
  • 类似色(Analogous)
  • 三元色(Triadic)
  • 四元色(Tetradic)
  • 单色系(Monochromatic)
  • 每种方案需可视化展示色彩比例关系

4. 色彩管理系统

  • 收藏夹功能:支持命名分类存储
  • 导出选项:支持多选收藏夹内容批量导出

5. 色彩协调可视化

  • 动态展示色彩和谐度规则
  • 提供交互式调节手柄供微调参数

6. 渐变生成器

  • 支持生成类型:线性渐变(Linear)、径向渐变(Radial)、锥形渐变(Conic)
  • 必须支持多色标(Color Stops)自由添加/删除
  • 每个色标需支持位置与透明度调节

7. 无障碍检测

  • WCAG标准合规性检查
  • 实时对比度比率计算
  • 色盲模拟可视化
  • 检测结果需标注通过/失败状态

8. 开发辅助功能

  • 一键生成代码片段:CSS/SCSS/SVG格式
  • 智能色彩命名:根据色值自动推荐语义化名称

9. 导出规范

  • 支持导出格式:
  • Adobe ASE(色板交换格式)
  • JSON(结构化数据)
  • CSS变量集合
  • SCSS变量文件
  • 每种导出需保留完整元数据

10. 性能要求

  • 所有色彩计算需在Web Worker中执行
  • 界面响应延迟不超过200ms
  • 历史操作堆栈支持撤销/重做 复制提示词
专业级色彩工具开发 | aime 导航