HTML - Màu RGB và RGBA

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ khám phá thế giới đầy màu sắc của các màu RGB và RGBA trong HTML. Là người dạy máy tính ở khu phố của bạn, tôi rất vui mừng được hướng dẫn các bạn trong hành trình đầy màu sắc này. Hãy cùng nhau vẽ lên mạng internet với kiến thức mới học được của chúng ta!

HTML - RGB

Giá trị màu RGB

RGB là viết tắt của Đỏ, Xanh lá cây và Xanh lam. Nó giống như có ba ống sơn kỳ diệu, khi trộn lại với nhau, có thể tạo ra bất kỳ màu nào bạn có thể tưởng tượng trên màn hình máy tính. Mỗi màu được đại diện bởi một số từ 0 đến 255, trong đó 0 có nghĩa là không có màu đó và 255 có nghĩa là lượng màu tối đa.

Dưới đây là cách chúng ta sử dụng RGB trong HTML:

<p style="color: rgb(255, 0, 0);">This text is red!</p>
<p style="color: rgb(0, 255, 0);">This text is green!</p>
<p style="color: rgb(0, 0, 255);">This text is blue!</p>

Trong ví dụ này:

rgb(255, 0, 0) cho chúng ta màu đỏ thuần khiết
rgb(0, 255, 0) cho chúng ta màu xanh lá cây thuần khiết
rgb(0, 0, 255) cho chúng ta màu xanh lam thuần khiết

Nhưng điều thực sự kỳ diệu xảy ra khi chúng ta trộn các giá trị này:

<p style="color: rgb(128, 0, 128);">This text is purple!</p>
<p style="color: rgb(255, 165, 0);">This text is orange!</p>
<p style="color: rgb(0, 128, 128);">This text is teal!</p>

Có phải điều này không thực sự thú vị, rằng chúng ta có thể tạo ra các màu khác nhau chỉ bằng cách thay đổi các số? Đó là như một nghệ sĩ số!

Giá trị màu RGBA

Bây giờ, hãy thêm một chút bí ẩn vào màu sắc của chúng ta với RGBA. Chữ 'A' đại diện cho Alpha, điều khiển độ trong suốt của màu của chúng ta. Nó giống như có một ống sơn thứ tư có thể làm cho màu sắc của chúng ta trong suốt!

Giá trị Alpha dao động từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt).

Hãy nhìn xem nó hoạt động như thế nào:

<div style="background-color: rgba(255, 0, 0, 0.5); padding: 20px;">
This box has a semi-transparent red background!
</div>
<div style="background-color: rgba(0, 0, 255, 0.3); padding: 20px;">
This box has a more transparent blue background!
</div>

Trong các ví dụ này:

rgba(255, 0, 0, 0.5) cho chúng ta một màu đỏ bán trong suốt 50%
rgba(0, 0, 255, 0.3) cho chúng ta một màu xanh lam bán trong suốt 70%

Giá trị Alpha rất hữu ích cho việc tạo ra các lớp phủ, nền mờ và các hiệu ứng tuyệt vời khác!

So sánh màu RGB và RGBA

Hãy đặt RGB và RGBA bên cạnh nhau để xem sự khác biệt:

<table style="width:100%; border-collapse: collapse;">
<tr>
<th style="border: 1px solid black; padding: 10px;">RGB</th>
<th style="border: 1px solid black; padding: 10px;">RGBA</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 10px; background-color: rgb(255, 0, 0);">Red</td>
<td style="border: 1px solid black; padding: 10px; background-color: rgba(255, 0, 0, 0.5);">Semi-transparent Red</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 10px; background-color: rgb(0, 255, 0);">Green</td>
<td style="border: 1px solid black; padding: 10px; background-color: rgba(0, 255, 0, 0.5);">Semi-transparent Green</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 10px; background-color: rgb(0, 0, 255);">Blue</td>
<td style="border: 1px solid black; padding: 10px; background-color: rgba(0, 0, 255, 0.5);">Semi-transparent Blue</td>
</tr>
</table>

Như bạn có thể thấy, RGBA cho phép chúng ta tạo ra các phiên bản bán trong suốt của màu sắc, thêm chiều sâu và chiều cao cho thiết kế của chúng ta.

Ví dụ về màu RGB và RGBA trong HTML

Bây giờ, hãy cùng nhau vui chơi với một dự án nhỏ! Chúng ta sẽ tạo một bảng "bảng màu" sử dụng cả RGB và RGBA:

<div style="display: flex; flex-wrap: wrap;">
<div style="width: 100px; height: 100px; background-color: rgb(255, 105, 180); margin: 10px;">
Hot Pink
</div>
<div style="width: 100px; height: 100px; background-color: rgb(64, 224, 208); margin: 10px;">
Turquoise
</div>
<div style="width: 100px; height: 100px; background-color: rgb(255, 215, 0); margin: 10px;">
Gold
</div>
<div style="width: 100px; height: 100px; background-color: rgba(128, 0, 128, 0.5); margin: 10px;">
Semi-transparent Purple
</div>
<div style="width: 100px; height: 100px; background-color: rgba(0, 128, 0, 0.7); margin: 10px;">
Semi-transparent Green
</div>
</div>

Trong ví dụ này, chúng ta đã tạo một hộp flex với năm hộp màu. Ba hộp đầu tiên sử dụng màu RGB, trong khi hai hộp cuối cùng sử dụng RGBA để tạo hiệu ứng bán trong suốt.

Nhớ rằng, chìa khóa để thành thạo RGB và RGBA là thực hành và thử nghiệm. Đừng ngần ngại chơi với các giá trị khác nhau và xem会发生什么!

Dưới đây là bảng các giá trị màu RGB phổ biến:

Tên màu	Giá trị RGB
Red	rgb(255, 0, 0)
Green	rgb(0, 255, 0)
Blue	rgb(0, 0, 255)
Yellow	rgb(255, 255, 0)
Cyan	rgb(0, 255, 255)
Magenta	rgb(255, 0, 255)
White	rgb(255, 255, 255)
Black	rgb(0, 0, 0)

Và đó là hành trình đầy màu sắc của chúng ta qua RGB và RGBA trong HTML! Nhớ rằng, mỗi nhà thiết kế web vĩ đại đều bắt đầu từ nơi bạn đang đứng. Hãy tiếp tục thực hành, tiếp tục thử nghiệm, và sớm bạn sẽ vẽ lên mạng internet với màu sắc như một chuyên gia. Chúc các bạn may mắn, những nghệ sĩ số tương lai!

Credits: Image by storyset