Màu

Podcast CSS – 006: Màu 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 về loại màu, chức năng và cách xử lý.

Làm thế nào để bạn quyết định nên sử dụng loại màu nào? Làm thế nào để làm cho màu của bạn 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 mà bạn có để đư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 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ố cho các định nghĩa riêng.

Màu dạng số

Rất có thể việc bạn tiếp xúc với màu trong CSS lần đầu tiên 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ố ở 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 rút gọn thành thập lục phân) là cú pháp viết tắt cho RGB. Ký hiệu này gán một giá trị số cho màu xanh lục và màu xanh lam, đây là 3 màu chính.

Các dải thập lục phân là 0-9 và A-F. Khi được dùng trong chuỗi gồm 6 chữ số, các dải màu sẽ được chuyển đổi sang các dải 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 số nào. Giá trị alpha là phần trăm độ trong suốt. Trong mã hex, bạn thêm 2 chữ số khác vào chuỗi 6 chữ số, tạo thành một chuỗi 8 chữ số. Ví dụ: để thiết lập màu đen trong mã hex, hãy viết #000000. Để thêm độ trong suốt 50%, hãy thay đổi thành #00000080.

Do thang đo hex là 0-9 và A-F, nên các giá trị trong suốt có thể không hoàn toàn như bạn mong đợi. Dưới đây là một số giá trị phổ biến chính được thêm vào mã hex màu đ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 thập lục phân có hai chữ số thành số thập phân, hãy lấy chữ số đầu tiên và nhân với 16 (vì thập lục phân là cơ số 16), sau đó cộng chữ số thứ hai. Sử dụng BF làm ví dụ cho 75% alpha:

  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 dương)

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 phần trăm làm tham số. Các con số này phải 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 trên tỷ lệ từ 0 đến 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 nó là rgb(0 0 0), không có màu đỏ, không màu xanh lục và không màu xanh lam. Màu đen cũng có thể được định nghĩa là rgb(0%, 0%, 0%). Màu trắng hoàn toàn trái ngược: rgb(255, 255, 255) hoặc rgb(100%, 100%, 100%).

alpha được đặt 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(). Giá trị alpha có thể được xác định bằng phần trăm hoặc số thập phân trong khoảng 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(), hãy ghi: rgba(0, 0, 0, 50%) hoặc rgba(0, 0, 0, 0.5).

HSL (Tím, Độ 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, độ bão hoà 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 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 mà chúng ta thấy.

Bánh xe màu có nhãn cho các giá trị độ theo số gia 60 độ để giúp hình ảnh hoá nội dung mà mỗi giá trị góc thể hiện

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

Khi 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í là hsl(0deg 0% 0%). Điều này là do tham số màu 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, tứ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 chi tiết. Màu sắc sử dụng bánh xe màu. Độ rực màu cho thấy màu xám pha trộn vào màu xanh két. Độ sáng thể hiện màu đen thành màu trắng.

Alpha được xác định trong hsl(), theo cách tương tự như rgb() bằng cách thêm / sau các tham số màu sắc, độ bão hoà và độ sáng hoặc bằng cách sử dụng hàm hsla(). Giá trị alpha có thể được xác định bằng phần trăm hoặc số thập phân trong khoảng 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ừ khóa màu

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

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

  • transparent là 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 bối 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ì màu này cũng sẽ có màu đỏ. Nếu phần tử mà bạn xác định currentColor chưa xác định giá trị cho color, thì currentColor sẽ được tính theo tầng thay thế

Nơi 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> dưới dạng một giá trị, thì thuộc tính này sẽ chấp nhận bất kỳ phương thức nào ở trên để thể hiện màu sắc. Để định kiểu cho 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ả đều chấp nhận màu sắc là giá trị hoặc màu sắc trong 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ể dùng màu trong hiệu ứng chuyển màu, chẳng hạn như linear-gradient. Chuyển màu 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. 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 đặt màu cho đường viền và đường viền trên hộp. Thuộc tính box-shadow cũng chấp nhận màu sắc là một trong các giá trị.

Kiểm tra mức độ hiểu biết của bạn

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à một lỗi chính tả của rgba và 400 lớn hơn so với chấp nhận được, khiến nó không hợp lệ.
#0f08
🎉
#OOFZ2
Đây không phải là một giá trị hex, nó chỉ có 5 số và bao gồm cả Z nên 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à 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 rồi, 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