CSS Colors – Cách sử dụng Màu Sắc trong CSS

CSS Colors là thuộc tính được sử dụng trong CSS để định nghĩa màu sắc cho các phần tử HTML. Thuộc tính này thường được sử dụng để thiết lập màu nền hoặc màu chữ của một phần tử. Chúng ta có thể định nghĩa màu sắc của một phần tử bằng cách sử dụng các giá trị màu khác nhau như: RGB, RGBA, Hexadecimal, HSL, HSLA và các màu sẵn có.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Colors là gì?

CSS Colors là thuộc tính trong CSS để định nghĩa màu sắc cho các phần tử HTML. Có nhiều cách để định nghĩa màu sắc của một phần tử, bao gồm RGB, RGBA, Hexadecimal, HSL, HSLA và các màu sẵn có.

CSS Colors được sử dụng bởi các lập trình viên web để thiết kế các trang web với các màu sắc thích hợp. Bất kỳ ai muốn thiết kế một trang web đẹp và chuyên nghiệp đều có thể sử dụng CSS Colors.

Hướng dẫn CSS Colors

Bên dưới là một số cách để định nghĩa màu sắc của một phần tử bằng CSS:

RGB Format

Định nghĩa màu sắc bằng RGB Format bao gồm ba giá trị R, G, B nằm trong phạm vi từ 0 đến 255. Các giá trị màu sắc ở dạng RGB được đặt trong thuộc tính rgb(). Đây không phải là thuộc tính được hỗ trợ bởi tất cả các trình duyệt, vì vậy không nên sử dụng khi có thể.

Cú pháp

rgb(red, green, blue)

RGBA Format

RGBA giống như RGB format tuy nhiên bổ sung thêm giá trị Alpha – A, để chỉ định độ trong suốt của phần tử HTML. Giá trị alpha nằm trong khoảng từ 0.0 đến 1.0, trong đó 0.0 là hoàn toàn trong suốt và 1.0 là không trong suốt.

Cú pháp

rgba(red, green, blue, alpha)

Hexadecimal notation

Hexadecimal là một biểu diễn màu sắc bằng sáu ký hiệu được biểu diễn bằng cách sử dụng các ký tự từ 0 đến F. Trong biểu diễn Hexadecimal, hai chữ số đầu tiên đại diện cho giá trị màu sắc của màu đỏ (RR), hai chữ số tiếp theo đại diện cho giá trị màu xanh (GG) và hai chữ số cuối cùng đại diện cho giá trị màu xanh lam (BB).

Cú pháp

#RRGGBB

Short Hex codes

Short Hex Codes là một biểu diễn ngắn gọn hơn của Hexadecimal notation. Với một số màu, có thể tạo ra mã ngắn hơn bằng cách lược bỏ các ký tự, ví dụ: #7B6 sẽ được biểu diễn thành #77BB66 trong Hexadecimal.

Cú pháp

#RGB

HSL Format

HSL là viết tắt củaHue, Saturation và Lightness.

• Hue: Được định nghĩa là một góc trên vòng tròn màu sắc từ 0 đến 360 độ. Trong đó, giá trị 0 tương ứng với màu đỏ, giá trị 120 tương ứng với màu xanh lục và giá trị 240 tương ứng với màu xanh dương.
• Saturation: Được định nghĩa bằng phần trăm, trong đó 100% tương ứng với màu hoàn toàn bão hòa, 50% tương ứng với màu xám 50%, nhưng vẫn có màu sắc, và 0% tương ứng với màu xám hoàn toàn và không có màu sắc.
• Lightness: Được định nghĩa bằng phần trăm, trong đó 0% tương ứng với màu đen (không có ánh sáng), 50% tương ứng với màu không quá tối hay quá sáng và 100% tương ứng với màu trắng (toàn bộ ánh sáng).

Cú pháp

hsl(hue, saturation, lightness)

HSLA Format

Tương tự như HSL format, HSLA format bao gồm thêm giá trị alpha để chỉ định độ trong suốt của phần tử HTML.

Cú pháp

hsla(hue, saturation, lightness, alpha)

Built-in colors

CSS cũng hỗ trợ sẵn một số màu nổi tiếng chẳng hạn như: red, blue, green, yellow, orange, purple, black, white và gray.

Ưu và Nhược điểm CSS Colors

Ưu điểm của CSS Colors đó là nó cho phép lập trình viên thiết kế màu sắc linh hoạt và tinh tế cho các trang web. Hơn nữa, việc sử dụng mã màu giúp tiết kiệm thời gian khi thiết kế, vì bạn không phải chọn từ hàng ngàn màu khác nhau.

Nhược điểm của CSS Colors là nếu bạn không chọn màu sắc phù hợp, trang web của bạn có thể trở nên khó nhìn hoặc khó đọc. Bên cạnh đó, việc sử dụng mã màu không phù hợp cũng có thể gây ra các lỗi hiển thị trên trình duyệt khác nhau.

Lời khuyên CSS Colors

Khi thiết kế trang web, bạn nên sử dụng màu sắc đồng nhất và phù hợp với ý nghĩa của trang web. Bạn cũng nên kiểm tra mã màu để đảm bảo rằng chúng hoạt động tốt trên các trình duyệt khác nhau.