原生 是最快实现基础颜色选择器的方式，现代浏览器原生支持色轮/调色板，值为7位小写十六进制（如 #ff0000），需显式设 value 为合法 #rrggbb 格式，监听 input 事件实时获取变化，注意移动端差异、无障碍局限及服务端校验。
用 <input type="color"> 最快实现基础颜色选择器
现代浏览器原生支持 <input type="color">，它会自动渲染为系统级颜色拾取器（色轮或调色板），无需 JS 或第三方库。值始终是 7 位小写十六进制格式，例如 "#ff0000"。
常见错误：直接把 value 设为 "red" 或 "rgb(255,0,0)" —— 浏览器会忽略并回退到默认值 #000000。必须用合法的 #RRGGBB 格式。
- 默认值建议显式设置：
<input type="color" value="#3498db"> - 注意移动端行为差异：iOS Safari 的颜色面板较简陋，不支持透明度；Android Chrome 通常更完整
- 无障碍支持有限：屏幕阅读器可能只读作“颜色输入”，无法描述当前色值，需额外加
aria-label
监听颜色变化必须用 input 事件，不是 change
input 事件在每次用户拖动滑块、点击色块时实时触发；而 change 只在失去焦点后才触发 —— 对颜色选择这种高频交互来说，change 会明显卡顿且体验断裂。
示例：
<input type="color" id="picker"><script>
const picker = document.getElementById('picker');
picker.addEventListener('input', () => {
console.log(picker.value); // 实时输出如 "#e74c3c"
});
</script>
- 不要绑定
change事件来获取即时反馈 - 若需兼容旧浏览器（IE / Safari input 事件仍可用，但
type="color"会被降级为文本框，需配合正则校验输入 - 避免在
input回调里频繁操作 DOM（如实时改背景色），可加requestAnimationFrame节流
自定义样式受限，但可通过伪元素微调外观
浏览器对 <input type="color"> 的样式控制极弱：background、border 等常规属性基本无效，且无法用 ::before/::after 插入内容。唯一可靠方式是覆盖其默认按钮区域。
- Chrome/Edge 支持
::-webkit-color-swatch伪元素，可修改预览方块边框和大小 - Firefox 支持
::-moz-color-swatch，但仅允许设border和border-radius - 真正需要深度定制（如带透明度、历史记录、HEX/RGB 切换）—— 应放弃原生控件，改用
<canvas></canvas>或成熟库如vanilla-picker
服务端接收时别假设格式安全，始终校验 #RRGGBB
前端传来的 value 看似可控，但攻击者可绕过表单直接 POST 任意字符串。后端若直接存入数据库或拼进 CSS，可能引发 XSS 或渲染异常。
- 正则校验推荐：
/^#[0-9A-Fa-f]{6}$/（严格 6 位，不含透明通道） - 若业务需支持
#RGBA或#RRGGBBAA，需明确开启并单独处理 alpha 通道 - PHP 中用
filter_var($color, FILTER_VALIDATE_REGEXP, ['options' => ['regexp' => '/^#[0-9A-Fa-f]{6}$/']]) - Node.js 可用
validator.isHexColor(color)（需validator包）
原生 color 输入框简单有效，但它的“简单”也意味着边界清晰：不支持透明度、不可键盘输入、样式难定制。真要覆盖这些限制，就得接受引入 JS 逻辑的代价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
