Màu sắc trong CSS

Màu sắc trong CSS
Màu sắc trong CSS

Màu sắc là một trong những yếu tố quan trọng ảnh hưởng trực tiếp đến tính thẩm mỹ của trang web. Hôm nay, chúng ta sẽ tìm hiểu các phương thức sử dụng sắc màu trong CSS.

Màu sắc trong CSS có thể được mô tả bằng một số phương pháp.

Nhớ lại bảng màu cơ bản

Đây là một kiến thức cơ bản, chúng ta đã được học trong hệ phổ thông.

RGB Color
RGB Color

Màu sắc trong thế giới của chúng ta, được tạo ra bằng cách pha trộn 3 màu cơ bản: Đỏ, Xanh Dương và Xanh Lá cây. Ví dụ:

  • Màu vàng: trộn màu đỏ với màu xanh lá
  • Màu tím: trộn màu đỏ với xanh dương

Khi chúng ta trộn 3 màu cơ bản với một tỉ lệ cụ thể, chúng ta sẽ có một màu mới.

Hexadecimal colors

Để biểu diễn một màu sắc, chúng ta có thể sử dụng một chuỗi thập lục phân #RRGGBB. Chuỗi thập lục phân được bắt đầu bằng một dấu #, kết hợp với 6 ký tự (từ 0 – F), chia thành 3 kênh màu RR-GG-BB (đỏ-xanh lá cây-xanh dương). Chúng ta có một số ví dụ:

  • #FF0000: mã màu cho màu đỏ
  • #00FF00: mã màu cho màu xanh lá cây
  • #FFFF00: mã màu cho màu vàng (pha màu đỏ với màu xanh lá cây)

Lưu ý: chuỗi hexa không phân biệt chữ hoa và chữ thường. Do đó, chuỗi ‘#ff4400’ và ‘#FF4400’ có cùng một giá trị. Tuy nhiên, chúng ta nên sử dụng thống nhất (hoặc thường hết, hoặc in hoa hết) để cho mã nguồn được đẹp hơn.

RGB colors

Chúng ta có thể sử dụng phương thức rgb để biểu diễn một một giá trị màu sắc. Phương thức RGB có cú pháp: rgb(red, green, blue). Với mỗi tham số sẽ nhận một giá trị số nguyên nằm trong đoạn [0, 255]. Chúng ta có một số ví dụ:

  • rgb(255, 0, 0): màu đỏ
  • rgb(0, 255, 0): xanh lá cây
  • rgb(255, 255, 0): màu vàng

RGBA colors

Phương thức RGBA được mở rộng từ phương thức RGB. Phương thức rgba cho phép chúng ta mô tả thêm 1 kênh thứ tư của màu sắc (kênh alpha). Kênh alpha được dùng để mô tả độ mờ đục của đối tượng.

Tham số alpha nhận một giá trị số thực nằm trong đoạn [0, 1]. Với 0.0 là trong suốt tuyệt đối và 1.0 là hoàn toàn mờ đục.

HSL colors

Đầu tiên, các bạn cần tham khảo qua không gian màu HSB. Trong không gian màu HSB, chúng ta có 3 thông số cần quan tâm:

  • Hue: vùng màu
  • Saturation: Độ bão hòa màu
  • Lightness (Bright, value): Độ sáng

HSL là một phương thức mô tả một màu sắc trong không gian màu HSB. HSL có cú pháp: hsl(hue, saturation, lightness).

  • hue: mô tả góc của bánh xe màu (color wheel). Tham số này nhận một giá trị số nguyên, nằm trong đoạn [0, 360]
  • saturation: mô tả giá trị bão hòa. Tham số này nhận vào một giá trị nằm trong đoạn 0% – 100%
  • lightness: mô tả độ sáng. Tham số này nhận vào một giá trị nằm trong đoạn 0% – 100%

Chúng ta có một số ví dụ:

  • hsl(120, 100%, 50%): xanh lá cây
  • hsl(120, 100%, 75%): xanh lá cây nhạt
  • hsl(120, 100%, 25%): xanh lá cây đậm

HSLA colors

Tương tự RGBA phương thức HSLA được mở rộng từ HSL và thêm kênh alpha. Giá trị và ý nghĩa của kênh alpha của phương thức HSLA cũng tương tự với kênh alpha trong phương thức RGBA.

Predefined/Cross-browser color names

Một số màu sắc đặt tên và định giá trị màu sẵn. Các màu sắc này sẽ hoạt động trên tất cả các trình duyệt web. Các bạn có thể tham khảo các màu sắc được định nghĩa sẵn tại đây.