CSS顏色

學習如何在CSS中使用顏色

默認情況下，網頁瀏覽器在使用顏色方面的渲染效果相當低劣。

我們有白色背景、黑色文字和藍色連結。這只是這樣而已。

幸運的是，CSS給了我們在設計中添加顏色的能力。

我們有以下屬性：

所有這些屬性都接受一個顏色值，可以以不同的形式呈現。

命名顏色

首先，我們有CSS關鍵字定義的顏色。CSS一開始只有16個，但如今有大量的顏色名稱：

[中文翻譯略]

除了“tranparent”和“currentColor”以外，它們都是CSS顏色模組4的一部分，它們是大小寫不敏感的。

維基百科有一個很好的表格可以根據名稱選擇完美的顏色。

命名顏色並不是唯一的選擇。

您可以使用“rgb()”函數根據RGB表示法計算顏色，根據其紅綠藍部分設置顏色。範圍從0到255：

p {
    color: rgb(255,255,255); /* white */
    background-color: rgb(0,0,0); /* black */
}

“rgba()”讓您可以添加alpha通道以輸入透明部分。這可以是0到1的數字：

1
2
3

p {
    background-color: rgba(0,0,0,0.5);
}

另一個選擇是使用十六進位表示法表示顏色的RGB部分，它由3個塊組成。

黑色，即“rgb(0,0,0)”，可以表示為“#000000”或“#000”（如果兩個數字相等，我們可以將2個數字簡化為1個）。

白色，即“rgb(255,255,255)”，可以表示為“#ffffff”或“#fff”。

十六進位表示法允許我們使用2位數來表示0到255之間的數字，因為它們可以從0到15（f）。

通過在末尾添加1或2個更多的數字，我們可以添加alpha通道，例如“#00000033”。並非所有瀏覽器都支持簡短的表示法，因此請使用全部6個數字來表示RGB部分。

這是CSS的一個相對較新的添加。

HSL = 色相飽和度明度。

在這種表示法中，黑色為“hsl(0, 0%, 0%)”，白色為“hsl(0, 0%, 100%)”。

如果您對HSL比RGB更熟悉，由於您的過去知識，您肯定可以使用它。

您還可以使用“hsla()”將alpha通道添加到混合中，再次是0到1之間的數字：hsl(0, 0%, 0%, 0.5)

tags: [“CSS”, “Colors”, “RGB”, “HEX”, “HSL”, “CSS Color Names”]