選色選到快瞎？讓我們用有邏輯的方式，輕鬆建構色票系統！
這不是一篇你已經看過大量類似教你色彩心理學的通識文，這是一篇帶你快速有效率，現在臨時抱佛腳，明天就可以生出一份拿給老闆看的系統化色票生成工具文！
本文主要使用 HSB 系統，來設定色相、彩度及明度。就不特別贅述顏色對一個品牌跟產品有多重要，身為設計師的你本來就該知道 😊 為了讓團隊明天就能有一個通用的色盤來運作。話不多說，我們馬上切入主題！
首先，HSB 是什麼？跟 HSL, HSV 差在哪？
在溝通設計的過程，我們常常聽到：
「這次想走和諧、柔和的 tone 調」、「好像有點髒髒濁濁的…」、「能不能再亮一點？」
身為設計師，我們需要做更精準的溝通，快速分析對方到底在說什麼。人類無法快速拆解每個顏色 RGB 或 CMYK 的構成，但卻可以馬上反應對亮度或彩度的感受，說明 HSB 最符合人類辨識色彩的習慣。上述舉例的三個問題，恰巧就能對應到 HSB 系統的三個指標：
H=Hue（色相 / 色域 / 色度）
S=Saturation（彩度）
B=Brightness（亮度）
Hue 色相
通常用 0~360 環形角度概念討論。0度從紅色開始，逆時針旋轉增加角度，360度回到紅色。黑白是無彩色，所以不在圖形內。
Saturation 飽和度
百分比概念，最大值就是 100%
數值越大，顏色中的灰色越少，越飽和純粹。
Brightness or Lightness 亮度
百分比概念，最大值也是 100%
有些地方會用 Lightness 描述，基本上 HSB = HSL
那 HSV 是啥？👀
V=Value 平常討論的時候其實邏輯是相同的，由於在數學上的定義稍有差異，因此不同系統衍生出不同的計算方式。想要詳細理解成因的公式人可以這邊細看運算差異👉🏽
因為 adobe 系統中都是使用 HSB 溝通，所以接下來只會用 HSB 來做討論。
🦄 打造品牌調色盤的步驟大致分成
step1. 挑選色相(Hue)
首先你可以從品牌定位嘗試搭配幾組符合品牌性格的色相組合！可以參考色彩心理學、顏色的歷史等書籍輔助你的選色邏輯，也可以快速從網路上大量的配色網站或 ig 小帳取得靈感，只要能說一口好故事、講得出道理，抓準心理學的通識，基本盤大概就可以被定義下來。
色盤的構成邏輯會因品牌要傳遞的氛圍而有差異，通常訂出一個主色便可旋轉 H 找到其他相同彩度的朋朋。
如上圖，單色的搭配 (monochrmatic) 容易做出平穩、安靜但相對單調的氛圍，相近色(analogous) 可以創造和諧但又細緻的變化，互補色的搭配 (complementary) 可以打造讓人感到更興奮、有精神的氛圍。而近年更流行單色的設定，像是 Netflix 或 Spotify，除了強化性格，也更容易被受眾記憶。
我們也可以根據各種使用情境，除了產品本身，還要考量社群、介面、對比度、易讀性等面向思考「需要什麼」。選擇不是越多越好，顏色太多不僅會讓品牌意象變得模糊，也會讓產品的構成變得相對複雜，導致色盤使用變得沒效率。
以載體來思考：如果這個品牌需要大量且快速運用在印刷上、有大量文案需要閱讀或是印刷成本考量，就不宜使用太複雜方式來徒增失控變因。若以數位載體為主要考量，則可以和 product designer 討論，背景色和按鈕顏色的搭配和對比度、卡片顏色、產品的內容分類或功能分類需不需要顏色輔助？
以 sofasoda 為例，色彩架構區分成：
👉🏽 Primary + Highlight + Background + Supportive 👈🏽
而 Snapask 的運用邏輯則是：
🚀 Primary + Secondary + Neutral + Special 🚀
因受眾是國高中生，且需要提供更活潑有趣的學習體驗，所以選擇彩度跟明度較高的色域，搭配小範圍螢光色當作特殊提亮使用。原本顯得較傳統保守的藍，反而有了更靈活多元的感受。而大量的輔助色，不僅可以支援多種學科課程，也可以因應亞太多個國家的偏好，讓 localize 的過程有更大調整空間。
step2. 延展色票
在限縮規範之前，我們要先當一個有選擇的人！
把顏色變多有兩種方式：
👆🏼一種是增加色相(H)，👆🏼一種是拉開色相的廣度（S,B)。
以 sofasoda 來說，在 step1 的設定是以 black 和 purple 為基礎搭配，另外選大地色做背景色供大量閱讀情境使用以及三個 supportive color 輔助課程和社群做使用。單獨針對 H 做調整不一定會馬上得到理想的結果，偶爾需要視覺微調，因為每種色相都有著獨特的 “感知明度”，在 S、B 相同的情況下，黃、青、洋紅會看起來比較亮。
而關於延伸出去的色票階數，可以固定 H，任意調整 S 或 B 找到最亮與最深的數值。訂出頭尾後，兩數值相減，再除以你要的階數，便能用等差的方式找到中間階層相對應的每一張色票。也可以先隨意的抓出等差數值，上下探索看看，再把多餘的色票刪除。往後若需要增減色票也能用同樣的方式調整。（此範例將主色票編號訂為 100，編號 70, 50, 30 是被刪除的色票，而深色範圍只留下 120, 140）
寫出每張色票的 HSB 後，你還需要 RGB 和 Hex code 方便其他情境做使用。打開 ai 或 figma 的檢色器就可以看到其他對應數值，如果手邊剛好沒辦法打開這兩種工具，用手機也可以進來看 HSB convertor 🙌🏽
👩🏽：「現在你握有 RGB, HSB, HEX，有空再回來生 CMYK 就好，你老闆應該不會瘋到叫你明天就生一本刊物出來，可以先去睡一覺。」
🥲: 「可是 MKT 週末要參加線下活動，希望明天可以送印 DM… QQ」
👩🏽：「請繼續看下去… 」🔫
step3. RGB 轉 CMYK
👩🏽：「通常大家會用最無腦的方式直接在 ai 檢色器轉 CMYK，但顏色肯定會大跑，建議拿著 PANTONE 色票看著原本設定好的 RGB 對應最相近的色列，再到 PANEYONE-CONNECT (有七天 free trail）上轉換出 CMYK，通常結果會比較理想。七天後若拿不到預算請改走這邊： https://vectorization.eu/pantone-to-cmyk-converter/。」
🥲 : 「手邊沒有 PANTONE 色票怎辦？」
👩🏽：「可試試在 PS 打開 👉🏽 編輯 👉🏽 轉換為描述欓 👉🏽 方式：絕對 / 相對公制色度 ，裡面共四個選項，可以都選看看比較一下結果。平常 color mode 直接轉 CMYK 就是所謂的感應式，會以整體自然為優先，調整每個顏色以達到到平衡，連白色都會變少少灰。但絕對 / 相對公約制，會盡量保持原圖設定，只調整超出可印刷範圍的顏色。」
🥲 : 「那 PANTONE 色票建議買哪一本？」
👩🏽：「普遍常用款 coated / uncoated，其他因素可參考包裝上的說明做挑選。紫色色域非常窄，需要花最多時間試印，可用塗布紙和非塗佈紙試印看看差異，思考最常用的紙張會是什麼種類，並記錄色盤使用建議。」
👩🏽：「另外當品牌色以黑色作為主色使用時，更需要注意黑色在印刷時 CMYK 不能只寫 (0,0,0,100) 常常會有不夠黑的問題，可讓洋紅色或青色其中一個數值也調到 100，讓黑色更飽和。不能讓每個顏色數字都 100，會因為套版位置偏差而讓文字不夠清楚銳利。」
🥲：「電腦上的 cmyk 和印出來的 cmyk 還有色票上的顏色，怎樣都沒辦法對齊？」
👩🏽：「對，所以如果最在乎的是印刷效果，一開始就應該要直接用 CMYK 做色票。但因為本文討論都以打造數位產品為主，所以印刷只是輔助，盡量調整到視覺相近，不可能完全無色偏。螢光色也不可能做轉換，只能找替代色輔助印刷時使用。」
step4.規範製作
除了 branding，product designer 也無時無刻都要用到色票。因此當 branding 的色票用套用在 product 的邏輯規範時，通常會再有一波微調。
會遇到的問題可能有：按鈕顏色對比度夠不夠？紫色用在 14pt 的 text link 放在黑色背景時，夠不夠明顯？當 branding 跟 product 都把黑色作為最常用的主色使用，黑色背景的課程封面就會跟黑色介面背景融合在一起 ，因此 branding 又要特別生出一個黑色 90 作為最深的黑色使用，才能跟 product 的黑色 100 區隔開。而 status 是否一定要用標準的綠、黃、紅？還是可以結合品牌特色？另外生出 status 的色票，也需要跟著 step2 的邏輯去延伸，搭配起來才會和諧。
最後，如何讓各個 function 都輕鬆易讀又好用？
乾脆自己架一個用各種裝置都好讀到不行的網站啦！對，本文重點，就是來炫耀 design team 共同製作的炫砲 👉🏽色票網站👈🏽 ！(建議不要用 safari ) 請服用不許不喜歡 🤗 點選色票可以直接 copy hex code 在其他地方貼上，非常方 ban！pdf 檔們終於可以退休了～
延伸探索推薦
👀 BrandColors _ The biggest collection of official brand color codes around.
👀 Adobe Color _ create color palettes and share ideas with other designers.
👀 Color Hunt _ Thousands of color palettes inspirations.
👀 Muzli color _ provide colors in use, UI kit demo, color palette recommend.
🤩 PANETONE-CONNECT _ Design with 15000 Pantone® colors. Convert Hex, CMYK, and RGB to Pantone codes.
💜 感謝你的閱讀 💜
歡迎敲我聊聊，一起成長，如果覺得文章有幫助到你，也可以點選下方連結，請我喝杯咖！☕️