用途
Color Picker 是一个表单输入组件模式，允许用户通过视觉交互选择颜色值。它可用于主题与品牌定制、设计与创意工具、数据可视化、产品配置以及标注与标记等场景。
主要能力
该模式可以以多种形式实现：原生浏览器控件（<input type="color">）、自定义色板调色板、hex/RGB/HSL 文本输入、渐变光谱画布，或取色器工具，也可以是这些形式的组合。实现工作流建议先确认模式与问题及约束的匹配，再参考 references/pattern.md 中的结构和示例，选择最小可行变体，先应用可访问性、性能和交互防护栏，最后再叠加视觉打磨。
使用方式
不适用时应避免使用：当颜色是固定选项时，应使用色板选择器或带颜色色板的单选按钮；当用户不关心精确颜色值时，更简单的分类选择器（如“红”“蓝”“绿”）可降低认知负担；在移动端为主的简单表单中，原生 <input type="color"> 可能已足够；当可访问性至关重要时，自定义颜色选择器需要大量无障碍投入，应评估是否有更简单的替代方案。
键盘交互方面：Enter/Space 在触发器上打开或关闭颜色选择器面板；Tab 按顺序移动焦点；Shift+Tab 反向移动焦点；方向键在色板网格中导航（roving tabindex）或按 1 步调整色相/饱和度滑块值；Home/End 跳转到调色板行的第一个/最后一个色板；Escape 关闭面板并将焦点返回触发器。
性能防护栏：面板打开时间 < 100ms；最多 64 个色板的渲染 < 16ms；每次按键的 hex 解析 < 1ms；光谱拖拽时每帧画布重绘 < 16ms；色板调色板内存占用 < 10KB，完整画布选择器 < 50KB。
常见错误
仅依赖画布进行颜色选择：画布式的色相/饱和度选择器对键盘和屏幕阅读器用户完全不可访问，应始终将画布控件与等效的 range 输入或文本输入配对。
不显示所选颜色值：只显示颜色色板而不显示 hex/名称标签，会迫使用户记住选择结果并破坏复制粘贴工作流，应始终以文本形式显示当前值。
不处理不完整的 hex 输入：在用户输入时逐键验证会导致过早显示错误，应仅在失焦或输入达到预期长度时验证。
适用场景与限制
适用于需要颜色选择的表单和工具场景，但需注意可访问性、性能和键盘交互方面的限制。完整实现细节、示例和测试说明见 references/pattern.md。相关模式包括选择输入和文本字段。