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.

Lưu ý: Theo Niên giám web, hệ lục phân là kiểu cú pháp màu phổ biến nhất.

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

Lưu ý: Bạn cũng có thể viết mã hex dưới dạng viết tắt gồm ba chữ số. Mã hex gồm 3 chữ số là lối tắt đến chuỗi gồm 6 chữ số tương đương. Ví dụ: #a4e giống hệt với #aa44ee. Để thêm alpha, #a4e8 sẽ mở rộng thành #aa44ee88.

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).

Lưu ý: Dấu phẩy đã bị xoá khỏi ký hiệu rgb() và hsl() vì các hàm màu mới hơn, chẳng hạn như lab() và lch() sử dụng dấu cách thay vì dấu phẩy làm dấu phân cách. Thay đổi này giúp tăng tính nhất quán không chỉ với các hàm màu mới hơn mà còn với CSS nói chung. Để tăng khả năng tương thích ngược, bạn vẫn có thể sử dụng dấu phẩy để xác định rgb() và hsl().

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.

Lưu ý: Loại góc trong CSS rất phù hợp để xác định màu sắc vì nó thể hiện góc của bánh xe màu rất rõ. Loại này chấp nhận độ, vòng quay, radian và gradian.

Hỗ trợ trình duyệt

• 2
• 12
• 3,6
• 4

Nguồn

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).

Lưu ý: Một số loại màu mới hơn sắp ra mắt trong CSS. Các đối tượng này bao gồm lab() và lch(), cho phép chỉ định dải màu rộng hơn nhiều so với khả năng có thể được sử dụng trong RGB.

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

Lưu ý: Từ khoá hệ thống là các màu được xác định theo giao diện của hệ điều hành. Một số ví dụ về những màu này là Background, là màu nền của màn hình hoặc Highlight, là màu đánh dấu của các mục đã chọn. Đây chỉ là 2 trong số nhiều lựa chọn. Tất cả từ khoá màu đều không phân biệt chữ hoa chữ thường, tuy nhiên, bạn thường sẽ thấy màu hệ thống cùng với cách viết hoa để phân biệt với từ khoá màu chuẩn.

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.

Lưu ý: Có rất nhiều điều cần tìm hiểu với hiệu ứng chuyển màu nên chúng ta đã viết cả một bài học về cách sử dụng chúng.

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

Màu nào sau đây là màu hợp lệ?

rbga(400 0 1)

rbga là lỗi chính tả của rgba và 400 lớn hơn mức chấp nhận được, khiến nó không hợp lệ.

#0f08

🎉

#OOFZ2

Đây không phải là giá trị hex mà chỉ có 5 số và bao gồm chữ Z, nên giá trị này không hợp lệ.

rgb(255, 0, 0)

🎉

hsl(180deg 50% 50%)

🎉

hotpink

🎉

Hãy phát hiện màu hsl không hợp lệ.

hsl(5, 0%, 90%)

Đây là một giá trị hsl hợp lệ.

hsl(.5turn 40% 60%)

Đây là một giá trị hsl hợp lệ.

hsl(0, 0, 0)

🎉 Bạn tìm được rồi, giá trị thứ 2 và thứ 3 sẽ là phần trăm.

hsl(2rad 50% 50%)

Đây là một giá trị hsl hợp lệ.

hsl(0 0% 0% / 20%)

Đây là một giá trị hsl hợp lệ.

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