CSS中的顏色深淺搭配是設計中一個極為關鍵的部分。正確的配色方案能夠有效地吸引用戶的注意力并提升用戶體驗。以下是一些重要的顏色搭配標準。

/*深色與淺色分離*/
.container {
background-color: #3c3c3c;
color: #ffffff;
}
/*互補搭配*/
.btn-success {
background-color: #1abc9c;
color: #ffffff;
}
/*類比搭配*/
.header {
background-color: #f1c40f;
color: #ffffff;
}
/*三色搭配*/
.footer {
background: linear-gradient(to right, #c0392b , #2980b9, #8e44ad);
}
/*透明度*/
.box {
background: rgba(255, 255, 255, 0.5);
}
/*反色*/
.logo {
background-color: #ffffff;
color: #000000;
}

深色與淺色分離是一種簡單而優美的配色方案。其基本原則是以深色作為背景，而使用淺色作為文本、圖片或其他元素的顏色。這使得文本在深色背景上更加易于讀取。

互補搭配是指使用彼此相反的顏色。例如綠色和紅色，黃色和紫色等等。這種搭配方案常常被用于按鈕和鏈接，在設計中能夠顯眼地突出這些元素。

類比搭配是指使用相鄰的顏色。在調色板中，相鄰的顏色具有相似的色調。這種配色方案經常被用于頁面頭部區域的設計上。比如灰色和淡黃色、淡綠色和灰藍色等等。

三色搭配是指使用三種不同的顏色進行組合。選擇這種方法需要非常小心，因為三種顏色的搭配容易與其他元素產生沖突。比較好地應用在頁面底部，可以做一些巧妙的圖案設計。

在透明度方面，我們可以使用rgba函數來創建一個半透明的背景。這種方法在選擇配色時需要格外小心，只在需要顯示的元素周圍使用半透明背景能夠使其更容易被看清。

反色是指使用互補顏色，例如黑色和白色或紅色和綠色。這種配色方案通常被用于標識或標志設計中。

這里僅僅列出了一些 CSS 中顏色搭配的基本方法，當然還有其他的一些方案。在實際設計中，選用什么樣的方案，需要結合具體的設計需求和場景來進行決定。