appstoryoAppStoryolapnito.cz s.r.o.blog/camera-color-to-css-variables-web/zh-hant如何將相機拾取的顏色轉換為網站的 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——無廣告、無追蹤，完全離線運作。