COMPONENT 38 · Selection & Values
颜色选择器
Color Picker
也叫Color WellColour Picker取色器NSColorPanel
通过色板、光谱或数值选择颜色。
Chooses a color through swatches, a spectrum, or numeric values.
ANATOMY & USAGE
结构与使用建议
组成部分
- 当前色样
- 色彩选择区
- 颜色数值
适合使用
- 编辑器需要选择品牌色、画笔色或外观色时。
不建议使用
- 颜色仅有少量固定合法值时，应直接展示色样选项。
键盘与无障碍
- 每个色样有文字名称或数值；支持键盘与文本格式，并提示对比度问题。
DESCRIBE IT TO AI
这样告诉编程助手
实现颜色选择器（Color Picker）：通过色板、光谱或数值选择颜色。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<label class="demo stack" for="picker">
<span>颜色选择器</span>
<input id="picker" type="color">
</label>