寫給前端工程師的色彩常識：色彩三屬性及其在CSS中的應用

• 2019 年 10 月 7 日
• 筆記

大家好，本篇文章，筆者將給大家聊聊關於設計方面的一些常識，你也許會很奇怪的問，前端工程師有必要了解設計相關的常識嗎？那我的答案就是十分有必要。因為我們這個工作崗位做的產品直接面向使用用戶，因此用戶直觀的感受決定著產品的好與壞，其中設計的展現就是給用戶的第一印象。為了保證產品的品質，你就避免不了和相關工作崗位的人直接溝通，比如產品經理，設計師，後端工程師等等。

為了更好還原設計師做的設計效果，設計師會不厭其煩的和你溝通，因為這也是他付出心血完成的作品，希望你能夠認真對待儘可能百分之百的還原。在溝通的過程中，如果你不懂設計師的設計語言（設計常用語），這樣你們的溝通成本會很高，甚至因為誤解，造成各種的不愉快，為了解決此問題，前端工程師們還是有必要了解一些設計常識，本系列專題筆者將帶著大家從色彩常識開始了解，本篇文章我將給大家介紹下什麼是色彩的三屬性以及其在CSS中的應用。

色彩三屬性簡介

在網頁設計中，用到的設計素材主要有印刷品、拍攝的照片、掃描的圖片、網上搜索的素材。若要讓這些素材保持一致的色調，我們就必須要了解下組成這些素材的三要素：「色相」、「飽和度」、「明度」。

以前我也是聽設計師們給我經常嘮叨這些專業名詞，我也是似懂非懂的，只是從字面意思簡單理解，從沒有想過深入理解以及背後的原理和應用，從而造成了不必要的溝通成本。為了避免大家少走彎路，今天我特意把相關的基礎知識進行了梳理分享給大家。

1、色相

「色相」(或稱作色調)指的是紅色、藍色等各種顏色。「色相環」則是把各種顏色以環狀方式進行排列。這樣做的好處，除了直觀方便，其實還有對應的應用規則，由於文章篇幅有限，在稍後的專題文章里會有介紹，色環對設計工作者來說十分重要，是設計師常用的設計工具。

2、飽和度

「飽和度」指的是顏色的飽和程度。從字面上來說，你可以這麼理解，比如你吃某一樣東西吃多了就會有飽腹感，換成色彩，就是用某種色很濃厚，會顯得這個色彩很飽滿。在拿個例子來說，比如同樣是紅色，但紅豆的紅色暗沉，這時候這種紅色則稱為「飽和度低」的紅色。飽和度是影響色彩的重要屬性，完全沒有飽和度的顏色稱為「無彩色」，這就是我們熟知的「黑、白、灰」。這些「無彩色」的一個重要功能就是與其它色彩保持平衡的重要作用，這是為啥大部分網頁選擇這些「無彩色」作為網頁背景的重要原因。

3、明度

「明度」（或稱作亮度） 指的是顏色的明亮程度。原色的色相不同，明度也有所不同，如紅色的明度較低，而綠色的明度較高，雖然都是原色，但是明度的差距比較大，我們在使用的時候需要特別注意。此外我們需要注意，「無彩色」只有明度數值。

好了，接下來我們看看業界還用哪些模式來表示色彩。色彩三要素的概念，在RGB色彩模式(RGB色彩模式是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色)或CMYK色彩模式(印刷四色模式是彩色印刷時採用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨，共計四種顏色混合疊加，形成所謂「全彩印刷」。)中都能正常使用。而今天我們所說是HSB（Hue：色相、Saturation：飽和度、Brightness：明度）色彩模式能通過直接調整」色相「、」飽和度「、」明度「 來調整顏色。

關於三屬性的相關圖示

為了讓大家直觀理解這三屬性，我做了相關的圖片，輔助大家進行理解。

1、如下圖所示，把飽和度最高的幾種顏色排列成色環，雖然他們的飽和度相同，但是按照色相不同，明度也會不同：

2、在色相、飽和度保持不變的情況下，我們來分別調整以下顏色的明亮，如下圖所示（明度從100%按照20%的數值逐漸遞減到20% ）：

註：不論任何顏色，只要明度降到最低都會變成黑色，而不同「無彩色」之間只有明度上的差異。

3、在 MAC 電腦中，具備可以直接編輯 HSB 顏色的調色板，能讓我們更容易的了解色相、飽和度和明度之間的關係，如下圖所示：

4、為了加深大家對色相環的理解，筆者做了一個小影片，希望對大家有所幫助：

在 CSS 中應用色彩三要素—— HSL

說了這麼多知識，我們如何在前段中進行應用呢？在 css3 中引入了一個表示色彩的新方法，例如 hsl(45,75%,50%)，類似我們今天講的色彩三要素，HSL顏色的寫法在現代瀏覽器中完全支援，你完全不用擔心，以前我們常用的十六進位表示方法 background-color：#21439c，或 rgb(10%,10%,50%) 這兩種方法，今天關於 HSL 這種新的寫法以還是值得你關注的：

• 從十六進位顏色轉換成 RGB 顏色很容易，但是轉換成 HSL 則不是這麼容易
• HSL不會提供很大的色域，它與十六進位和RGB顏色的範圍相同。

你也許會問例如 hsl(45,75%,50%) 這個括弧里，三個數值代表什麼意思，其實就是分別對應我剛才講過的色彩三屬性：色相、飽和度、明度。

首先我們來看下圖這個色相環，每種色相都是有其對應的度數值：

我們在來看hsl(45,75%,50%) 這裡的第一個屬性，45其實就是表示這個色環45度對應的位置，就是黃色這個範圍；75% 就是這個黃色對應的飽和程度，50%表示的就是對應的顏色明度，為了讓大家對飽和度這個值的理解，對 hsl(45,X%,50%) 這個寫法在保證明色相、明度數值一樣的情況下，調整飽和度的值，你將會看到如下的效果：

接下來我們在看一個例子，在保持色相、飽和度數值不變的情況下，我們來調整明度，例如 hsl(90,100%,x%)，你會看到如下效果：

在 CSS 實際場景中的運用

既然在 CSS3 中我們能夠運用類似 hsl(45,75%,50%) 這種方式來表示色彩的三要素，但是我們為什麼要使用這方式，而不用我們習慣的RGB寫法或十六進位寫法表示顏色呢？下面是我舉例幾個應用場景：

1、網頁背景色還能再「亮」些嗎？

有時候客戶或老闆，向你提出要求：「你的網頁背景色太暗，能否再亮些呢?「, 如果你使用的是 RGB 或 十六進位 表示顏色，如果要現場給他們調整來確認的話，估計有點麻煩。但是如果你是使用的 HSL 來表示顏色，那就恭喜你，你能很方便的現場進行調整，直到他們滿意為止，比如下面這個例子，老闆說道：「你能不能讓橙色背景更亮些呢？」

原先我們的背景顏色是這麼寫的：

然後我們就按照要求，調整最後一個明度屬性即可，是不是很簡單呢？

2、製作一個現代感十足的單選按鈕：

如下圖所示，我們要製作一個鏡像漸變的警示選擇按鈕，效果如下圖：

這裡我們主要用到了徑向漸變的屬性（radial-gradient）和 hsla 這個相結合，程式碼如下：

如果你不喜歡紅色，你可以很方便的進行調整為藍色，示例如下：

小節

今天的內容就分享到這裡，希望你能喜歡此文章的內容，關於顏色這三屬性我做下簡單的總結，色相指的是「紅色」等顏色，飽和度指的是顏色的飽和程度，明度是顏色的明亮程度。接下來我們又學習了，這些屬性在 CSS 中的應用，如果你的項目不考慮 IE8 及以下版本的 IE 瀏覽器，你可以放心使用，用起來會很方便許多，調整顏色 So easy！