在寫網頁時，除了命名規則、排版會讓我們感到困擾之外，顏色搭配也是我們會感到糾結的一部分。配色是一種直觀的感受，所以要掌握它並不是那麼的容易，接下來我要分享對於色彩的理解，那麼，就讓我們繼續看下去。
根據維基百科的解釋【1】，原色指的就是不可以透過其他顏色的分解、混合而成的基本色，常見的三原色分類方法有兩種。一種是疊加型，也就是常見的三原色光模式（RGB color model），由紅（Red）、綠（Green）、藍（Blue）三種色光所組成，因為是色光的關係，所以三種顏色混合起來會越來越亮、越來越白，常常用於電腦視覺畫面的呈現。而電腦的另外一種表示色彩的方式印刷四分色模式（CMYK），分別由青（Cyan）、洋紅(Magenta)、黃（Yellow）三種原色，再加入一個黑色（Black），當顏色越疊越多，顏色會越來越暗。
RGB：用於電腦螢幕上呈現。CMYK：實體印刷時顏色呈現。RGB 與 CMYK 之間可以互相轉換，但是要注意互換的數值可能會不一樣，也就是無法完全轉換的意思【2】。
孟塞爾顏色系統【3】是一種以立體圖餅形狀的比較顏色系統。色相、明度、彩度（這三者合稱為色度）。色相指的是顏色的種類，也就是顏色的名稱，例如：紅色、黃色、綠色等等；明度則是指顏色的亮度，明度高則顏色會越淡、越接近白色，反之則會明度越低顏色會越接近黑色；彩度指的是顏色的鮮豔程度，也就是顏色的深淺，例如：我們有一個紅色，當紅色的彩度越高，紅色會轉變成深紅色，反之當彩度越低，紅色逐漸轉變成粉紅色。
圖片來源：https://commons.wikimedia.org/wiki/File:Munsell-system.svg
色環（Color Wheel）又稱為色圈、色輪。原本是由瑞士設計師約翰·伊登提出的架構。它是一個由 12 種顏色所組成的圓形環狀 2D 平面圖形（色環形狀有點像是甜甜圈），根據 Wiki 的說明我們知道有對比色、類似色以及暖色與冷色幾種區分方式（應該有其它的區分方式）。對比色就是某個色相的正對面的顏色，以視覺來說，對比色可以讓顏色明顯的區分效果，像是橘色配上藍色、紫色配上黃色等等，顏色搭配起來都會有強列的視覺對比。類似色則為相鄰色，指的是某個色相左右旁邊的顏色（同類的概念）；暖色與冷色則是以 綠色和紫色作為分界點，將紅色、橙色、黃色歸類在暖色，而藍色、綠色、藍綠色則歸類在冷色系。
圖片來源：https://commons.wikimedia.org/wiki/File:Colorwheel.svg
在色環中，與對面色相相對成 180 度的稱之為
互補色，而落在 100度~179 度則是對比色。雖然我不太理解 Wiki 【4】描述互補與對比的差別，不過它的意思應該是指：互補色是對比色的其中一種。
下方表格是我依照色彩心理學【5】內的資訊所整理過的表格，僅供參考。 每種顏色都有對應的象徵（給人的感覺），有點類似星座性格分析？若是想要表達某種象徵，可以依照下方表格與顏色做搭配。
在 CSS 的屬性中，顏色表示方法有 RGB、HSL、Hex 這三種【6】【7】【8】。
RGB使用三個引數表示，每個引數的數值介於 0~255 之間 （0 為黑色，255 為白色 ），例如rgb(234, 159, 255)為粉紅色的寫法，另外可以給一個 Alpha 值，用來表示透明度，範圍介於 0～1 之間（數值越小越透明），例如 rgba(234, 159, 255, 0.7)。
HSL是另一種表示顏色方式，H 代表色相（Hue），它用 360 度表示所有的顏色，色相不用加上單位，S 代表飽和度（Saturation），也就是指彩度，單位用 % 表示，數值越大顏色越深，而最後的 L 則是代表明度或是亮度（Lightness），單位也是用 % 表示，數值越大顏色越亮，最亮為白色（100 %），最暗為黑色（0 %）。
可以直接使用 Colors HSL 來調整顏色。
Hex指的是顏色的 16 進位，以「＃」字號為開頭，後面由 6 位數所組成（若加上 Alpha 值則會有 8 位數）， 數值的範圍在 0～f 之間，前 2 個 0 代表 RGB 顏色中的紅色的 R，中間 2 個 0 代表綠色的 G，最後兩位數則是代表藍色的 B。例如：#ff0000（紅）、#00ff00（綠）、#0000ff（藍）。
對於剛接觸過色彩學的初學者來說，學習色彩最困難的地方並非是專業術語的理解，困難的反而是：要如何在網頁上搭配顏色，整理畫面才不會感到特別突兀；個人的學習方式，則是偏向直接參考各種優秀的配色，然後試著將顏色加進自己的專案中，選取顏色 我推薦使用 Just Color Picker 這個取色工具，要抓取顏色很方便。
iThome鐵人賽
看影片追技術
