可直接调用系统原生颜色选择器,支持主流现代浏览器(ie不支持),默认值需为合法十六进制色(如#f00),返回srgb格式字符串,可通过label、input事件和css增强体验。

直接用 <input type="color"> 就能唤起系统原生颜色选择器,无需额外 JS 或第三方库。
基础写法与默认行为
只需一行 HTML:
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
浏览器会自动渲染为一个带预览色块的按钮,点击即弹出操作系统级颜色选择器(Windows 上是标准调色板,macOS 是色彩面板,移动端调起系统取色界面)。默认值 value 必须是合法的 7 位或 4 位十六进制颜色(如 #ff0000 或 #f00),否则回退为 #000000。
常用增强写法
-
添加 label 提升可访问性:用
for关联 ID,屏幕阅读器可读,点击文字也能触发选择器 -
绑定事件实时响应:监听
input事件(非change),用户拖拽滑块或点选时立即获取新值 -
配合 CSS 微调样式:可设置
width、height,但注意部分浏览器(如 Safari)对尺寸限制较严格,建议保持默认高度或仅微调
兼容性与注意事项
Chrome、Firefox、Edge、Safari(15.4+)及主流安卓/iOS 浏览器均支持。IE 完全不支持,需降级处理(例如 fallback 为文本输入框 + 颜色预览 div)。另外,该控件只返回 sRGB 十六进制字符串(如 #34c759),不提供 HSL、RGBA 等格式,如需其他格式需自行转换。










