网页设计中如何选取与转换颜色
在 HEX、RGB、HSL、OKLCH 之间互转；构建可达标的对比色对；导出设计系统可用的色板。
与本篇教程搭配使用的更多工具：
为什么重要
设计师在 Figma 里给出 #5B2A6F，工程师写进 CSS 变量。两周后 QA 反馈：在浅色背景上，主按钮对比度达不到 WCAG AA。修正往往只需在 HSL 里微调明度——但肉眼无法判断对比度是否跨过 4.5:1。能同时展示各色彩模型与对比度评分的工具，才能把「好看」和「能通过审计」对上号。
三个真实场景
粘贴前景与背景色，读对比度比值，调节明度直至 ≥4.5。
界面可访问
从品牌色出发，在 OKLCH 中生成更浅/更深阶梯，感知上更均匀。
色调一致
将 Pantone 参考转为 RGB，再在 HSL 中微调直至屏幕色块接近印刷样张。
营销活动视觉一致
操作指南
打开 颜色编辑器。
选取或粘贴颜色
点击色块使用取色器，或粘贴
#5B2A6F、rgb(91 42 111)、hsl(280 45% 30%)、oklch(35.5% 0.12 304)等任意形式。查看所有模型
HEX、RGB、HSL、HSV、OKLCH 并排显示。编辑任一字段，其余联动更新。
构建对比色对
在「背景」槽放入第二种颜色，界面显示对比度及 WCAG AA / AAA 徽章。
生成变体
用 OKLCH 取色器在保持色相与彩度的前提下步进明度——推导设计令牌最干净的做法之一。
导出
支持复制为 CSS、Sass、JSON 或设计令牌格式。
HEX
#5B2A6F其他模型
RGB: rgb(91, 42, 111)
HSL: hsl(280, 45%, 30%)
OKLCH: oklch(35.5% 0.12 304)
进阶技巧
- 设计令牌优先用 OKLCH。 在 HSL 里调明度，感知上的步进不均匀；OKLCH 更接近人眼对亮度变化的感受。
- 印刷对色不要迷信未校准显示器。 匹配 Pantone 或 CMYK 需要校准流程。
- 深色模式可在 OKLCH 中反转明度，同时略降彩度以减轻视觉疲劳。
- 设计文档里同时记下 HEX 与感知空间数值，方便后来者维护。
常见误区
常见误区
同一 HEX 在手机与笔记本上观感不同
不同色域（sRGB vs Display P3）与亮度设置会让色块「感觉」不一致。需要广色域时应用 color(display-p3 ...) 明确标注。
常见误区
对比度工具判失败但肉眼觉得还行
对比度是数学度量；光学对比受周围上下文影响。数学结果是合规/审计基线；正文在可行时应追求高于 4.5:1。
常见误区
CSS 变量在各组件间漂移
规范令牌只定义一次并全局引用。变体应通过派生（如 oklch(from var(--brand) calc(l + 0.1) c h)）生成，勿各处手写重复数值。
何时不适合用本工具
- 印刷色彩管理——请用 Adobe 等工作流并配合校准。
- 大批量图像取色分析——应用脚本配合
chroma.js、culori等库。 - 色盲模拟——专用工具（如 axe DevTools 的对比度分析）可模拟二色觉等，不单靠简单比值。
常见问题
HSL 与 OKLCH 有何区别？
HSL 在感知上不均匀：同样 10° 色相偏移，在不同明度下观感差异很大。OKLCH（OKLab 的极坐标形式）让调整更可预测。
是否支持 CSS Color 5？
支持 —— color-mix() 与 oklch(from ...) 等在现代浏览器可用；工具会按所选浏览器特性发出兼容的值。
我的颜色会被存储吗？
不会。一切在本地完成；复制到剪贴板为可选操作。
下一步
- 用 图片格式转换 核对素材整体配色是否与所选颜色协调。
- 用 SVG 转 PNG 导出最终 favicon 或位图 Logo。
- 嵌入式场景可通过 图片转 Base64 处理图像颜色相关用法。