Bài 6. Màu sắc, nền và gradient

Bài này đi sâu vào màu (tên, HEX, RGB, HSL, OKLCH, độ trong suốt), nền (màu, ảnh, kích thước, vị trí, lặp, nhiều lớp nền) và gradient tuyến tính, tỏa tròn, hình nón.

45 phútCơ bản
Bạn sẽ học được
  • Viết màu bằng HEX, RGB, HSL, OKLCH, có alpha
  • Đặt ảnh nền với background-size, position, repeat
  • Tạo gradient linear, radial, conic
  • Chọn màu đủ tương phản

Một số khái niệm

Hệ màu HSL (sắc độ, bão hòa, độ sáng) giúp tạo các tông đậm nhạt cùng màu dễ dàng; OKLCH (hỗ trợ ở trình duyệt hiện đại) cho độ sáng cảm nhận đồng đều hơn, rất hợp khi xây bảng màu thiết kế. Độ trong suốt viết bằng alpha: rgb(46 125 50 / 50%).

Thuộc tínhVí dụ
background-color#e8f5e9
background-imageurl(anh.jpg), linear-gradient(...)
background-sizecover | contain | 200px auto
background-positioncenter | top right | 50% 30%
background-repeatno-repeat | repeat-x
background-attachmentfixed (hiệu ứng thị sai)
background (viết tắt)#000 url(a.jpg) center/cover no-repeat

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

<style>
  .o { display: inline-block; width: 110px; padding: 18px 6px; margin: 3px; color: #fff; text-align: center; border-radius: 8px; font-size: 13px; }
</style>
<span class="o" style="background: seagreen">seagreen</span>
<span class="o" style="background: #2e7d32">#2e7d32</span>
<span class="o" style="background: rgb(21 101 192)">rgb()</span>
<span class="o" style="background: hsl(28 90% 50%)">hsl()</span>
<span class="o" style="background: oklch(55% 0.18 300)">oklch()</span>
<span class="o" style="background: rgb(0 0 0 / 40%)">alpha 40%</span>
<span class="o" style="background: color-mix(in oklch, #2e7d32 50%, white); color:#000">color-mix</span>
Kết quả hiển thị

Ảnh nền

<style>
  .banner { height: 160px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
    background: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .45)), url("https://picsum.photos/seed/taybac/900/300") center / cover no-repeat; }
</style>
<div class="banner">Ảnh nền phủ lớp tối để chữ dễ đọc</div>
Kết quả hiển thị

Nhiều lớp nền cách nhau dấu phẩy, lớp viết trước nằm trên. Mẹo phủ gradient tối lên ảnh giúp chữ trắng luôn đủ tương phản.

Gradient

<style>
  .g { height: 70px; border-radius: 10px; margin: 6px 0; color: #fff; display: flex; align-items: center; padding-left: 14px; font-weight: 600; }
  .g1 { background: linear-gradient(90deg, #2e7d32, #00838f); }
  .g2 { background: linear-gradient(135deg, #ff9800 0%, #e91e63 50%, #673ab7 100%); }
  .g3 { background: radial-gradient(circle at 30% 50%, #ffeb3b, #ff5722); }
  .g4 { background: conic-gradient(#e53935 0 25%, #fdd835 0 50%, #43a047 0 75%, #1e88e5 0); color: #000; }
  .g5 { background: repeating-linear-gradient(45deg, #eceff1 0 10px, #cfd8dc 10px 20px); color: #333; }
</style>
<div class="g g1">linear-gradient 90deg</div><div class="g g2">nhiều điểm dừng màu</div>
<div class="g g3">radial-gradient</div><div class="g g4">conic-gradient (biểu đồ tròn)</div><div class="g g5">repeating-linear-gradient (sọc)</div>
Kết quả hiển thị
Mẹo hay

Kiểm tra tương phản bằng DevTools (bấm ô màu → Contrast ratio) hoặc webaim.org; chữ thường cần tối thiểu 4.5:1, chữ lớn 3:1.

Lưu ý

Ảnh nền không có văn bản thay thế; nội dung quan trọng (ảnh sản phẩm, biểu đồ) phải dùng thẻ img có alt, không dùng background-image.

Thực hành
  1. Tạo bảng 5 sắc độ của màu thương hiệu bằng HSL.
  2. Làm banner ảnh nền phủ gradient với tiêu đề căn giữa.
  3. Vẽ biểu đồ tròn 3 phần bằng conic-gradient.
  4. Tạo nền sọc chéo bằng repeating-linear-gradient.
Tóm tắt bài học
  • Màu: tên, HEX, rgb, hsl, oklch; alpha cho trong suốt.
  • background-size: cover/contain; position; repeat; nhiều lớp.
  • linear, radial, conic, repeating gradient.
  • Luôn kiểm tra độ tương phản.