從配色靈感到能實際套用的網站色票

有品牌照片或情境圖時，想保留某個位置的顏色，就用圖片取色器；想快速整理整張照片的主要色彩，則用圖片色票產生器。圖片抽出的顏色反映原圖內容，不會自動判斷哪個適合做內文、按鈕或背景。

以咖啡店官網為例，可以從照片挑出奶油白做底色、咖啡棕當重點色，再留一點低彩度綠色作裝飾。先決定用途，才不會把每個顏色都用在同一頁搶注意力。還沒有照片或品牌色時，可以先從隨機配色挑出一個方向。

5 色配色產生器可以鎖定個別色票，重新產生時只更換未鎖定的顏色。選擇配色模式後，目前排列中第一個鎖定色票會成為新顏色的基準；其他鎖定色票仍會保留原值，即使它們不屬於該配色關係。

先鎖住品牌主色，再比較適合的背景與輔助色。調換鎖定色票的順序，也可能改變產生配色的基準。五格都鎖定時，要先解鎖一格才會出現新結果。配色關係是探索方向，並不代表文字一定清楚。

1. 挑出最重要的主色並鎖定。
2. 選擇配色模式，只重新產生未鎖定的色票。
3. 替保留的顏色標註背景、區塊、文字、重點或裝飾等用途。

色彩變化產生器會從單一基準色延伸混白、混黑與透明度變化。可以拿來找卡片的淺底色或按鈕的深色狀態，不必額外加入一個無關色相。工具也列出基準色搭配黑字、白字的對比值，適合快速比較；若要找更多文字色候選，可接著使用可讀文字色工具。

半透明色實際呈現會受後方底色影響，請回到頁面確認疊色後的效果。設計稿與 CSS 使用的格式不同時，可用色碼轉換器整理 HEX、RGB 或 HSL，並記錄最終色值，不要只憑螢幕上的色塊判斷。

可讀文字色工具會依輸入的純色背景提供文字色建議，可選 AA 一般文字 4.5:1、AAA 一般文字 7:1，以及 AA 大型文字 3:1。已有文字與背景組合時，可用色彩對比檢查器查看數值。3:1 對應 AA 大型文字，不是一般內文的門檻。

商品說明、表單與長篇內文，請以一般文字目標評估，並用實際字型試讀。接著逐一檢查連結、焦點提示、錯誤訊息與各種互動狀態的可讀性。詳細定義可參考下方 W3C 文件。

隨機漸層產生器可建立兩色或三色 CSS 線性漸層，手動修改顏色與角度，再複製 CSS 或下載檔案。首頁主視覺可以先從兩個接近的顏色開始，確實需要中間過渡色時，再加入第三色。

文字在單一純色上對比達標，不代表放在整片漸層上都清楚。請檢查實際文字範圍內的背景，並留意手機版換行與裁切後的位置。若難以維持穩定對比，可以讓內文放在純色卡片上，漸層保留在周圍做裝飾。

配色預覽把五個顏色分配成頁面背景、區塊底色、文字、主要操作色與主要操作上的文字色。色票排在一起好看，不代表套進介面後就適合；先比較範例內文與按鈕，再依用途調整各個角色色。

在 5 色配色產生器中，主動按下預覽操作，才會把目前五個顏色依序帶入背景、區塊、文字、主要操作色與按鈕文字。一般連結只會開啟預覽，不會自動帶入產生器的配色。這項操作在目前瀏覽器分頁內傳遞色值，不會把顏色放進網址。

從預覽複製 CSS 自訂屬性，再於自己的樣式表中對應各個用途。五個角色色是實作起點，不會自動完成整套主題或整頁無障礙檢查。上線前仍要確認內文、按鈕文字、滑鼠移入、鍵盤焦點與實際使用的背景組合。

交付設計或實作時，替每個最終色值註明用途，以及已檢查的文字／背景組合。例如分開記錄「頁面底色」與「主要操作按鈕」，比只貼一排 HEX 更容易維護。漸層則另外保存完整 CSS，避免遺漏角度與色彩排列。

上線前，用真實文案檢查長文字、滑鼠移入、鍵盤焦點，以及有支援時的深淺模式。背景改色或增加透明度，都可能讓先前測得的對比失效；文字色與背景色只要有一方調整，就重新確認最終組合。