調色盤產生器在 Lizely 上完全透過用戶端 JavaScript 在您的瀏覽器中執行，因此您輸入的顏色永遠不會被上傳、儲存或傳送至任何伺服器。每個配色都是從 HSL 色輪本地運算而來——挑選一個基底 HEX(例如 #3b82f6)只是將該顏色拆分為色相、飽和度、亮度三個通道，數學運算會即時對其進行旋轉。因為運算發生在您的裝置上，所以不需要帳號、註冊或與後端的網路連線，而關閉瀏覽器分頁就是您唯一需要的清理步驟。沒有任何東西會記錄您輸入的 HEX、選擇的配色或點擊的色彩樣本。本文將逐步說明在工作階段中您的顏色會發生什麼事、本地數學運算如何運作，以及在調色盤隱私很重要時如何使用這個產生器——品牌探索、客戶儀表板和個人情緒板都能從同一個本地工作流程中受益。設計師刻意使用這個特性:建立在本地優先產生器上的調色盤不會留下伺服器端的歷史紀錄，讓同事、雇主或第三方服務日後無法檢視，即使是探索性或未簽署的工作也是如此。
建立調色盤時，您的顏色會發生什麼事
當您開啟調色盤產生器時，頁面會載入一組少量的 HTML、CSS 和 JavaScript 檔案。在那一次載入之後，頁面只會與您的瀏覽器通訊——沒有 API 呼叫、沒有夾帶您顏色的分析 ping，也沒有後端在等待表單提交。色彩選擇器、HEX 輸入框和每個色彩樣本都是頁面上的靜態元素;它們唯一共享的狀態存在於瀏覽器記憶體中，僅在分頁存續期間有效。
來自該工具合約的三個已驗證事實讓這一點具體明確。第一，產生器完全使用用戶端 JavaScript 在您的瀏覽器中執行。第二，沒有任何內容會被上傳、儲存或傳送至伺服器。第三，使用它不需要帳號。
如果您在未複製 HEX 的情況下關閉分頁，記憶體中的值會隨頁面一起消失。重新整理頁面會將基底顏色重設回其預設值。沒有「已儲存的調色盤」歷史紀錄、沒有基於帳號的資料庫，也沒有雲端同步——這個工具甚至沒有歷史記錄面板，因為沒有任何內容可以填入其中。
這很重要，因為色彩選擇經常會洩漏進行中工作的資訊。一個品牌測試調色盤暗示著新的產品方向。一個客戶儀表板調色盤暗示著一項路線圖項目。一個情緒板暗示著您尚未公布的個人專案。即使以匿名方式將其中任何一個傳送到伺服器，都會擴大該資訊存在的範圍。純用戶端的產生器將受攻擊面保持在零。
調色盤如何在您的瀏覽器內部運算
調色盤產生器為每個配色使用單一資料來源:HSL 色輪，其中色相是從 0° 到 360° 的圓。挑選一個基底 HEX 會轉換為三個數字——介於 0° 到 360° 之間的色相、介於 0% 到 100% 之間的飽和度，以及介於 0% 到 100% 之間的亮度——而配色是透過將該色相旋轉固定角度，同時保持飽和度與亮度等於基底或沿著色階遞進所產生的。飽和度與亮度刻意與色相分開，如此一來，當您切換配色時，顏色之間的關係仍可預測。
一個簡單的計算範例可以說明為何這很重要。以基底顏色 #3b82f6 為例，這也是該工具說明所使用的 HEX。將該 HEX 轉換為 HSL 會得到大約 217° 的色相、約 91% 的飽和度與 60% 的亮度——這是一個飽和的藍色。互補配色將色相旋轉 180°，落在 397°。產生器執行色相回繞，所以 397° − 360° = 37°。在 91% 飽和度與 60% 亮度下，37° 的色相是溫暖的橙黃色。該橙黃色是原始藍色的直接、最大對比互補色，完全在您的裝置上運算完成，無需諮詢任何外部服務。
該單一運算也說明了選擇 HSL 而非原始 RGB 的設計原因。如果您改為嘗試透過反轉每個 RGB 通道來運算互補色 (R' = 255 − R、G' = 255 − G、B' = 255 − B)，結果會取決於確切的通道值，而且很少會落在令人愉悅的配對上。HSL 色輪上的色相旋轉保證結果正好位於圓上與基底相對的位置，無論您從哪個飽和顏色開始，而古典色彩理論將這些關係描述為和諧調色盤的基礎。
六種可用的配色都以相同類型的旋轉或步進表示:
| 配色 | 套用於基底色相的數學運算 | 典型用途 |
|---|---|---|
| 互補色 | +180° | 最大對比;呼籲行動的強調色 |
| 類似色 | ±30° | 平靜、協調的組合;自然的配色 |
| 三等分色 | +120° 和 +240° | 平衡、生動的三色組合 |
| 四等分色 | +90°、+180°、+270° | 豐富的四色配色，具有兩個配對錨點 |
| 分裂互補色 | +150° 和 +210° | 比直接互補更柔和的對比 |
| 單色 | 色相不變，亮度遞進 | 用於 UI 深度、邊框、懸停狀態的色階 |
此表格中的每個值都是該工具報告為預設的關係;您的基底顏色的確切 HEX 和 RGB 輸出來自執行產生器本身。
建立和諧的調色盤而不傳送任何內容
本節確認從第一次點擊到複製色彩樣本，工作流程始終保持本地。
- 在任何現代瀏覽器中開啟調色盤產生器。不需要擴充功能、外掛或帳號。
- 使用色彩選擇器選擇基底顏色——或直接將 HEX 輸入 HEX 欄位，例如 #3b82f6。
- 從六個選項中選擇一種配色:互補色、類似色、三等分色、四等分色、分裂互補色或單色。調色盤會立即在您的螢幕上更新。
- 讀取每個色彩樣本下方顯示的 HEX、RGB 和 HSL 值。這些數字存在於頁面的 DOM 中，直到您關閉分頁。
- 點擊任何色彩樣本即可將其 HEX 複製到剪貼簿。複製是一個本地操作;瀏覽器只會將該字串交給您的剪貼簿，而不是伺服器。
- (選擇性)如果第一組配色不符合心情，可使用不同的配色重複操作——您的瀏覽器記憶體僅保存目前的配色，而重新整理會返回預設值。
在任何時候都不會傳輸 HEX。如果您在執行該工具時觀察瀏覽器的網路分頁，在初始頁面載入之後唯一的網路活動是針對瀏覽器已經快取的靜態資產。
為何本地處理對色彩工作很重要
設計師和開發人員選擇本地優先工具有幾個實際原因，而不僅僅是隱私議題。
可預測的結果。因為數學運算在每台機器上都相同，#3b82f6 的互補色在東京和 Toronto 都一樣。一個今天正確旋轉色相的伺服器端產生器可能會在更新時悄悄變更其演算法;而您本地快取的邏輯不會。
離線運作。一旦頁面被您的瀏覽器快取，即使在不穩定的咖啡廳 Wi-Fi 或飛機上，您仍可繼續使用它而不會失去調色盤的存取。對於每次配色變更都依賴即時 API 的工具來說，情況則不然。
降低未完成構思的曝光。當您在公布前測試品牌顏色時，您不會希望您的候選清單透過任何記錄管道傳播。本地處理可將該管道從工作流程中完全移除。
無需管理的帳號。調色盤產生器不會要求電子郵件、登入或付款方式。也沒有任何地方儲存您調色盤的「歷史紀錄」，因為沒有歷史功能——每次造訪都從預設的基底顏色開始。
對於想要更深入了解本地優先設計的讀者，調色盤產生器替代方案指南說明了基於瀏覽器的工具在典型 SaaS 調色盤工作流程中取代了什麼。
搭配良好:對比與轉換工具
建立調色盤是第一步。將其放到實際頁面或實際產品中通常意味著匯出每個顏色，並針對文字或其他背景進行檢查。產生器之後的每個步驟也可以保持本地。
若要檢查色彩樣本在所選背景上的可讀性，色彩對比檢查器可在瀏覽器中直接將任何文字/背景配對與 WCAG 2.2 AA 和 AAA 進行比較，因此您可以在不上傳副本或螢幕擷取畫面的情況下驗證調色盤。若要在下游工具要求特定格式時進行格式轉換，HEX 轉 RGB 轉換器和RGB 轉 HSV 轉換器都使用用戶端執行，並可一鍵複製轉換後的值。如果設計最終需要在您的兩個調色盤顏色之間使用漸變，色彩漸層產生器會在本地建構其 CSS，並將可立即貼上的宣告交給您。這些相鄰的工具都不需要帳號，而且都不會將您的顏色傳送到任何地方。
開始前的快速隱私檢查清單
- 關閉同一瀏覽器視窗中任何不相關的個人分頁——乾淨的設定檔可為敏感的品牌工作保持較小的受攻擊面。
- 對於不想與您主要設定檔關聯的一次性調色盤，使用隱私或無痕視窗。
- 在調色盤工作開啟時，停用會讀取頁面內容的瀏覽器擴充功能。大多數不會執行任何操作，但「沒有意外讀取者」的被動規則值得保留。
- 在第一次頁面載入後離線執行該工具以獲得最強的保證。一旦資產被快取，JavaScript 就不需要網路連線。
這四個步驟是防禦性的，而不是必需的——產生器本身已經將您的顏色保留在您的裝置上。這些習慣可使該工具的本地優先設計更加健全。
如果您正在權衡選項，RGB 轉 CMYK 調色盤構想:從螢幕到紙本對此進行了詳細說明。