Màu sắc trong HTML

Màu sắc làm trang web sinh động và nhận diện thương hiệu. Bài này giới thiệu các cách viết màu: tên màu, mã HEX, RGB, HSL và độ trong suốt.

25 phútCơ bản
Bạn sẽ học được
  • Đặt màu chữ, màu nền, màu viền
  • Viết màu bằng tên, HEX, RGB, HSL
  • Dùng độ trong suốt alpha
  • Chọn màu đủ tương phản
Thuật ngữ cần biết
HEX
Mã màu dạng #RRGGBB, ví dụ #2e7d32.
RGB
Đỏ, lục, lam từ 0 đến 255.
HSL
Sắc độ (0–360), độ bão hòa, độ sáng.
Alpha
Độ trong suốt từ 0 đến 1.

Khái niệm và lý thuyết

Màu được đặt bằng CSS qua thuộc tính color (chữ), background-color (nền), border (viền). Mọi màu trên màn hình là tổ hợp ba kênh đỏ – lục – lam. HSL dễ hiểu hơn với con người: giữ sắc độ, đổi độ sáng để có màu đậm nhạt cùng tông.

Màu chữ, nền, viền

<h3 style="background-color: DodgerBlue; color: white;">Nền xanh, chữ trắng</h3>
<p style="color: Tomato;">Chữ màu cà chua</p>
<p style="border: 2px solid MediumSeaGreen;">Đoạn văn có viền xanh</p>
Kết quả hiển thị

Nền xanh, chữ trắng

Chữ màu cà chua

Đoạn văn có viền xanh

Các cách viết màu

<p style="background: #2e7d32; color: #fff;">HEX: #2e7d32</p>
<p style="background: rgb(255, 152, 0);">RGB: rgb(255, 152, 0)</p>
<p style="background: hsl(200, 80%, 60%);">HSL: hsl(200, 80%, 60%)</p>
<p style="background: rgb(46 125 50 / 0.3);">Trong suốt 30%</p>
Kết quả hiển thị

HEX: #2e7d32

RGB: rgb(255, 152, 0)

HSL: hsl(200, 80%, 60%)

Trong suốt 30%

Cách viếtVí dụGhi chú
Tên màured, Tomato140 tên chuẩn
HEX#ff0000, #f00Phổ biến nhất
RGB/RGBArgb(255 0 0 / .5)Có độ trong suốt
HSLhsl(0 100% 50%)Dễ chỉnh đậm nhạt
Mẹo hay

Dùng công cụ chọn màu của DevTools (bấm ô màu trong ngăn Styles) hoặc Google “color picker” để lấy mã màu; kiểm tra tương phản tại webaim.org/resources/contrastchecker.

Lưu ý

Chữ xám nhạt trên nền trắng trông đẹp nhưng khó đọc. Tỉ lệ tương phản tối thiểu nên đạt 4.5:1 cho chữ thường.

Thực hành
  1. Tạo bảng 5 ô màu thương hiệu trường bạn dùng HEX.
  2. Làm 5 sắc độ đậm nhạt của cùng một màu bằng HSL.
  3. Tạo hộp thông báo nền vàng nhạt trong suốt, viền cam.
Tóm tắt bài học
  • color, background-color, border đặt màu.
  • Viết màu bằng tên, HEX, RGB, HSL.
  • Alpha tạo trong suốt; chú ý tương phản.