MÀU RGB VÀ RGBA TRONG HTML
Giá trị màu RGB trong HTML có thể được chỉ định theo công thức rgb (red, green, blue),...
Giá trị màu RGBA là phần mở rộng của RGB với kênh Alpha (độ mờ của màu).
❶ Giá trị màu RGB
rgb (red, green, blue)
Mỗi tham số (red, green, blue) xác định cường độ của màu với giá trị từ 0 đến 255.
Có nghĩa là có 256 x 256 x 256 = 16777216 màu
Ví dụ rgb (255, 0, 0) được hiển thị là màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất của nó (255) và hai giá trị còn lại (xanh lục và xanh lam) được đặt thành 0.
Ví dụ rgb (0, 255, 0) được hiển thị dưới dạng màu xanh lá cây, vì màu xanh lá cây được đặt thành giá trị cao nhất (255) và hai màu còn lại (đỏ và xanh lam) được đặt thành 0.
Để hiển thị màu đen, hãy đặt tất cả các thông số màu thành 0, như sau: rgb (0, 0, 0).
Để hiển thị màu trắng, hãy đặt tất cả các tham số màu thành 255, như sau: rgb (255, 255, 255).
Bạn hãy thử bằng cách trộn các giá trị màu RGB như: rgb (255, 99, 71)
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</body>
</html>
Kết quả
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
❷ Sắc thái của màu xám
Các sắc thái của màu xám thường được xác định bằng cách sử dụng các giá trị bằng nhau cho cả ba tham số:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
</body>
</html>
Kết quả
rgb(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)
❸ Giá trị màu RGBA
Giá trị màu RGBA là phần mở rộng của các giá trị màu RGB với kênh Alpha - Chỉ định độ mờ cho một màu.
Giá trị màu RGBA được chỉ định bằng:
rgba ( đỏ, lục , lam, alpha )
Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (không trong suốt):
Bạn hãy làm thử bằng cách trộn các giá trị RGBA như sau
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
</body>
</html>
Kết quả
rgba (255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
✍️ Cảm ơn bạn đã theo dõi bài viết!
