整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
背景色寫法：background-color:顏色;
background-color:顏色;為窗口設置背景色:
body {
background-color: chartreuse;
}效果：
文翻譯自 Color Formats in CSS，作者：Joshwcomeau。 略有刪改
CSS 中的顏色格式可以采用不同的表示方式，包括常用的十六進制、RGB、RGBA、HSL 和 HSLA 等格式。十六進制是最常用的格式，使用 6 個十六進制數字來表示顏色，例如 #FF0000 表示紅色；RGB 格式使用紅、綠、藍三個顏色通道的數值來表示顏色，例如 rgb(255,0,0) 也表示紅色；RGBA 格式在 RGB 的基礎上增加了一個透明度通道，用于控制顏色的不透明度；HSL 格式利用色相、飽和度和亮度三個參數來表示顏色，例如 hsl(0,100%,50%) 表示紅色；而 HSLA 格式則在 HSL 的基礎上增加了一個透明度通道。選擇和使用這些不同的顏色格式時，需要考慮實際需求并進行決策。
對于不同的顏色格式，它們之間存在一些重要的區別。本文將帶您深入了解這些選項，包括它們的工作原理、如何解析它們以及如何靈活應用，以下是原文翻譯。
CSS有很多不同的顏色格式：hex codes，rgb（），hsl（），lch（），等等！
我們應該用哪一個？這似乎是一個無關緊要的決定，但它們之間卻有一些非常重要的區別。而且，老實說我認為我們大多數人都在優先考慮使用錯誤的方式。
在本教程中，我將帶您瀏覽不同的選項。我們將看到它們是如何工作的，以及我們如何利用它們為我們更好的服務。后面我將向您展示現代CSS如何讓我們在選擇正確的顏色格式時進行動態調整。
這并不是一個真正的顏色格式，但它是一個很好的開始！
HTML有140種命名顏色。這些是特殊的關鍵字值，如dodgerblue、hotpink和tomato。
開發人員Anthony Lieuallen創建了這個簡潔的演示，在一個圓圈中顯示了所有140種命名的Web顏色：
由Anthony Lieuallen創作，MIT許可
當你需要一個占位符顏色時，命名式顏色名是很好的。例如，如果您正在構建原型并需要臨時值，或者如果您正在編寫教育內容。在可讀性方面，沒有什么比color: red更好。
這可能是不言而喻的，實際開發中140種顏色是不夠的，通常不會使用命名的顏色在生產環境中。
看看這兩種命名的顏色：
“darkgray”實際上是比“gray”更淺的顏色？ 這是因為140種命名的Web顏色來自不同的地方，包括HTML4規范，X11 Unix窗口系統等。這是一個不同調色板的大雜燴，沒有一個好的規范約束。
這是我們的第一個“真實的”顏色格式。以下是我們如何使用它：
color: rgb(255 0 0);
對應顯示的樣式如下：
像大多數顏色格式一樣，rgb是一個縮寫。它代表綠色藍。
在我們今天要學習的所有顏色格式中，rgb是最不抽象的。你的電腦/手機顯示屏實際上只是數百萬個微小的紅色、綠色和藍色LED的集合，它們被組裝成像素。因此，rgb顏色格式允許我們直接調整這些燈光的亮度。
每個值（紅色、綠色、藍色）被稱為通道。每個通道從0到255。通過將這些通道以不同的量混合，我們可以創造超過1600萬種不同的顏色。
RGB顏色的巧妙之處在于它是基于光的物理學。我們可以混合紅色、綠色和藍色光來創造任何顏色。把它們調到255，我們得到白色。把它們都設為0，剩下黑色。
rgb color格式還允許我們為alpha通道指定第四個可選值，以控制透明度：
background: rgb(255 0 0 / 0.5);
以上代碼設置了紅色50%的透明度，最終的樣式的如下：
Alpha通道的范圍從0（完全不可見）到1（完全不透明）。介于兩者之間的任何東西都會產生半透明的顏色。
這可能是網絡上最常用的顏色格式。它看起來像這樣：
color: #FF0000;
它的工作原理如下：6位十六進制碼包含三個2位值，每個通道一個值（紅/綠色/藍）。它不使用10位十進制系統，而是使用16位十六進制系統。
以下圖示可以更加了解十六進制代碼的工作原理（原文可拖動滑塊實時更新顏色）：
基本上，十六進制代碼與RGB值相同。在這兩種情況下，我們都為紅色、綠色和藍色提供了一個值。 background: #FFFF0080; 在十進制系統中，一個兩位數的值可以包含100個可能的值（10 × 10）。如果是十六進制，則總數為256（16 × 16）。因此，它實際上就像rgb()一樣，我們為每個R/G/B通道指定一個介于0和255之間的值。
還有個有趣的事實如果我們想包含一個alpha通道，我們可以傳遞一個八位十六進制代碼：
background: #FFFF0080;
代碼效果圖：
在本例中，我們指定80作為alpha通道，相當于十進制系統中的128。因此，這個盒子是50%不透明的。
8位十六進制代碼在現代瀏覽器中得到了廣泛應用，全球支持率達到96％，IE瀏覽器不支持。
到目前為止，我們看到的兩種顏色格式都是基于相同基本思想的不同“包裝器”：傳遞紅/綠色/藍通道的特定值。
但這并不是思考顏色的唯一方式！讓我們來看看一個完全不同的顏色格式：HSL。
讓我們從顏色選擇器開始：
這個顏色選擇器可能感覺更熟悉。它類似于圖形設計軟件中使用的圖形設計軟件，如Figma或Photoshop。
此顏色格式采用3種不同的值：
這往往是一個非常直觀的方式來思考顏色。我們沒有直接控制R/G/B光值，而是轉向了更高層次的抽象，這與人類通常對顏色的看法更接近。
css中使用hsl：
background: hsl(0deg 100% 50% / 0.5);
所以，我們到目前為止看到的所有顏色格式都已經存在了很多很多年。HSL甚至早在Internet Explorer 9（2011年發布）中就支持了！
最近我們在CSS中得到了一些新的顏色格式。它們很有吸引力。讓我們談談他們。
這篇文章是關于顏色格式，我們用來指定顏色的語法。到目前為止，我們看到的所有真彩色格式 rgb()、十六進制代碼和hsl() 都是由“標準RGB顏色空間”（通常縮寫為sRGB）所約束的。
sRGB中有數百萬種可能的顏色，但它并沒有接近捕捉人眼能夠看到的全部顏色范圍。
請看下面兩個紅色方塊：
左邊的顏色是rgb(255 0 0)。它是sRGB顏色空間中最紅的紅色。然而，在右邊，我使用的是P3顏色空間。更紅了！（這兩個方塊看起來很有可能是一樣的。如果是這樣，這可能意味著您的顯示器或瀏覽器不支持寬色域顏色格式）
P3擴展了標準的sRGB色彩空間，使我們能夠獲得更明亮，更鮮艷的色彩。如下圖所示：
不幸的是，在CSS中，顏色空間與顏色格式相關聯。如果我選擇使用rgb()語法（或十六進制代碼，或hsl()），我只能在sRGB顏色空間中指定顏色。
因此，如果我們想使用P3顏色，我們需要使用不同的顏色格式。語法如下：
.box {
background: color(display-p3 1 0 0);
}
color()函數接受一個顏色空間，然后是一組R/G/B值。它使用0到1的十進制值，而不是從0到255。但目前只有主流的瀏覽器對color()函數支持。
我們使用HSL顏色格式創建以下兩種顏色：
正如我們所看到的，這兩種顏色都具有相同的50%的“亮度”值。但它們感覺不一樣輕，黃色的感覺比藍色的輕多了！
HSL顏色格式是在數學/物理之后建模的。它沒有考慮到人類的感知。而且，事實證明，人類并不能非常準確地感知顏色！
LCH是一種顏色格式，旨在對人類感知一致。兩種顏色具有同等的“亮度”值應該感覺同樣輕！
例如，在LCH中，黃色和藍色在55%亮度下的樣子：
LCH代表“亮度 色度 色調”。“色度”或多或少是“飽和度”的同義詞。它在概念上與HSL非常相似，但有兩個很大的區別：
與我們看到的其他顏色格式不同，LCH不綁定到sRGB。它甚至沒有綁定到P3！它通過不具有色度上限來實現這一點。
在HSL中，飽和度范圍從0%（無飽和）到100%（完全飽和）。這是可能的，因為我們知道我們談論的是sRGB顏色空間，一個有限的顏色調色板。
但是LCH并沒有鏈接到特定的顏色空間，所以我們不知道飽和度上限在哪里。它不是靜態的：隨著顯示技術的不斷改進，我們可以預期顯示器將達到越來越寬的色域。LCH將自動能夠通過調高色度來參考這些擴展的顏色。
background: lch(50% 120 20);
瀏覽器支持情況：
文章的主要內容已經結束了，我們看到了許多不同的顏色格式。那么應該在工作中真正使用哪一個呢？
我建議使用HSL。至少在LCH獲得廣泛的瀏覽器支持之前。
我知道很多開發者喜歡使用十六進制代碼。它們簡潔，易于在設計軟件和我們的代碼之間復制/粘貼，并且通用。但這些好處也伴隨著一些相當大的權衡。
即使你對十六進制符號很熟悉，它仍然很難直觀破譯。問：#0F52B7是什么顏色？#F3E248怎么樣？
HSL的奇妙之處在于它是直觀的。它與我們對顏色的看法密切相關。通過一些練習，當您看到hsl()值時，您將能夠立即描繪任何顏色。
這意味著我們可以很容易地調整值，在運行中。我甚至不需要打開一個顏色選擇器。如果我希望我的顏色稍微暗一點，我可以減少亮度百分比。如果我想讓它更生動和激烈，我可以調高飽和度。
當我們將HSL與現代CSS特性相結合時，它會變得更加強大。
有興趣的可以看看原文，可以在線體驗不同顏色格式是如何工作的。看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～
專注前端開發，分享前端相關技術干貨，公眾號：南城大前端（ID: nanchengfe）
成為一個好的設計師，或者一個很會穿搭的人。在設計作品或是穿搭衣物時，決不能配錯顏色。
如果你天生對色彩不敏感，一不小心就會弄出「大紅配大綠」。那么，知曉程序今天推薦的小程序，你可得要收到好了。
「Color 顏值」，是一款專注幫你解決配色問題的小程序，它基于色輪配色原理，讓你輕輕松松就能搭配出大師級別的色彩。
關注「知曉程序」公眾號，在后臺回復「0109」，一張圖教你玩轉小程序。
這個小程序共提供了四大實用功能：配色廣場、顏色轉換、配色工具、Web 顏色。
我們先去「配色廣場」看看。
自己不懂配色，就借鑒經典的配色方案吧。
在「配色廣場」中，就提供了許多「Adobe Color 配色方案」，一頁 5 組，一組 5 種顏色。頁面底部有個「Surprise me」的按鍵，點擊它，就切換另外 5 組。
如果你有一個確定的主色調，就可以在這里挑選可與之搭配的顏色。
看見喜歡的方案，點進去，就能獲得這個色彩方案的「配色詳情」，詳細展示了每一種顏色的 RGB 和 HSB 色值。
實在喜歡，還可以點擊底部的「收藏」，并給它起一個「名稱」便于日后查閱。
不過，「我的收藏」的位置比較隱蔽，找不到它的朋友們這里要認真看咯。
回到配色廣場的主頁面，注意到頁面上方的「下拉小箭頭」，點擊它會彈出選擇菜單，選中「我的收藏」并確定，你收藏下來的配色方案都在這里。
每種顏色都有對應的色值，據說設計師確定顏色的方法，是先估計色值，再根據色彩的濃度、亮度等等調出最滿意的顏色。
「顏色轉換」就是用于調整色值的，我們來看看，具體怎么用？
首先，你要確定一種顏色模式，頁面上方的「模式選擇」有 RGB、CMYK、LAB、HSB 四種可選。選好模式，每一個屬性有相應的滑塊，滑動它就可以調整色值了。
頁面中間的「預覽」塊可以實時顯示你調出來的顏色，同時還顯示其「十六進制顏色碼」，以及這個顏色在四種不同模式下對應的色值。
在「配色廣場」中，小程序推薦的是 Adobe Color 配色方案。
而接下來要介紹的「配色工具」，則提供了基于 6 種顏色關系的配色算法，分別是類比色／相似色、互補色、分裂補色、單色、漸變、二次色配比。
如果你對這幾種配色算法沒有概念，也沒關系，在「關于 Color 顏值」中可以找到詳細的介紹，順便還能漲漲知識呢。
每一種配色算法都需要一個「主色」或「基準色」，這個由你自己來調它的 RGB 值以及飽和度、亮度，然后小程序會根據你選擇的配色算法推薦一組 4 種顏色。
如果實在不知如何確定「主色」或「基準色」，那就點擊底部的「隨機」，你可以一直「隨機」，直到滿意。
好不容易找到一組滿意的，千萬別忘了「收藏」，收藏方法跟上面所述一樣，這個收藏夾還可以作為你的顏色管理利器哦。
如果你不需要考慮配色原理，還有一個選項「 I am Feeling Lucky 」，它會隨機挑選一種算法，并根據其原理為你推薦一組 5 種顏色的配色方案。
這個功能方便了外行人搭配出和諧的顏色，也給內行人帶來了色彩靈感。
現在是互聯網時代，不管是美術設計，還是 UI 設計，你都需要對「Web 顏色」有一定的了解。
這個小程序從「CSS 顏色值」、「Web 安全色」以及「Gray 灰度值」三個方面，列舉了 Web 標準規范中 HTML 和 CSS 定義的標準色和安全色。
如果你還在為顏色搭配而頭疼，如果你需要一個顏色管理工具，如果你喜歡和諧美麗的色彩，不妨打開「Color 顏值」。
誰不喜歡和諧美麗的色彩呢？還不快來！
「Color 顏值」小程序使用鏈接 https://minapp.com/miniapp/3775/
關注「知曉程序」公眾號，在后臺回復「藏寶圖」，獲取最全最好用的小程序名單。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
