如何選擇網站的顏色定調？ (下)

接續上篇：如何選擇網站的顏色定調？ (上)

STEP 3 │主色、輔助色？我該如何配色？

當你確立好你想要的顏色，接下來就是配色！ 配色在色彩學當中是相當重要的一環，生活上也經常會使用到，像是衣服的配色、室內裝潢的配色等。
首先決定主色！
主色顧名思義就是「主要的顏色」它是代表品牌的顏色。可能是單一個顏色、雙主色或漸層色，如果你沒有品牌色彩的話，翻翻前一步你蒐集到最多的顏色是什麼？這個顏色符合你所想要表現的感覺嗎？ 有的話將它找出來吧！決定他是主色。
還有輔色！
輔色又作「輔助色」，輔助色的存在是為在讓主色與品牌更完整的顏色，是屬於次要的、一般性的。單色、多色、灰階色、彩色都有可能。
輔助色可以引導使用者區分出主要和次要的資訊，除了讓品牌形象完整外，也讓使用者瀏覽時具有層級性。

關於品牌色彩應用，可以參考 Starbucks 提供的品牌視覺規範 ，這邊可以看到 Starbucks 如何將品牌色運用在網站、店面、產品上。
更詳盡的色彩意象、色彩專有術語，可以參考：設計配色完整攻略：色彩意義、色彩理論、色彩心理學讓您一次擁有！

STEP 4│ 先別急著上色！使用灰階稿引導你。

當你已經決定了主色和輔色時，這時你可能會有超過 3 個以上的顏色，那麼你該怎麼決定哪些顏色應該大量使用？哪些顏色又應該減量使用？

1. 使用灰階稿區分資訊、視覺重心。

你可以先將網站或 App的其中一頁，先製作灰階稿，依據資料的重要性，重要到一般資訊，區分出三至五個層級，分別用不同深淺的灰色排版。

2. 加入顏色與圖片

這時你可能會意識到，有些區塊加上主色可能反而不好閱讀，抑或是太多主色導致無法區分主要或次要性；接著我們再適時的拿掉主色換成深灰色或黑色試試看。

3. 重複試驗到完成

經由這樣一步一步的嘗試、修改，你將會多種的配色可能；盡可能的想像這樣的配色主要和次要的資訊是可以區分出來的嗎？是否符合這個品牌、是否符合你想要營造的氛圍？

會不會有例外的規範顏色？

屬於例外的規範，可能是需要考慮像是 狀態性 的顏色，像是表示警告、禁用等狀態顏色呢?
這邊可以參考 Bootstrap / Tailwind 的按鈕或狀態顏色設定，再依據你的品牌做調整，讓這些顏色出現在你的網站或 APP 時不至於突兀。

仔細想想我們常見的 狀態結果顯示 代表顏色，是不是也在生活中也有相同象徵？

STEP 5 │多練習、嘗試，配色沒有絕對的公式和規範

在你嘗試第一次配色，可能會花很多時間都覺得哪邊怪怪的，這是很正常的；因為配色沒有一套絕對的公式、答案。 你可以先從一個畫面或是一張卡片進行小範圍的配色，再嘗試多個畫面；過程中你可能會想要所有顏色都使用，也有可能使用太少顏色導致畫面留白太多或過於呆板，但只要多嘗試、多蒐集靈感、多看，就能對配色越來越上手。
這邊分享我常用的選色或配色工具：

1. Color Hunt：很多美麗的配色。
2. WebGradients : 將漸層色建立成色票，可複製 CSS 並有 Sketch / Photoshop 外掛。
3. Gradient Backgrounds : 漸層色工具集。
4. Nippon Colors — 日本の伝統色 : 日本傳統色。
5. HTML color codes : 可線上選色產生色碼。
6. Adobe Color : 可在探索連結內看到網友建立的配色外，也可以在趨勢看到色彩的流行趨勢。
7. Awsmcolor(IG) ：配色分享。
8. colours.cafe(IG) ：配色分享。

閱讀上篇：
如何選擇網站的顏色定調？(上)