整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
站不可能是單色的，在一定程度上，用戶的體驗度就是通過色彩搭配的舒適度來決定的，所以網頁設計中的配色很重要。接下來小編就和大家一起來看看網頁設計中的基礎配色知識。
我們所有網頁上顏色，在HTML下看到的是以顏色英文單詞或者十六進制的表示方法。不同的顏色有著不同的含義，給人各種豐富的感覺和聯想。
紅色象征著熱情、奔放、喜悅、莊嚴；黃色象征著高貴、富有、燦爛、活潑；黑色象征著嚴肅、夜晚、沉著；白色象征著純潔、簡單、潔凈；藍色象征著天空、清爽、科技；綠色象征著植物、生命、生機；灰色象征著莊重、沉穩；紫色象征著浪漫、富貴；棕色象征著地、厚樸等等。
當然了，不同的網站有著自己不同的風格，也有著自己不同的顏色。網站使用顏色大概分為幾種類型：
1、 公司色
在現在企業中，公司的CI形象顯得尤其重要，每一個公司的CI設計必然要有標準的顏色。比如新浪網的主色調是一種介于淺黃和深黃之間的顏色，同時形象宣傳、海報、廣告使用的顏色都和網站的顏色一致。
2、 風格色
許多網站使用顏色秉承的是公司的風格。比如海爾使用的顏色是一種中性的綠色，即充滿朝氣有不失自己的創新精神。女性網站使用粉紅色的較多，大公司使用藍色的較多……這些都是在突出自己的風格。
3、 習慣色
這些網站的顏色使用很大一部分是憑自己的個人愛好，以個人網站較多使用，比如自己喜歡紅色、紫色、黑色等，在做網站的時候就傾向于這種顏色。每一個人都有自己喜歡的顏色，因此這種類型稱為習慣色。
網頁設計的顏色搭配需要在實踐中不斷的摸索和不斷的創新，認真學習別人的先進方法和經驗，可以快速的提高我們的制作水平，所以在平時的工作之余，我們還是要多瀏覽別人的網站，學習別人在色彩搭配中的技巧，讓自己慢慢的成長起來。
蘭州中天立網絡信息技術有限公司致力于網絡營銷、網站建設、域名注冊、微信公眾號建設、及托管服務等，我們的理念是用公平合理的價格為需要網絡營銷的客戶提供有效果的服務，努力做到讓客戶滿意、讓自己滿意。
蘭州網絡技術,蘭州網站建設, 蘭州中天立網絡信息技術有限公司
聯系人：劉經理
手機: 13909485418
座機：0931-4100819
Q Q：3040002358 2289893340
郵箱：lanzhouzhongtianli@163.com
地址：蘭州市城關區西關什字臨夏路137號靜安大廈1003室
雙標簽：就是成對出現的，類似于這種 <html> </html>
單標簽：就是可以單個使用的，類似于 <br> 換行標簽 或 <hr>水平線標簽。
標簽的屬性是用來定義文字或字符的 顏色、寬高、粗細、大小、等，這個是標簽屬性的作用。
1、每一個標簽都有自己的屬性，單標簽和雙標簽都有。
2、一個標簽可以有多個屬性。
3、每個屬性都有對應的值，值要用單或雙引號引起來。
4、多個屬性之間使用空格隔開。
5、屬性沒有順序之分。
6、字體屬性值，必須是系統可以識別的字體，一般為系統自帶字體。
7、HTML5 中 font 屬性已經棄用。
源代碼：↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--網頁抬頭-->
<title>中央氣象局</title>
</head>
<body>
<!--水平線的寬度是500像素，這個width就是標簽屬性-->
<hr width="500">
<!--下面這個是多個標簽屬性，多個屬性之間用空格隔開-->
<font color="red" face="黑體" size="7">標簽屬性</font>
</body>
</html>
文翻譯自 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）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
