原生 <input type="color"> 无法自定义色板，因浏览器自主渲染且不暴露配置接口；实现固定色板需隐藏原生控件并手写 DOM 色板网格，通过 data-color 绑定颜色值、事件更新输入框，再辅以 localStorage 管理“最近使用”色和语义化“透明色”。
原生 <input type="color"> 能快速拉起系统级色盘，但无法自定义色板（palette），也不能显示预设颜色网格——真要实现带固定色板的颜色选择器，必须手写 UI + 事件控制。
为什么 input[type="color"] 不能设默认色板
浏览器对 <input type="color"> 的色盘完全自主渲染，value 只控制初始选中值，list、data-* 或 CSS 都无法注入预设色块。Chrome、Safari、Firefox 各自调色界面不同，且不暴露 palette 配置接口。
- 试图用
background-image覆盖输入框只会遮住控件本身，失去交互能力 - 设置
accent-color仅影响滑块/按钮高亮色，不影响色板内容 - 所有“美化 color input”的教程，实际都是隐藏原生控件 + 自建色板 DOM
用 <div> 拼一个可点击的色板网格
核心是把颜色数组映射为 <button> 或 <span>，绑定 click 事件更新目标输入框或变量。
<div class="color-palette"> <button style="background:#ff6b6b" data-color="#ff6b6b"></button> <button style="background:#4ecdc4" data-color="#4ecdc4"></button> <button style="background:#ffe66d" data-color="#ffe66d"></button> <button style="background:#1a535c" data-color="#1a535c"></button> </div> <input type="text" id="color-input" value="#4ecdc4">
JS 简单监听：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.color-palette button').forEach(btn => {
btn.addEventListener('click', () => {
const color = btn.dataset.color;
document.getElementById('color-input').value = color;
});
});
- 用
data-color存值比从style.backgroundColor解析更可靠（避免 rgb/rgba 转换） - 按钮宽高设为相等 +
border-radius: 4px视觉更接近设计稿 - 加
tabindex="0"和键盘Enter支持，满足基础可访问性
怎么让色板支持「最近使用」和「透明色」
纯静态色板不够用时，动态追加色块即可。关键点在于：避免重复、限制数量、区分语义。
- 「最近使用」用
localStorage存数组，每次选中新色时 unshift + splice(0,8) 保持最多 8 个 - 「透明色」不要用
#00000000（部分老浏览器不识别），改用rgba(0,0,0,0)或直接设字符串"transparent" - 插入 DOM 时用
insertAdjacentHTML('afterbegin', ...)，避免重排整个色板 - 给「透明色」按钮加
border: 1px dashed #ccc和斜线纹理背景，视觉上明确区别于实色
色板不是越多彩越好；真实项目里，超过 12 个固定色就会显著增加用户决策成本。更关键的是：确保每个预设色在目标背景上有足够对比度——这点常被忽略，结果是设计师选的浅灰在白底上根本看不见。
