Màu

Podcast CSS – 006: Màu sắc phần một

Màu sắc là một phần quan trọng của bất kỳ trang web nào và trong CSS có nhiều lựa chọn về loại màu sắc, chức năng và điều trị.

Làm thế nào để quyết định nên sử dụng loại màu nào? Làm cách nào để tạo màu bán trong suốt? Trong bài học này, bạn sẽ tìm hiểu lựa chọn nào để đưa ra quyết định đúng đắn cho dự án và nhóm của mình.

CSS có nhiều loại dữ liệu, chẳng hạn như chuỗi và số. Màu sắc là một trong những loại này và sử dụng các loại khác, như số cho định nghĩa của riêng nó.

Màu dạng số

Rất có thể lần đầu tiên bạn tiếp xúc với các màu trong CSS là thông qua màu số. Chúng ta có thể xử lý các giá trị màu dạng số ở một vài dạng khác nhau.

Màu hex

h1 {
  color: #b71540;
}

Ký hiệu thập lục phân (thường được viết tắt thành thập lục phân) là cú pháp viết tắt cho RGB, Mã này sẽ chỉ định một giá trị số cho màu xanh lục và màu xanh lam, đó là 3 màu chính.

Phạm vi thập lục phân là 0 – 9 và A – F. Khi được dùng trong chuỗi 6 chữ số, chúng được chuyển đổi sang các dãy số RGB có giá trị từ 0 đến 255 tương ứng với các kênh màu đỏ, xanh lục và xanh dương tương ứng.

Bạn cũng có thể xác định giá trị alpha bằng bất kỳ màu dạng số nào. Giá trị alpha là tỷ lệ phần trăm của độ trong suốt. Trong mã hex, bạn thêm hai chữ số khác vào chuỗi gồm 6 chữ số, lập một chuỗi gồm 8 chữ số. Ví dụ: để đặt màu đen trong mã hex, hãy viết #000000. Để thêm độ trong suốt 50%, hãy thay đổi thành #00000080.

Vì thang thập lục phân là 0-9 và A-F, nên các giá trị trong suốt có thể không đúng như bạn mong đợi. Dưới đây là một số khoá, giá trị phổ biến được thêm vào mã hex đen #000000:

• 0% alpha (hoàn toàn trong suốt) là 00: #00000000
• 50% alpha là 80: #00000080
• 75% alpha là BF: #000000BF

Để chuyển đổi số hex có hai chữ số thành số thập phân, lấy chữ số đầu tiên và nhân với 16 (vì hệ thập lục phân là cơ số 16), sau đó thêm chữ số thứ hai. Dùng BF làm ví dụ cho 75% alpha:

1. B bằng 11, khi nhân với 16 sẽ bằng 176
2. F bằng 15
3. 176 + 15 = 191
4. Giá trị alpha là 191 — 75% của 255

RGB (Đỏ, Xanh lục, Xanh lam)

h1 {
  color: rgb(183, 21, 64);
}

Màu RGB được xác định bằng thuộc tính hàm màu rgb(), bằng cách sử dụng số hoặc phần trăm làm tham số. Các số phải nằm trong phạm vi 0-255 và tỷ lệ phần trăm nằm trong khoảng từ 0% đến 100%. RGB hoạt động trên thang đo 0-255, vì vậy, 255 sẽ tương đương với 100% và 0 đến 0%.

Để đặt màu đen trong RGB, hãy xác định màu đó là rgb(0 0 0), không có màu đỏ, không có màu xanh lục và không có màu xanh lam. Màu đen cũng có thể được xác định là rgb(0%, 0%, 0%). Màu trắng hoàn toàn đối lập: rgb(255, 255, 255) hoặc rgb(100%, 100%, 100%).

Giá trị alpha được thiết lập trong rgb() theo một trong 2 cách. Thêm / sau các tham số màu đỏ, xanh lục và xanh dương, hoặc sử dụng hàm rgba(). Bạn có thể xác định alpha bằng tỷ lệ phần trăm hoặc số thập phân từ 0 đến 1. Ví dụ: để đặt 50% alpha màu đen trong trình duyệt hiện đại, hãy viết: rgb(0 0 0 / 50%) hoặc rgb(0 0 0 / 0.5). Để được hỗ trợ trong phạm vi rộng hơn, hãy sử dụng hàm rgba(), ghi: rgba(0, 0, 0, 50%) hoặc rgba(0, 0, 0, 0.5).

HSL (Sắc màu, Độ rực màu, Độ sáng)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL là từ viết tắt của màu sắc, độ rực màu và độ sáng. Hue mô tả giá trị trên bánh xe màu, từ 0 đến 360 độ, bắt đầu bằng màu đỏ (là cả 0 và 360). Màu sắc 180 hoặc 50% sẽ nằm trong phạm vi màu xanh dương. Đó là nguồn gốc của màu sắc mà chúng ta nhìn thấy.

Độ rực màu là độ rực rỡ của màu được chọn. Màu đã khử bão hoà hoàn toàn (có độ bão hoà là 0%) sẽ xuất hiện thang màu xám. Cuối cùng, độ sáng là tham số mô tả tỷ lệ từ màu trắng thành màu đen của ánh sáng bổ sung. Độ sáng 100% sẽ luôn mang lại cho bạn màu trắng.

Bằng cách sử dụng hàm màu hsl(), bạn xác định màu đen thực sự bằng cách viết hsl(0 0% 0%) hoặc thậm chí hsl(0deg 0% 0%). Điều này là do tham số hue xác định độ trên bánh xe màu, nếu bạn sử dụng loại số, là 0-360. Bạn cũng có thể sử dụng loại góc, đó là (0deg) hoặc (0turn). Cả độ bão hoà và độ sáng đều được xác định bằng tỷ lệ phần trăm.

Alpha được định nghĩa trong hsl(), theo cách tương tự như rgb() bằng cách thêm / sau các thông số màu sắc, độ bão hoà và độ sáng hoặc bằng cách sử dụng hsla(). Bạn có thể xác định alpha bằng tỷ lệ phần trăm hoặc số thập phân từ 0 đến 1. Ví dụ: để đặt 50% alpha màu đen, hãy sử dụng: hsl(0 0% 0% / 50%) hoặc hsl(0 0% 0% / 0.5). Sử dụng hàm hsla(), hãy viết: hsla(0, 0%, 0%, 50%) hoặc hsla(0, 0%, 0%, 0.5).

Từ khóa màu

Có 148 màu được đặt tên trong CSS. Đây là những tên tiếng Anh đơn giản như Purple, tomato và goldenrod. Một số cái tên phổ biến nhất, theo Niên giám web, có các màu đen, trắng, đỏ, xanh lam và xám. Các món ăn yêu thích của chúng tôi gồm có Goldenrod, aliceblue và hotpink.

Ngoài màu sắc tiêu chuẩn, còn có các từ khoá đặc biệt:

• transparent có màu hoàn toàn trong suốt. Đây cũng là giá trị ban đầu của background-color
• currentColor là giá trị động được tính toán theo ngữ cảnh của thuộc tính color. Nếu bạn có màu văn bản là red và sau đó đặt border-color thành currentColor thì văn bản này cũng sẽ có màu đỏ. Nếu phần tử mà bạn xác định currentColor trên không có giá trị cho color được xác định, currentColor sẽ được tính theo tầng

Nơi sử dụng màu sắc trong quy tắc CSS

Nếu thuộc tính CSS chấp nhận <color> làm giá trị loại dữ liệu, thì hệ thống sẽ chấp nhận bất kỳ phương thức thể hiện màu nào ở trên. Để định kiểu cho văn bản, hãy dùng các thuộc tính color, text-shadow và text-decoration-color tất cả đều chấp nhận màu sắc dưới dạng giá trị hoặc màu sắc là một phần của giá trị.

Đối với nền, bạn có thể đặt màu làm giá trị cho background hoặc background-color. Bạn cũng có thể sử dụng màu trong độ dốc, chẳng hạn như linear-gradient. Hiệu ứng chuyển màu là một loại hình ảnh có thể được xác định bằng cách lập trình trong CSS. Dải chuyển chấp nhận hai hoặc nhiều màu theo bất kỳ tổ hợp định dạng màu nào, chẳng hạn như hex, rgb hoặc hsl.

Cuối cùng, border-color và outline-color đặt màu cho đường viền và đường viền trên các hộp. Thuộc tính box-shadow cũng chấp nhận màu sắc làm một trong các giá trị.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về màu sắc

Tài nguyên

• Bản minh hoạ tiện lợi cho thấy cách sử dụng góc bằng HSL
• Hướng dẫn toàn diện về màu sắc
• Hướng dẫn toàn diện về gam màu rộng
• [video] Video giải thích về cách đọc mã hex
• Cách hoạt động của mã thập lục phân