最简单方式是直接使用HTML5的input[type="color"]，浏览器自动渲染系统级选择器；默认值需为7位十六进制（如"#ff0000"），支持input/change事件，value始终返回标准#rrggbb格式。
用原生input type="color"快速实现颜色选择器
最简单的方式是直接使用HTML5的input元素，设置type="color"。浏览器会自动渲染为系统级颜色选择器（如Chrome显示色轮+调色板），无需额外JS库。
关键点：
- 默认值必须是7位十六进制格式（如"#ff0000"），不能用简写"#f00"或rgb()等格式，否则可能回退为黑色
- 支持change和input事件：前者在选完后触发，后者在拖动/实时调整时连续触发
- 获取颜色值直接读取input.value，始终返回标准#rrggbb格式
监听颜色变化并处理值
给input绑定事件，就能实时捕获用户选择的颜色。常用场景包括预览、存入配置、更新样式等。
示例代码：
立即学习“Java免费学习笔记（深入）”；
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('input', (e) => {
const hex = e.target.value; // 如 "#3a86ff"
document.body.style.backgroundColor = hex;
console.log('当前颜色：', hex);
});
注意：input事件比change更灵敏，适合做实时反馈；若只需最终结果，用change即可。
把颜色值转换成其他格式以便进一步处理
虽然input.value只返回十六进制，但常需转为RGB、HSL或数值数组用于计算或动画。
简易转换方法（无依赖）：
- 十六进制 → RGB对象：
const [r, g, b] = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i.exec(hex).slice(1).map(x => parseInt(x, 16)); - RGB → HSL：可用hsl()字符串直接赋给CSS，或用公式计算（网上有成熟函数可复用）
- 校验有效性：检查hex.length === 7 && hex[0] === '#'，避免非法输入干扰逻辑
补充交互：支持手动输入和清空
原生color input不支持键盘输入或清空。如需增强体验，可搭配文本框 + 按钮：
- 用input type="text"允许手动输入#abc、rgb(255,0,0)等，再用正则或CSS Color Module Level 4解析
- 加一个“重置”按钮，点击后设input.value = '#000000'或恢复默认色
- 注意同步两个控件的值：文本框改了，color input也要更新；反之亦然
基本上就这些。不复杂但容易忽略细节，比如格式兼容性和事件选择。用好原生能力，再按需扩展，就能做出轻量又实用的颜色选择器。
