Màu sắc trong CSS

Trong thiết kế web, màu sắc (color) là một yếu tố quan trọng giúp giao diện trở nên sinh động, dễ nhìn và có tính nhận diện thương hiệu.

CSS cung cấp nhiều cách để khai báo màu - từ tên màu đơn giản (red, blue) đến hệ mã phức tạp hơn như HEX, RGB, HSL.

Nắm vững cách hoạt động của từng loại giúp bạn kiểm soát tốt hơn giao diện và phong cách hiển thị.

Color Name

CSS hỗ trợ hơn 140 tên màu tiêu chuẩn mà bạn có thể sử dụng trực tiếp.

<div class="box-name"></div>
<style>
  .box-name {
    width: 200px;
    height: 200px;
    background-color: skyblue; /* Tên màu */
  }
</style>

Một số tên màu phổ biến: red, green, blue, black, white, gray, orange, purple, pink, yellow, cyan.

Ưu điểm: dễ nhớ, nhanh gọn.
Nhược điểm: không linh hoạt khi cần độ chính xác cao về sắc độ.

HEX

Hệ HEX (Hexadecimal) là cách biểu diễn màu bằng 6 ký tự đại diện cho 3 kênh màu Red, Green, Blue. Mỗi kênh có giá trị từ 00 đến ff (tức 0–255 trong hệ thập phân).

Cấu trúc: #RRGGBB

<div class="box-hex"></div>
<style>
  .box-hex {
    width: 200px;
    height: 200px;
    background-color: #ff0080;
  }
</style>

• #ff0000đỏ
• #00ff00: xanh lá
• #0000ff: xanh dương
• #ffffff: trắng
• #000000: đen

Bạn cũng có thể dùng rút gọn 3 ký tự nếu các cặp trùng nhau: #fff = #ffffff, #000 = #000000.

RGB (Red, Green, Blue)

Hệ RGB biểu diễn màu bằng giá trị số từ 0–255 cho từng kênh màu.

Cấu trúc: rgb(red, green, blue)

<div class="box-rgb"></div>
<style>
  .box-rgb {
    width: 200px;
    height: 200px;
    background-color: rgb(255, 255, 0); /* Đỏ + Xanh lá = Vàng */
  }
</style>

• rgb(255, 0, 0): đỏ
• rgb(0, 255, 0): xanh lá
• rgb(0, 0, 255): xanh dương

Ưu điểm: dễ đọc, dễ tùy chỉnh từng kênh.
Nhược điểm: không trực quan về độ sáng hay độ bão hòa.

RGBA (Red, Green, Blue, Alpha)

RGBA là phiên bản mở rộng của RGB, có thêm kênh alpha (độ trong suốt). Giá trị alpha nằm trong khoảng 0 → 1 (0 = trong suốt, 1 = đậm đặc).

<div class="box-rgba"></div>
<style>
  .box-rgba {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5); /* Màu đỏ trong suốt 50% */
  }
</style>

Dùng rất hữu ích khi làm hiệu ứng đổ bóng, lớp phủ (overlay), hoặc màu nền trong suốt.

HSL (Hue, Saturation, Lightness)

HSL giúp bạn điều chỉnh màu sắc theo cảm nhận trực quan hơn so với RGB.

• Hue: tông màu (0–360°, ví dụ: 0=đỏ, 120=xanh lá, 240=xanh dương)
• Saturation: độ bão hòa (0–100%)
• Lightness: độ sáng (0–100%)

<div class="box-hsl"></div>
<style>
  .box-hsl {
    width: 200px;
    height: 200px;
    background-color: hsl(120, 100%, 50%); /* Xanh lá tươi sáng */
  }
</style>

HSL cực kỳ hữu ích khi bạn muốn điều chỉnh sáng/tối mà không cần đổi tông màu gốc.

HSLA (Hue, Saturation, Lightness, Alpha)

Tương tự HSL, nhưng có thêm độ trong suốt (alpha).

<div class="box-hsla"></div>
<style>
  .box-hsla {
    width: 200px;
    height: 200px;
    background-color: hsla(200, 100%, 50%, 0.4);
  }
</style>

Kết quả là màu xanh dương nhạt, trong suốt 40%.

CurrentColor

Giá trị currentColor cho phép các thuộc tính khác kế thừa màu chữ hiện tại (color) của phần tử.

Điều này rất tiện để đồng bộ màu sắc giữa viền, chữ và nền mà không cần lặp lại giá trị.

<div class="box-current"></div>
<style>
  .box-current {
    color: #ff6600; /* Màu chữ cam */
    background-color: currentColor; /* Nền cùng màu với chữ */
    border: 4px solid currentColor;
    width: 200px;
    height: 100px;
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Giúp code gọn gàng, dễ bảo trì khi cần thay đổi màu chủ đạo.

Kết luận