颜色转换CSSLabOKLab单位换算前端工程
颜色与单位换算手册：CSS色彩全家桶与长度/重量/温度速查
随着显示设备从 sRGB 跨向 P3、REC.2020，颜色空间与色域的讨论越来越常见。工程里常见诉求是“给我一个从设计到实现可落地的颜色与单位换算方案”：既能互转（HEX/RGB/HSL/HSV/HWB/CMYK），又能可视化选色，还能处理 Lab/OKLab、P3/REC.2020 等“进阶空间”。另一方面，业务侧总会有长度/重量/温度的小换算需求，若没有统一工具，很容易出现“同一个值在不同页面不一致”的情况。
一、CSS 颜色：从基础到进阶
- 基础格式：HEX（含 alpha 的 HEX8）、RGB/RGBA、HSL/HSLA、HSV/HWB；
- 名称识别：CSS 颜色名称表在设计沟通时很高效；
- 可视化选择器：实时拖拉取色，减少“RGB 与 HSL 心算”的沟通成本；
- 扩展空间：Lab/LCh/OKLab/OKLCh 提供更符合人眼感知的距离度量；
- 专业色域：XYZ、P3、REC.2020 等在高色域设备上显著提升鲜艳度与细节。
实践要点：
- 团队约定“主色/辅色/强调色”的标准表达与备选格式（如 HEX 与 RGB 双存）；
- 若目标是高色域设备，单测中加入“sRGB 回退方案”的对照；
- 输出时一键复制所有格式，避免手抄差错。
二、单位换算：统一入口与小数位控制
常见的长度（m/km/cm/mm/mi/ft/in）、重量（kg/g/mg/t/lb/oz）、温度（°C/°F/K）换算，建议集中在同一工具执行并“固定小数位（如保留 6 位）”。这样一方面利于页面展示一致性，另一方面也减少后续接口联调因四舍五入策略不同导致的误差。
三、工程化建议
- 与设计侧约定：色彩选取→在线转换→导出多格式→落库
- 与前端约定：组件库用统一色值表，不在组件内随意硬编码
- 与产品/运营约定：换算统一走工具，不用“手算/随手搜”的方式
🔗 相关工具
- CSS颜色转换 - HEX/RGB/HSL/HSV/HWB/CMYK 互转，支持 Lab/OKLab、P3/REC.2020
- 单位换算（长度/重量/温度） - 保留 6 位小数，简单稳定