[Tự học HTML] RGB vs RGBA Colors trong HTML

Cafedev chia sẻ về Giá trị màu RGB đại diện cho nguồn sáng ĐỎ(RED), XANH LÁ(GREEN) và LAM(BLUE).

Giá trị màu RGBA là phần mở rộng của RGB với kênh Alpha (độ mờ).

1. Giá trị màu RGB

Trong HTML, màu có thể được chỉ định làm giá trị RGB, sử dụng công thức này:

rgb(red,green, blue)

Mỗi tham số (đỏ, lục và lam) xác định cường độ của màu với giá trị từ 0 đến 255.

Điều này có nghĩa là có 256 x 256 x 256 = 16777216 màu có thể!

Ví dụ: rgb (255, 0, 0) được hiển thị màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất (255) và hai màu còn lại (xanh lục và xanh lam) được đặt thành 0.

Một ví dụ khác, rgb (0, 255, 0) được hiển thị là màu xanh lá cây, bởi vì màu xanh lá cây được đặt thành giá trị cao nhất của nó (255) và hai cái còn lại (đỏ và xanh) được đặt thành 0.

Để hiển thị màu đen, đặt tất cả các tham số màu thành 0, như thế này: rgb (0, 0, 0).

Để hiển thị màu trắng, đặt tất cả các tham số màu thành 255, như thế này: rgb (255, 255, 255).

Thử nghiệm bằng ví dụ các giá trị RGB bên dưới:

<div style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</div>
<div style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</div>
<div style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</div>
<div style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</div>
<div style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</div>
<div style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</div>

Copy and chạy code

2. Màu xám

Màu xám thường được xác định bằng các giá trị bằng nhau cho cả ba tham số:

3. Giá trị màu RGBA

Giá trị màu RGBA là phần mở rộng của giá trị màu RGB với kênh Alpha – chỉ định độ mờ cho màu.

Giá trị màu RGBA được chỉ định bằng công thức sau:

rgba(red, green, blue, alpha)

Tham số alpha là một số trong khoảng 0,0 (hoàn toàn trong suốt) và 1.0 (hoàn toàn minh bạch):

Thử nghiệm bằng cách trộn các màu giá trị RGBA ví dụ bên dưới:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->


<div style="background-color:rgba(255, 99, 71, 0);color:#555555;">rgba(255, 99, 71, 0)</div>
<div style="background-color:rgba(255, 99, 71, 0.2);color:#555555;">rgba(255, 99, 71, 0.2)</div>
<div style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</div>
<div style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</div>
<div style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</div>
<div style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</div>

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

• Group Facebook
• Fanpage
• Youtube
• Instagram
• Twitter
• Linkedin
• Pinterest
• Trang chủ

Chào thân ái và quyết thắng!