Mã màu web có nhiều cách thực hiện, hiệu quả khác nhau. Bài viết giới thiệu 4 phương pháp phổ biến để định nghĩa màu trong HTML/CSS.
Mã màu không phải phẫu thuật não. 4 tùy chọn dưới đây giúp bạn tạo giao diện đầy màu sắc, nổi bật hơn đối thủ.
1. Sử Dụng Giá Trị HSL
HSL (Hue - Sắc độ, Saturation - Độ bão hòa, Lightness - Độ sáng) được trình duyệt hiện đại hỗ trợ tốt. Cú pháp:
<body style="background-color:hsl(0, 0%, 96%);"> </body>
Điều khiển độ trong suốt bằng HSLA (thêm alpha 0-1):
<body style="background-color:hsla(0, 0%, 96%, 0.8);"> </body>
2. Sử Dụng Giá Trị RGB
RGB (Red, Green, Blue) phổ biến hơn, tương thích trình duyệt cũ và mới. Cú pháp:
<body style="background-color:rgb(102, 0, 51);"> </body>
Độ trong suốt với RGBA (thêm alpha 0-1):
<body style="background-color:rgba(102, 0, 51, 0.2);"> </body>
3. Mã Hex (Hex Codes)
Cách cổ điển, được hỗ trợ rộng rãi, gọn gàng (một giá trị duy nhất). Ví dụ:
<body style="background-color:#228B22;"> </body>
Lưu ý: hành vi màu hex phụ thuộc vào bối cảnh (inline hay block-level).
4. Tên Màu (Color Names)
HTML hỗ trợ 140 tên màu chuẩn. Nhanh chóng, không cần nhớ mã:
<body style="background-color:brown;"> </body>
Phù hợp khi cần đổi màu gấp, không phức tạp.
Kết Luận
4 phương pháp: HSL, RGB, Hex, Tên màu. Tùy nhu cầu (độ trong suốt, tương thích, tốc độ) mà chọn. Đừng lo lắng về màu sắc, hãy dùng hướng dẫn này để làm đẹp website ngay!