HTML RGB and RGBA Colors - Các màu RGB và RGBA trong HTML
Một giá trị màu RBG đại diện cho nguồn sáng RED(đỏ), GREEN(xanh), và BLUE(xanh lam).
Một giá trị RBGA là một mở rộng của RGB với một kênh Alpha (độ mờ đục).
Các giá trị màu RBG
Trong HTML, một màu có thể được xác định như một giá trị RGB, sử dụng công thức sau:
rgb(red, green, blue)
Mỗi tham số (red, green, và blue) định nghĩa cường độ của màu giữa 0 và 255.
Điều này làm 256 x 256 x 256 = 16777216 là một màu khả thi!
Ví dụ, rgb(255,0,0) được hiển thị là màu đỏ(red), bởi vì red được đặt tới giá trị cao nhất của nó (255) và các màu còn lại được đặt về 0.
Để hiển thị màu đen, đặt toàn bộ các tham số thành 0, như thế này: rgb(0, 0, 0).
Để hiển thị màu trắng, đặt toàn bộ các tham số thành 255, như thế này:
rgb(255, 255, 255).
Thử nghiệm bằng cách trộn các giá trị RGB như bên dưới:
rgb(163, 99, 71)
RED
GREEN
BLUE
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>
<p>In HTML, you can specify colors using RGB values.</p>
</body>
</html>
Các sắc thái của màu xám thường được xác định bằng cách dùng các giá trị bằng nhau cho cả ba nguồn sáng:
ví dụ
Các giá trị màu RGBA
Các giá trị màu RGBA là một mở rộng của các giá trị màu RGB với một kênh alpha - trong đó chỉ định độ mờ đục cho một màu.
Một giá trị màu RGBA được xác định với:
rgba(red, green, blue, alpha)
Tham số alpha là một số giữa 0.0 (trong suốt hoàn toàn) và 1.0 (không trong suốt chút nào):
Thử nghiệm bằng cách trộn các giá trị RGBA như bên dưới:
rgba(255, 99, 71, 0.5)
RED
GREEN
BLUE
ALPHA
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>
<p>You can make transparent colors by using the RGBA color value.</p>
</body>
</html>
Tags: