Màu

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

Màu sắc là một phần quan trọng của mọi trang web và trong CSS có nhiều lựa chọn cho các loại màu, hàm và cách xử lý.

Làm cách 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 những lựa chọn có thể giúp bạn đưa ra quyết định phù hợp 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, chẳng hạn như số để xác định chính nó.

Màu số

Rất có thể lần đầu tiên bạn tiếp xúc với màu sắc trong CSS là thông qua màu số. Chúng ta có thể làm việc với các giá trị màu dạng số theo một số hình thức.

Màu theo hệ thập lục phân

h1 {
  color: #b71540;
}

Ký hiệu thập lục phân (thường được viết tắt là hex) là cú pháp viết tắt cho RGB, cụ thể là gán giá trị số cho màu đỏ, xanh lục và xanh dương, là ba màu cơ bản.

Phạm vi thập lục phân là 0-9 và A-F. Khi được sử dụng trong một chuỗi gồm 6 chữ số, các giá trị này sẽ được dịch sang các dải số RGB từ 0 đến 255 tương ứng với các kênh màu đỏ, xanh lục và xanh dương.

Bạn cũng có thể xác định giá trị alpha bằng bất kỳ màu số nào. Giá trị alpha là tỷ lệ phần trăm độ trong suốt. Trong mã thập lục phân, bạn thêm hai chữ số khác vào chuỗi gồm 6 chữ số, tạo thành một chuỗi gồm 8 chữ số. Ví dụ: để đặt màu đen trong mã thập lục phân, 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 như bạn mong đợi. Dưới đây là một số giá trị chính, phổ biến được thêm vào mã hex màu đen, #000000:

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

Để chuyển đổi số thập lục phân gồm hai chữ số sang số thập phân, hãy lấy chữ số đầu tiên rồi nhân với 16 (vì số thập lục phân có cơ số 16), sau đó cộng với chữ số thứ hai. Ví dụ về việc sử dụng BF cho độ đậm nhạt 75%:

  1. B bằng 11, khi nhân với 16 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 hàm màu rgb(), sử dụng số hoặc tỷ lệ phần trăm làm tham số. Số cần nằm trong phạm vi 0-255 và tỷ lệ phần trăm nằm trong khoảng 0% đến 100%‌. RGB hoạt động theo thang điểm 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 đen là rgb(0 0 0), tức là không có màu đỏ, không có màu xanh lục và không có màu xanh dương. Màu đen cũng có thể được xác định là rgb(0%, 0%, 0%). Màu trắng thì hoàn toàn ngược lại: rgb(255, 255, 255) hoặc rgb(100%, 100%, 100%).

Bạn có thể đặt alpha trong rgb() theo một trong hai cách. Thêm / sau các tham số màu đỏ, xanh lục và xanh lam 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 màu đen alpha 50% trong các 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ợ rộng hơn, hãy sử dụng hàm rgba(), viết: rgba(0, 0, 0, 50%) hoặc rgba(0, 0, 0, 0.5).

HSL (Màu sắc, Độ bão hoà, Độ sáng)

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

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

Bánh xe màu có nhãn cho các giá trị độ theo mức tăng 60 độ để giúp hình ảnh thể hiện giá trị của từng góc

Độ bão hoà là mức độ sống động của màu sắc được chọn. Màu sắc bị 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 đến màu đen của ánh sáng được thêm vào. Độ sáng 100% sẽ luôn cho bạn màu trắng.

Khi sử dụng hàm màu hsl(), bạn xác định màu đen thực bằng cách viết hsl(0 0% 0%) hoặc thậm chí là hsl(0deg 0% 0%). Điều này là do tham số sắc độ xác định độ trên bánh xe màu, nếu bạn sử dụng loại số thì 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.

Hàm màu HSL được phân tích theo hình ảnh. Hue sử dụng bánh xe màu. Độ bão hoà cho thấy màu xám pha trộn với màu xanh lục lam. Độ sáng cho thấy màu đen chuyển thành màu trắng.

Alpha được xác định trong hsl(), tương tự như rgb() bằng cách thêm / sau các tham số sắc độ, độ bão hoà và độ sáng hoặc bằng cách sử dụng hàm 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 màu đen alpha 50%, 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ừ khoá về màu sắc

Có 148 màu được đặt tên trong CSS. Đây là những tên tiếng Anh đơn giản như tím, cà chua và cúc hoàng anh. Theo Web Almanac, một số tên phổ biến nhất là đen, trắng, đỏ, xanh dương và xám. Các màu sắc yêu thích của chúng tôi bao gồm goldenrod, aliceblue và hotpink.

Ngoài các màu tiêu chuẩn, bạn cũng có thể sử dụng các từ khoá đặc biệt:

  • transparent là một 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, sau đó đặt border-color thành currentColor, thì màu văn bản cũng sẽ là màu đỏ. Nếu phần tử mà bạn xác định currentColor không có giá trị được xác định cho color, thì currentColor sẽ được tính bằng thác nước

Vị trí sử dụng màu trong quy tắc CSS

Nếu một thuộc tính CSS chấp nhận loại dữ liệu <color> làm giá trị, thì thuộc tính đó sẽ chấp nhận bất kỳ phương thức nào ở trên để thể hiện màu sắc. Để tạo kiểu văn bản, hãy sử dụng các thuộc tính color, text-shadow và text-decoration-color. Tất cả các thuộc tính này đều chấp nhận màu làm giá trị hoặc màu 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 sắc trong hiệu ứng chuyển màu, chẳng hạn như linear-gradient. Độ dốc là một loại hình ảnh có thể được xác định theo phương thức lập trình trong CSS. Hiệu ứng chuyển màu chấp nhận hai hoặc nhiều màu trong 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 sẽ đặ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 mức độ hiểu biết

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

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

rbga(400 0 1)
rbga là lỗi chính tả của rgba và 400 lớn hơn giá trị chấp nhận được, khiến giá trị này không hợp lệ.
#0f08
🎉
#OOFZ2
Đây không phải là giá trị hex, mà chỉ là 5 chữ số và có chứa chữ Z, khiến giá trị này không hợp lệ.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Phát hiện màu hsl không hợp lệ.

hsl(5, 0%, 90%)
Đây là giá trị hsl hợp lệ.
hsl(.5turn 40% 60%)
Đây là giá trị hsl hợp lệ.
hsl(0, 0, 0)
🎉 Bạn đã tìm thấy, giá trị thứ 2 và thứ 3 phải là tỷ lệ phần trăm.
hsl(2rad 50% 50%)
Đây là giá trị hsl hợp lệ.
hsl(0 0% 0% / 20%)
Đây là giá trị hsl hợp lệ.

Tài nguyên