appstoryoAppStoryolapnito.cz s.r.o.blog/camera-color-to-css-variables-web/zh-hans如何将相机拾取的颜色转换为网站的 CSS 变量Lubor Šimůnek25082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0用相机捕捉真实颜色，转换为 HSL，在几分钟内创建 CSS 变量和设计令牌。逐步指南。
设计articleAppStoryo为什么设计师从现实世界取色最好的色彩调色板很少诞生于屏幕之上。它们来自定义时尚品牌形象的布料、旅途中拍摄的墙面成为旅行网站的主色调，或者需要在数字世界中忠实还原的实体产品。物理材质拥有合成色样难以复制的情感真实性。
难点始终在于"翻译"：你看到了颜色，但需要代码。
CSS 变量基础CSS 自定义属性（CSS 变量）允许你定义一次值并在任何地方复用。在 :root 中声明，页面中的每个元素都可以继承：
:root {
--color-brand-500: hsl(220, 60%, 45%);
}在一处修改值，所有使用它的组件都会自动更新。
逐步操作：从相机到 CSS 变量打开 Color Picker Camera: HEX RGB，将实时相机对准任何材质——墙壁、包装、印刷目录——点击固定颜色。应用立即显示 HEX、RGB 和 HSL 值。一键复制 HSL 值。
将其直接粘贴到样式表中，只需调整亮度即可生成完整的色阶：
:root {
--color-brand-900: hsl(220, 60%, 20%);
--color-brand-500: hsl(220, 60%, 45%);
--color-brand-100: hsl(220, 60%, 90%);
}设计令牌与 Figma 集成Color Picker Camera: HEX RGB 支持将已保存的调色板导出为 JSON 文件——这与 Figma 的 Tokens 插件和 Style Dictionary 等工具原生支持的格式相同。此外，色彩和谐功能在取色时立即推荐互补色、三元色等变体，让你在打开电脑之前就能构建完整的调色板。
整个工作流程——相机拍摄、JSON 导出、CSS 变量——将物理世界与样式表之间的距离缩短到几分钟。
立即在 iOS 或 Android 上免费下载 Color Picker Camera: HEX RGB——无广告、无跟踪，完全离线运行。