Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Hướng Dẫn Màu Sắc Trong CSS

Khi muốn giao diện người dùng (UI) nổi bật, không có gì so sánh được với việc chọn bảng màu (color palette) phù hợp. Với hướng dẫn này, bạn sẽ học cách gán màu cho các phần tử, font chữ và gần như mọi thứ khi xây dựng UI.

Để thêm màu, CSS có kiểu dữ liệu color, biểu diễn màu theo định dạng Red, Green, Blue (RGB) chuẩn.

Cú Pháp Màu Sắc

Có vài cách để định nghĩa màu trong CSS:

  • Từ khóa (Keywords): Gõ dưới dạng chuỗi như 'red', 'white', 'yellow' hoặc mã hex như #fff.
  • Ký hiệu thập lục phân (Hexadecimal): Ví dụ #fff.
  • Ký hiệu hàm rgb() hoặc rgba(): Định dạng hàm.
  • Hàm HSL: Như hsl() và hsla().

Sử Dụng Từ Khóa Màu

Cách dễ nhất để thêm màu cho bất kỳ phần tử nào cần màu là dùng từ khóa.

Lưu ý rằng có sự khác biệt về thuộc tính cụ thể bạn dùng để thêm màu: background (nền), text (văn bản) hay element (phần tử). Ví dụ này sẽ dùng một nút bấm (button) quen thuộc.

<button class="color">Color Me</button>

Với phần tử button, ta có 2 lựa chọn thêm màu: thuộc tính background-color hoặc color. Thuộc tính color thay đổi màu chữ, background-color thay đổi màu nền. Hãy chọn button và thêm màu!

Hướng Dẫn Màu Sắc Trong CSS

Hàm rgba() và hsl()

Bạn đã thấy cách dùng từ khóa màu. Bạn có thể tham khảo cheatsheet màu từ khóa để xem tất cả lựa chọn. Mặc dù màu từ khóa cung cấp nhiều lựa chọn, nhưng vẫn có giới hạn.

Các màu từ khóa (hoặc hầu hết màu khác) cũng có thể biểu diễn dưới dạng Hex RGB hoặc RGB thập phân. Ví dụ 'black' là #000000 hoặc 0,0,0 thập phân. Bạn có thể lấy màu chính xác hơn với hex hoặc thập phân.

Cách dễ để thêm RGB thập phân là dùng hàm rgb(). Giá trị tối đa mỗi thành phần là 255. Hãy đổi màu từ khóa sang 2 phương pháp mới:

button.color { /* RGB và thập phân */ color: #fff; background-color: rgb(210,105,30); }

Bạn nhận thấy đen có các ký tự lặp lại? Khi các ký tự giống nhau, bạn chỉ cần gõ 3 ký tự đầu như đã làm cho trắng (#fff). Điều này cũng có thể viết là #ffffff.

Một lựa chọn khác là dùng hàm hsl(). HSL là viết tắt của hue (sắc độ), saturation (độ bão hòa) và lightness (độ sáng). Độ sáng là phần trăm từ trắng (100%) đến đen (0%). Độ bão hòa cũng là phần trăm của màu xám, 100% là màu xám "đầy đủ". Hue biểu diễn độ (0-360) trên vòng tròn màu RGB: 0 là đỏ, 120 là xanh lá, 240 là xanh dương. Tôi biết nghe hơi phức tạp 😄.

Các trình soạn thảo mã như Visual Studio Code cung cấp color picker. Hãy gõ hsl() rồi di chuột qua để thấy color picker hiện ra.

Hướng Dẫn Màu Sắc Trong CSS

Bên trái điều chỉnh hue, hai thanh còn lại là saturation và lightness. Thử nghiệm để tạo ra màu đẹp. HSL hữu ích cho các sắc độ (shades), có thể thao tác saturation và lightness. Một số người thích nó vì nhu cầu riêng.

Điều Chỉnh Độ Trong Suốt (Opacity)

Bạn có thể thấy cả rgb và hsl đều có dạng rgba() hoặc hsla(). Chữ 'a' là alpha, thực chất là độ trong suốt/độ mờ: 0 là trong suốt hoàn toàn, 1 là hoàn toàn không trong suốt.

Bằng cách sửa opacity, bạn có thể tinh chỉnh màu hơn. Hoàn thiện màu button bằng cách thêm opacity:

button.color { color: #fff; background-color: rgba(210,105,30, 0.7); }

Với opacity, chữ đọc rõ ràng hơn nhiều!

Hướng Dẫn Màu Sắc Trong CSS