前端顏色知識
沒設計稿的人真的很受傷…
顏色的表示方式
-
顏色名
HTML 和 CSS 顏色規範中定義了 147 種顏色名（17 種標準顏色加 130 種其他顏色）
寫法：red、green、blue…
取值範圍：這裡所有瀏覽器都支援的顏色名 -
16 進製表示法
組合了紅綠藍顏色值（RGB）的十六進位制（hex）表示法，使用三個雙位數表示一種顏色
寫法：＃RRGGBB。相同的值可以縮寫，例如：color：#fc0
取值範圍：所有值 00 - FF -
rgb()
使用 CSS 提供的 rgb() 函式表示顏色
寫法：rgb(0, 0, 255) 或 rgb(0%, 0%, 90%)
取值範圍：0 - 255 的整數 或 0% - 100% 的整百分比，百分比和數字值不要混用 -
hsl()
使用 CSS 提供的 hsl() 函式表示顏色，h（色相）、s（飽和度）、l（亮度）（英語：Hue, Saturation, Lightness）
寫法：hsl(120, 60%, 50%)
取值範圍：h 取值範圍為 0 - 360，可以為整數，也可以取浮點數，s 和 l 的取值範圍 0% - 100%。 -
rgba()、hsla()、transparent
帶透明度的顏色，a 為 alpha，透明度
寫法：rgba(0, 0, 255, 0.6)、hsla(120, 60%, 60%, 0.8)、transparent
取值範圍：a 0 - 1；tranparent 表示透明
理解 HSL 顏色模型
顏色的十六進位制表示法基於 RGB 顏色模式，書寫方便，但是不利於我們理解顏色，
自己動手在這個網站中 HSL 取色器 取幾個顏色試試（請務必自己動手，加深理解）
色相
H（色相）表示這是什麼顏色
把各種顏色排列成一個環狀得到一個色相環，環上不同度數表示不同顏色，對應色相的取值範圍 0 - 360。
理解了色相，當我們需要一種藍色的時候，就可以把色相拉到 240 的附近去尋找。例：hsl(240, 100%, 50%)
飽和度
S（飽和度）表示顏色的深淺如何
確定了色相之後，調整顏色的飽和度，可以得到不同深淺的藍色。越高顏色越純，低則逐漸變灰。例如：把 s 的值從 100% 降低到 40% 時得到hsl(240, 40%, 50%)，顏色變淡了，好像褪色了一般。
亮度
L（亮度）表示顏色的明暗如何
在色相，飽和度一定的情況下，改變亮度，得到不同亮度的藍色
來一個夜空深邃藍 hsl(240, 40%, 15%)
來一個小清新喜歡的藍色 hsl(240, 40%, 85%)
HSL 模型亮度中間值為 50%。亮度取值從 50% - 0%，值越小越暗，直到 0% 變為黑色；從 50% - 100%，值越大越亮，直到 100% 變為白色
嚴格來說 hsl(240, 100%, 50%)、hsl(240, 40%, 50%)、hsl(240, 40%, 15%)、hsl(240, 40%, 85%) 都是藍色，只是飽和度和亮度不同。然後就可以給他們取一些很騷氣的名字，什麼深邃藍、冷靜藍、夜空藍、清新藍…
顏色的含義
生產生活中給不同的顏色賦予了不同的含義，比如工業設計中會使用紅黃藍綠代表不同的安全等級，網頁設計中則借用這幾種顏色表示不同的狀態
其中，紅色 - 錯誤/失敗、黃色 - 警告、藍色 - 提示、綠色 - 成功
介面配色技巧
toB 業務的產品，多數沒有設計稿，往往需要參考相關產品的設計，比照人家抄吧，又顯得很 Low。這時懂得一些介面的配色技巧，可以助你更優雅的參考相關產品，達到與相關產品 “和而不同” 的神奇效果。
1. 主色、輔色、中間色
首先為產品選定一個顏色作為主色，主色為介面整體定色調，這裡可以參考 HSL 模型選擇合適的顏色。當需要使用色彩的時候，首先想到使用主色，比如按鈕、高亮文字、帶顏色的陰影、帶顏色的邊框、標籤…
其次選擇輔色，輔色起功能性作用或點綴作用，功能性顏色（紅黃藍綠）表達某種狀態，點綴色可以選擇與主色搭配的顏色。輔色不宜大面積使用，不宜採用太多的顏色。
中性色用於文字、背景和邊框顏色。通過運用不同的中性色（灰色），來表現層次結構。
結合主色、輔色、中間色大致可以幫助你得到一個不花哨、不單調的簡潔色彩配置。
2. 變換顏色飽和度和亮度
只用一個主色，難免容易審美疲勞；顏色太多又太花哨，設計的好了很出彩，設計的不好就 Low 了。對於沒有受過這方面培養的大多數人（我），設計的 Low 可能性更大。
可以變換主色的飽和度和亮度，產品中使用不同深淺主色，既保持介面的統一，又增加介面的層次感。