🎨 颜色选择器

在线取色器完整使用指南

颜色选择器用于获取与转换颜色值。页面提供大号预览块、HEX 输入/显示，以及 RGB、HSL 只读或可复制字段；常见交互包括点击复制 HEX、RGB、HSL。部分实现还支持系统 EyeDropper API 从屏幕取色（浏览器支持时）。适合设计标注、CSS 变量整理与快速配色，不替代完整色彩管理体系（ICC/印刷专色）。

你能在页面上做什么

• 在色板/取色控件中选择颜色，预览实时更新。
• 查看 HEX（如 #3B82F6）并一键复制。
• 查看 RGB 分量（0–255）与 HSL 表示，便于写 CSS。
• 若有“屏幕取色/吸管”按钮且浏览器支持，可吸取桌面任意像素颜色。

推荐步骤

1. 从设计稿或灵感图确定目标色，用选择器或吸管获取。
2. 复制 HEX 给 CSS/设计工具；需要半透明时再手动加 alpha（若页面未提供 alpha）。
3. 把主色、悬停色、背景色成组记录，避免同一产品里颜色漂移。
4. 无障碍场景请再检查对比度（本页若不提供对比度计算，请另用检测工具）。

适用场景

• 写 CSS 时快速拿到 HEX/RGB
• 从截图/网页吸取品牌色
• 整理设计 token 前的颜色采集

边界

• 屏幕取色依赖浏览器权限与 API 支持，不支持时按钮可能不可用。
• 不同显示器校色会导致“肉眼不一致”，以数值为准。
• 不一定包含 CMYK/专色；印刷请用专业流程。
• 复制的是颜色字符串，不会自动写入你的代码仓库。

常见问题

HEX 可以带 # 吗？

页面展示通常含 #；粘贴到某些工具时按对方要求保留或去掉。

为什么吸管不能用？

需要 Chromium 系等支持 EyeDropper 的环境，且用户手势触发；HTTP/权限策略也可能影响。

RGB 和 HSL 哪个写 CSS 更好？

看团队规范。调亮度时 HSL 更直观；与设计稿对色常用 HEX/RGB。

能保存色板吗？

以页面是否提供历史/收藏为准；若无持久化，请自行复制到文档。

取值会上传吗？

颜色计算在本地完成，复制动作也在浏览器内。

和图片取色（从上传图取色）有何不同？

若本页主打通用选择器/屏幕取色，则不依赖上传图片；从图片像素取样请用带图片画布的取色工具页。

控件与换算链路

主预览 #previewBox/#previewLabel，原生选择器 #colorPicker，HEX 输入 #hexInput。只读/展示字段：#valHex、#valRgb、#valHsl、#valCmyk、#valCss。换算函数：hexToRgb、rgbToHsl、rgbToCmyk、hslToHex；统一刷新走 updateUI。色阶 renderShades 写入 #shadesRow；渐变 renderGradient 更新 #gradientBox/#gradientCode；预设盘 renderPalette → #paletteGrid。历史：addHistory/renderHistory/clearHistory 对应 #historyRow，并可能读写 localStorage。输入事件 onColorInput/onHexInput；复制 copyVal/copyText + showToast。

设计落地建议

从选择器或色板定点后，优先复制 HEX 给设计工具与 CSS；需要分量动画或透明度时再看 RGB/HSL。CMYK 字段便于沟通印刷方向，但屏幕 RGB→CMYK 为近似，不能替代印刷打样。色阶与渐变适合快速生成 hover/背景变体，仍建议做对比度检查（无障碍）后再定稿。历史色可避免同一产品里颜色漂移；公共电脑用完可清历史。

边界说明

不同显示器校色会导致肉眼不一致，协作以数值为准。若环境支持屏幕取色类能力则以实际按钮为准；不支持时用上传图取色或系统取色器替代。本页不写回代码仓库，也不管理完整 ICC 工作流。复制的是颜色字符串；半透明若界面未给 alpha，请在 CSS 中自行补 / alpha 或使用 rgba。