原生input[type="color"]仅返回小写7位HEX（如#ff5733），需自行实现RGB/HSL转换：用parseInt精确提取R/G/B值并归一化计算HSL，监听input事件实现实时同步，手动校验HEX输入以防非法格式，确保三者双向更新稳定无跳变。
原生 input[type="color"] 只返回小写 7 位 HEX（如 #ff5733），不提供 RGB 或 HSL 值；想做真正可用的颜色转换器，必须自己写解析和转换逻辑。
怎么把 #rrggbb 转成 RGB 对象
别用正则匹配或 split() 拆字符串——容易漏掉大小写、前导零或非法输入。直接用 parseInt 提取十六进制数值最稳：
-
value必须是 7 位（#+ 6 字符），先校验value.length === 7 && value[0] === '#' - R =
parseInt(value.slice(1, 3), 16)，G =parseInt(value.slice(3, 5), 16)，B =parseInt(value.slice(5, 7), 16) - 结果是三个 0–255 的整数，可直接用于
rgb(${r}, ${g}, ${b})或 Canvas 绘图
怎么把 RGB 转成 HSL 并保证精度
HSL 转换不是简单套公式，关键在归一化和边界处理：R/G/B 先除以 255 得到 0–1 区间值，再按标准算法计算色相（H）、饱和度（S）、明度（L）。常见错误是跳过归一化，导致 H 值溢出或 S/L 计算失真。
- 明度 L =
(Math.max(r, g, b) + Math.min(r, g, b)) / 2 - 如果最大值等于最小值，H 和 S 都为 0（灰阶）
- 否则根据最大值所在通道（R/G/B）分段计算 H，结果单位是度（0–360），需
Math.round()取整避免浮点误差 - 最终 HSL 字符串格式为
hsl(${h}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)
为什么监听 input 事件比 change 更重要
用户拖拽调色器滑块时，change 事件只在松手后触发一次，而 input 会实时响应每一次颜色变化——这对预览区、RGB 输入框同步、HSL 滑块联动都至关重要。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
input在 Chrome/Firefox/Safari 中均支持，移动端 Safari 也触发（不像某些旧版 Android 浏览器） - 不要只绑
change，否则用户拖着滑块看不到背景实时变色 - 若同时需要“确认后才提交”，可在
change里加防抖或标记已确认状态，而不是放弃input
HEX 输入框手动编辑时怎么防崩
用户可能输入 #f08、FF0088、rgb(255,0,136) 等非法格式，input[type="color"] 不会接受这些，但自定义 HEX 输入框会。
- 监听
input事件，在每次输入后立即校验并标准化：value.replace(/[^0-9a-fA-F]/g, '').padStart(6, '0').slice(0, 6) - 校验通过后补上
#，再调用 HEX → RGB 转换；失败则清空或回退到上次合法值 - 别依赖 CSS
input[type="color"]的 value 自动修正——它只对原生控件生效，对自定义输入框无效
真正难的不是转换公式，而是把 HEX、RGB、HSL 三者之间的双向同步做稳：一个改，另外两个实时更新，且不因浮点误差或舍入导致来回跳变。尤其 H→RGB→H 再转回去，差 1° 都会让用户觉得“颜色变了”。
