為什麼設計師從現實世界取色

最好的色彩調色板很少誕生於螢幕之上。它們來自定義時尚品牌形象的布料、旅途中拍攝的牆面成為旅遊網站的主色調，或者需要在數位世界中忠實還原的實體產品。物理材質擁有合成色樣難以複製的情感真實性。

難點始終在於「翻譯」：你看到了顏色，但需要程式碼。

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——無廣告、無追蹤，完全離線運作。