Định nghĩa màu sắc trong CSS3: RGB, RGBA, HSL, HSLA, Hex

Để định nghĩa màu trong CSS3, sử dụng RGB, RGBA, HSL, HSLA. Cũng có thể dùng tên màu và giá trị hexadecimal.

RGBA - Red, Green, Blue, Alpha

Alpha là độ mờ: 0.0 (trong suốt) đến 1.0 (đặc).

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 - Hue, Saturation, Lightness

• Hue: 0-360 (0/360=đỏ, 120=xanh lá, 240=xanh dương)
• Saturation: 0%-100% (0% = xám)
• Lightness: 0%-100% (0% = đen, 100% = trắng, 50% = bình thường)

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 - HSL + Alpha

Thêm Alpha (0.0-1.0) cho độ 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ả

Màu Hexadecimal

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-align: justify;
  text-justify: inter-word;
  color: white;
  background-color: #B13838;
}
</style>
</head>
<body>
<h2>Tiêu đề Demo</h2>
<div>Đây là văn bản demo...</div>
</body>
</html>

Kết quả

Tóm tắt: