HTML原生color输入框不支持预设色板，可用datalist+text输入框实现轻量级预设，或用div+span+JS构建可视化色块；预设色需统一为6位HEX、分组明确、通过对比度校验。
HTML原生<input type="color">不支持预设颜色
浏览器自带的颜色选择器控件（<input type="color">）无法直接设置预设色板，它只提供标准色轮和HEX输入框，没有list、options或swatches属性。强行加value只能设默认值，不影响可选范围。
用<datalist>配合<input type="text">模拟预设色板
这是最轻量、无需JS也能运行的方案：用文本输入框 + 颜色列表，用户点下拉即可选预设色，同时保留手动输入HEX的能力。
关键点：
-
<input>必须设list属性，值与<datalist id>匹配 -
<option value>里填完整HEX（如#ff6b6b），不能省略# - 浏览器会自动过滤非HEX格式输入，但不会校验是否为合法颜色（如
#ggg仍可提交）
<input list="presetColors" name="color" value="#4ecdc4"> <datalist id="presetColors"> <option value="#4ecdc4"> <option value="#ff6b6b"> <option value="#45b7d1"> <option value="#96ceb4"> <option value="#feca57"> </datalist>
用div+span做点击式色块预设（需少量JS）
当需要视觉化色块、点击即填、且兼容旧浏览器时，放弃原生控件更可控。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 每个预设色用
<span>包裹，设style="background:#4ecdc4; width:24px; height:24px; display:inline-block;" - 绑定
onclick事件，把色值写入目标<input>的value - 别忘了给
<input>加readonly（防止误删），或用pointer-events:none禁用光标 - 若要支持键盘导航，得额外加
tabindex和keydown处理，否则纯靠鼠标
预设颜色列表选哪些值？避开常见坑
不是越多越好。实际项目中容易出问题的是：
- 色值没统一格式：混用
#rgb、#rrggbb、rgb(…)会导致<datalist>失效（只认HEX字符串） - 对比度不足：浅灰
#f0f0f0在白背景上几乎看不见，WCAG AA级要求文字与背景对比度≥4.5:1 - 语义混乱：比如把
#e74c3c（危险红）和#2ecc71（成功绿）都塞进“主题色”，用户无法区分用途
推荐做法：按用途分组（主色/警告/禁用/背景），每组≤5个，全部用6位HEX，用工具校验对比度（如Chrome DevTools的Contrast checker）。
真正难的不是列出颜色，而是让预设色在不同设备、不同亮度下都可辨识——这点常被忽略。
