顏色是使用者介面設計中的主要元素之一。它可以將
你的產品的第一印象
從複雜的酷變成瘋狂和迷亂。它並不是要混合漂亮的顏色，而是建立一個色彩系統。讓我們從最基礎的地方開始，然後努力上升到專業水平。
01
色值：什麼時候使用色值？
顏色可以用不同的方式記錄下來，最常見方式的可能是潘通色、CMYK、HEX和RGB。
雖然我們在介面設計中只使用HEX和RBG，但瞭解它們之間的區別還是非常重要的
，因為你很可能會在網上和線下與某個品牌打交道。
Pantone → 用於列印
Pantone色卡
圖片來源：Pantone官網
這是
顏料的精確混合
，所以
在全球內它都是相同的顏色
。你無法在你的家用印表機上打印出潘通色，但你可以檢視那官方的潘通色卡作為參考，專業的印表機會為你獲取特定的潘通色，並將顏色新增到機器上進行列印。因此，列印潘通色通常比較昂貴，這就是為什麼它主要用於需要在不同媒體上都相同的logo或品牌元素，其餘的都是用CMYK。
CMYK → 用於列印
CMYK
混合這四種顏色，青色、品紅、黃色和黑色，是所有其他列印顏色的基礎。這也是家用印表機和專業印表機中的四種基礎顏色。
RGB→ 用於UI設計
RGB
RGB代表紅、綠、藍。顯示器會顯示出這些顏色，所以它們
是由光而不是顏料構成的
。
光的顏色光譜比印刷品大
。由於它們的系統不同，
打印出來的和螢幕顯示的顏色永遠不會100%匹配
。這不是問題，只要調色盤本身是對的，只是需要提醒這一點。
在使用者介面設計中給出RGB值時，它的範圍是0-255，例如，R=255，G=255，B=255或RBG=255，255，255是白色，而RGB=0，0，0是黑色。
RGBA→ 用於UI設計
與RGB相同，A代表一個額外的alpha通道。
Alpha調節透明度，從0.0（完全透明）到1.0（完全不透明）。
例如，RGBA = 255， 255， 255， 0。5是具有50%透明度的白色。
HEX → 用於UI設計
用這個吧！
RGB的形式不是不能用，只是記下它有點繁瑣，而HEX（十六進位制）是RGB的一個簡短形式，它顯示
與RBG數值對應的完全相同的顏色
。由於它的字串格式，HEX
更容易記住
、複製、貼上和分享。
HEX由6位字元組成，前面有一個井號。字元前兩位代表R，三四位代表G，五六位代表B，這就是為什麼RGB和HEX對應的顏色是相同的。
注意：印刷品和介面設計中的顏色永遠不會完全一致，因為它們是以不同的方式生成的：印刷是混合油墨，介面設計是混合光的色譜。
02在列印和螢幕顯色之間轉換顏色有時你可能會需要列印的顏色來轉換到你的UI設計中。
網上有許多線上顏色轉換器，但多年來，最突出的是潘通官方的轉換器，它使用所謂的潘通色彩橋樑。如果要使用數字版本的顏色，
Pantone顏色查詢工具
在這裡，你可以選擇輸入HEX、RGB或CMYK，然後會出現一個建議的、比較匹配的潘通色。點選這個系統建議的潘通色，你還會得到其他比較相關的顏色值。如果你想將潘通色轉換為Hex，只需點選左側選單中的“Pantone to Pantone“（雖然這個措辭有點令人困惑，但它是有效的）。
✏️
提示：
如果你要把螢幕顏色轉換為印刷品顏色，可以的話，在轉換前用真實的潘通色卡來對比顏色。任何專業的設計團隊或專業列印店都應該有。
03UI設計中有多少種顏色？
三色也是室內設計中的一個概念
儘管在UI設計中沒有技術限制，但最好將顏色限制在兩到三種內。
當然，你仍然能夠使用這些顏色的變化（下文會有更多關於變化的內容）。但你很快就會知道，當你想要一個更有活力的設計時，更重要的是顏色的組合而不是使用的顏色的數量。
話雖如此，如果你有一些很棒的想法，需要使用大量的顏色，那就盡情去做吧。
規則是用來被打破的。
04如何在UI設計中選擇、混合和搭配顏色？
在挑選和混合顏色方面你可能有點天賦。但如果你對配色感到有點不放心，這裡有
一些技巧你可以使用。
使用RGB色相環
我個人是不相信顏色聯想的，如藍色是平靜的，紅色是充滿活力的。因為這是隨著文化的變化而變化的，它更多的是關於你創造情緒的顏色組合方式。
我們通常會使用RGB色相環，它有12個色塊（由所謂的原色、第二色和第三色組成）
。
為了讓例子更容易理解，我把色相環簡化為幾個部分。通常，你會在設計軟體中看到色相環，它有一個柔和的顏色過渡，讓你來挑選顏色。Adobe也有一個很棒的色相環工具，可以幫助你設定顏色。
單色（某個色彩的明度變化）
單色
挑選你的顏色，然後往色相環中央遞進，你會得到一個可愛的漸變。這種顏色組合可以創造非常微妙和複雜的外觀。
類似色（色相環中距離基色30度的顏色/在色相環上90度角內的色）
類似色
在色相環中任意一個90度內我們能得到類似色。用這種方法挑選顏色能在不失優雅的情況下為你的設計增加了一點靈動感。
互補色（色相中距離基色180度的顏色）
互補色
如果你正在尋找一些充滿活力的元素，那麼這就是你要做的。從一個基色開始，從距離基色180度的地方找到互補色。用這個方法你可以把基色和更多單色結合起來，效果很不錯！
分離互補色（採用對比色中一色的相鄰兩色，組成三個顏色的對比色調）
分離互補色
在互補色的基礎上，你可以更進一步加入一個類似色讓你設計更有活力。
這三種方法應該可以幫助你建立你的調色盤，還有更多的方法，例如
對比色法（triadic）和矩形分割法（tetradic），
你可以去看看，但它們需要更多的經驗。
05玩轉色相、色彩、色度、色調
確定了你的顏色後，並不意味著你只能用這些顏色，它們是基礎，你仍然將它們玩出花樣。瞭解調整顏色的不同方法很重要，
但千萬不要太過度。
色相、色彩、色度、色調
色相 →
是飽和度和亮度都為100%的顏色
色彩
→ 是純色與白色度組合產生的顏色
色度 →
是純色與黑色度組合產生的顏色
色調 →
是純色與灰色度組合產生的顏色
06使用顏色變數
如果想要增加一點層次感，你真正應該會用的是顏色變數。你可以手動改變色調，或者
使用
像MATERTAL DESIGN 調色盤這樣的工具。
MATERTAL DESIGN 調色盤
✏️注意：
圓圈上的“P”表示文字顏色此背景色中是否易讀。白色表示白色文字在此背景色上易讀。黑色則表示黑色文字在此背景色上易讀。
顏色變數
新增十六進位制的色值，工具會為你建立變數。你可以
根據你
的設計
需要使用任意多或少的變數
。
我通常用到3到5個，但最多9個也完全可以。
它們也不需要是精確相鄰的，你可以為你的設計選擇你喜歡的對比度，挑選一些。如果你對上面這些數字感到迷惑，在下一節我會解釋顏色命名的問題。
figma的色彩外掛
我最近發現了這個神奇的外掛：Color Shades for Figma，它可以在你的檔案中建立所有的顏色色調，非常貼心。
圖片來源：Figma社群
07以正確的方式給顏色命名
顏色命名
因此，一旦你選擇了你的顏色和變數，你可以
把它們記錄在一個樣式表或設計系統中
。
不要用顏色本身（紅色、藍色）來命名，而是使用一些通用的色值，因為顏色可能會隨著時間的推移而被替換和調整。
顏色命名
你使用什麼名字來命名並不重要，這些名字只需要具有描述性和一致性，例如，背景色、灰色等可以稱為中性色。然後你有一個主色和一個副色，我的副色通常是我的高光色。
顏色變數命名
你的顏色變數是圍繞主色或副色建立的。
因此，它們沒有自己的名字
，但它們
需要被區分，通常是透過一個數字
。在調色盤中，我比較喜歡用100、200、300。。。來命名。不過，你也可以使用10、20、30。。。。
顏色變數命名
對於基色，我喜歡用500命名，然後根據我的需要在它左右建立其他顏色。
但是請注意，
不要將它們命名為1、2、3、4....
。因為如果你在未來的某個時候
想在這之間新增其他顏色
，就會變得很混亂。所以，給
自己留出一些空間，方便應對各種可能發生的情況。
顏色樣式表
✏️
別忘了
表示
錯誤、警告、資訊和成功的系統顏色
，通常是紅色、橙色、藍色和綠色。如果你願意，你也可以調整它們來搭配你的品牌顏色，只要確保
用紅色標出錯誤就行了
。
08新增“On-color”，讓它具有可訪問性！
另一個值得加入的東西是on-color，這意味著
在另一個顏色之上使用的顏色
，
如文字或圖示。
有意識地使用on-color有兩個主要好處：
加入on-color
1。 你會時刻被提醒檢查顏色對比度的可讀性。要麼在你的設計軟體中使用外掛，要麼使用像圖中那樣的線上對比度檢查器。順便說一下，根據WCAG的規定，你必須要讓你的頁面具備可訪問性。
檢查對比度的可讀性
2。 比方說，你的輔助色是深灰色，而你還沒有定義一個
on-color
。通常情況下，這個顏色會被做成一個變數，並被用作文字顏色。現在如果你改變這個顏色，比如變成亮藍色，那麼你需要改變你設計檔案中的所有文字，甚至是程式碼。所以用上
on-color，讓
事情保持的簡潔和簡單。
09自己用figma試試吧！
你可以在這裡下載Figma的免費顏色樣式表，自己嘗試一下！
Figma顏色樣式表
1060：30：10顏色分佈法則
顏色分佈規則
除了使用什麼顏色之外，還有一個重要的部分是如何使用它們
。60：30：10規則是一個很好的經驗法則。這意味著在設計中你最多使用60%的主色，30%的輔助色用來突出內容，10%的地方使用強調來引導使用者行為（如CTA、按鈕）。
60%為主色，30%為輔助色，10%為CTA的強調色。
這是一種
顏色排布的“感覺"，而不是精確的測量。
在此，顏色可以是一種顏色或一種顏色及其顏色變數。你可以嘗試一下，但是，要確保你的CTA始終是一致並且是突出的。
60：30：10規則
正如圖中所看到的，運用這一法則你能得到有相當厚實的基礎並能讓人真正注意到CTA的頁面。
