Giá trị màu RGBA, HSL và HSLA trong CSS3

RGBA là viết tắt của Red, Green, Blue và Alpha. Alpha là độ mờ của màu, số từ 0.0 đến 1.0, trong đó 1.0 là hoàn toàn không trong suốt.

Minh họa sự khác biệt độ mờ với tham số Alpha trong RGBA:

Ví dụ RGBA

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 { background-color: rgba(108, 111, 35, 0.6); }
#demo2 { background-color: rgba(108, 111, 35, 0.5); }
#demo3 { background-color: rgba(108, 111, 35, 0.4); }
#demo4 { background-color: rgba(108, 111, 35, 0.3); }
#demo5 { background-color: rgba(108, 111, 35, 0.2); }
#demo6 { background-color: rgba(108, 111, 35, 0.1); }
</style>
</head>
<body>
<h1>Các vận động viên Cricketer</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

Kết quả

HSL là viết tắt của Hue (Sắc độ), Saturation (Độ bão hòa) và Lightness (Độ sáng) khi thiết lập màu cho phần tử.

• Hue: 0 đến 360 (0/360=đỏ, 120=xanh lá, 240=xanh dương)
• Saturation & Lightness: Giá trị phần trăm

Ví dụ HSL

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 { background-color: hsl(150, 100%, 50%); }
#demo2 { background-color: hsl(150, 100%, 50%); }
#demo3 { background-color: hsl(140, 100%, 40%); }
#demo4 { background-color: hsl(120, 100%, 40%); }
#demo5 { background-color: hsl(120, 100%, 30%); }
#demo6 { background-color: rgba(108, 111, 35, 0.6); }
</style>
</head>
<body>
<h1>Các vận động viên Cricketer</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

Kết quả

HSLA thêm tham số Alpha (độ mờ) vào HSL. Alpha từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).

Ví dụ HSLA

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 { background-color: hsla(140, 100%, 50%, 0.8); }
#demo2 { background-color: hsla(130, 100%, 50%, 0.6); }
#demo3 { background-color: hsla(190, 100%, 50%, 0.4); }
#demo4 { background-color: hsla(170, 100%, 50%, 0.3); }
#demo5 { background-color: hsl(150, 100%, 60%); }
#demo6 { background-color: rgba(108, 111, 35, 0.6); }
</style>
</head>
<body>
<h1>Các vận động viên Cricketer</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

Kết quả

Tóm tắt: