The CSS Podcast – 006: Màu sắc – Phần 1
Màu sắc là một phần quan trọng của mọi trang web và trong CSS có nhiều tuỳ chọn để chỉ định và thao tác với màu sắc.
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ó.
Chọn màu
Màu được đặt tên
Cách đơn giản nhất để chọn màu là chọn một trong 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. Theo Web Almanac, một số tên phổ biến nhất là black, white, red, blue và gray. Các loại chúng tôi yêu thích bao gồm goldenrod, aliceblue và hotpink.
Màu số
Mặc dù màu được đặt tên có thể thuận tiện, nhưng có thể bạn sẽ cần sử dụng các màu cụ thể không có trong bộ màu đó. Bạn có thể chỉ định màu sắc bằng các giá trị 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% (hoàn toàn trong suốt) 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%:
- B bằng 11, khi nhân với 16 bằng 176
- F bằng 15
- 176 + 15 = 191
- 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 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.
Bạn cũng có thể xác định màu đen 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).
HSL (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ã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.
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).
Màu sắc có độ phân giải cao
RGB và HSL xác định màu sắc trong gam màu sRGB. Màn hình mới hơn hỗ trợ nhiều màu hơn so với những màu có thể được mô tả bằng các định dạng này và nằm ngoài gam màu sRGB. Bạn có thể chọn các màu này bằng nhiều hàm CSS.
Hàm color()
h1 {
color: color(srgb 0.9 0.2 0.4);
}
Hàm color() CSS cho phép bạn chọn một màu trong một không gian màu cụ thể.
Đối số đầu tiên là không gian màu cần sử dụng, xác định các tuỳ chọn cho các kênh sau. Giống như rgb(), bạn có thể đặt kênh alpha bằng cách đặt một số từ 0 đến 1 hoặc một tỷ lệ phần trăm sau /.
Ví dụ: màu RGB đỏ đậm trong đoạn mã trước (được xác định là rgb(183 21 64)) có thể được xác định bằng tỷ lệ phần trăm là rgb(72% 8% 25%). Bạn có thể sử dụng hàm color() với từ khoá srgb để chỉ định cùng một màu với color(srgb .72 .08 .25).
srgb đặt không gian màu và cho chúng ta biết rằng 3 đối số tiếp theo là màu đỏ, xanh lục và xanh dương. Các giá trị thay đổi từ 0 thành 1 thay vì 0 thành 255.
Tương tự như rgb(), chúng ta có thể đặt alpha bằng / và tỷ lệ phần trăm hoặc số thập phân giữa 0 và 1.
Bạn có thể sử dụng nhiều không gian màu với hàm color(), mỗi không gian màu có các điểm mạnh và trường hợp sử dụng khác nhau.
Display P3
h1 {
color: color(display-p3 0.9 0.2 0.4);
}
Gam màu Display P3 chứa nhiều màu hơn 50% so với sRGB. Bạn có thể chỉ định tất cả màu trong gam màu Display P3 bằng không gian màu Display P3 bằng cách sử dụng hàm color().
Để đặt màu đen trong Display P3, hãy xác định màu này là color(display-p3 0 0 0). Sau khi
xác định không gian màu display-p3 cho hàm color(), bạn sẽ có
ba kênh: Đỏ, xanh lục và xanh dương, tương tự như color(srgb). Tuy nhiên, vì giá trị kênh đại diện cho toạ độ trong không gian màu rộng hơn, nên cùng một giá trị kênh sẽ có ý nghĩa khác nhau.
color(srgb 1 .5 0) là màu cam tương đương với color(display-p3 0.93596 0.52724 0.1983). Chúng ta có thể làm cho màu cam sống động hơn bằng cách mở rộng màu này ra khỏi không gian sRGB, sang color(display-p3 1 .5 0).
Oklab
Oklab được xác định bằng hàm oklab(), với các kênh Độ sáng, a và b. Hàm này hữu ích cho việc tạo hiệu ứng chuyển màu mượt mà và điều chỉnh độ bão hoà của màu, trong khi vẫn giữ nguyên sắc thái và độ sáng.
h1 {
color: oklab(75% 0.1 0.1)
}
Kênh độ sáng thay đổi từ 0 đến 1 hoặc 0% đến 100%. Màu có độ sáng là 0 sẽ luôn là màu đen.
Kênh a đi từ -0.4 đến 0.4 hoặc 0% đến 100%. Giá trị thấp hơn sẽ có màu xanh lục hơn và giá trị cao hơn sẽ có màu đỏ hơn.
Kênh b đi từ -0.4 đến 0.4 hoặc 0% đến 100%. Giá trị thấp hơn sẽ có màu xanh dương hơn và giá trị cao hơn sẽ có màu vàng hơn.
OkLCh
OkLCh là dạng cực hoặc hình trụ của OKLab và được xác định bằng các kênh độ sáng, sắc độ và màu sắc. Phương thức này rất hữu ích trong việc điều chỉnh màu sắc theo cách đồng nhất về mặt cảm nhận. Điều này có nghĩa là các thay đổi đối với sắc độ sẽ không ảnh hưởng đến độ sáng hoặc độ bão hoà của màu sắc.
h1 {
color: oklch(80% 0.1 200)
}
Bạn đã làm việc với độ sáng và sắc độ trong HSL, còn sắc độ tương tự như độ bão hoà. Bạn có thể đặt màu đen bằng oklch(0 0 0) và màu trắng bằng oklch(1 0 0).
Kênh độ sáng thay đổi từ 0 đến 1 hoặc 0% đến 100%. Màu có độ sáng là 0 sẽ luôn là màu đen.
Kênh sắc độ đặt độ sống động của màu sắc – 0 hoặc 0% sẽ bị khử bão hoà và các giá trị cao hơn sẽ có nhiều màu hơn. Giá trị 100% giống với .4, nhưng có thể nhanh chóng nằm ngoài gam màu với các giá trị gần với .4.
Hue được chỉ định theo độ, giống như hsl().
OkLCh không bị giới hạn bởi một gam màu như Display P3, vì vậy, bạn cần đảm bảo rằng mình đang tạo ra những màu có thể hiển thị. oklch(80% 50% 200) là màu xanh dương sáng, về mặt số liệu có vẻ như là một màu hợp lý, nhưng nằm ngoài gam màu Display P3.
Không gian khác
Có nhiều cách để chỉ định màu sắc trong CSS và bạn không cần phải tìm hiểu tất cả các cách đó. Định dạng rgb() và Hex thường được dùng trong các công cụ thiết kế và trong mã hiện có, đồng thời rất hữu ích khi biết. Bạn cũng nên làm quen với một định dạng có thể được thao tác một cách dự đoán được. Bạn có thể thay đổi trực tiếp các giá trị hsl hoặc oklch và biết được màu sắc kết quả sẽ là gì.
Đọc thêm trong bài viết Sử dụng nhiều màu sắc và không gian mới hơn.
Màu hệ thống
Ngoài các màu được đặt tên như màu tím hoặc màu xanh lục lam, bạn cũng có thể sử dụng các từ khoá đặc biệt:
transparentlà một màu hoàn toàn trong suốt. Đây cũng là giá trị ban đầu củabackground-colorcurrentColorlà giá trị động được tính toán theo ngữ cảnh của thuộc tínhcolor. Nếu bạn có màu văn bản làred, sau đó đặtborder-colorthànhcurrentColor, thì màu văn bản cũng sẽ làred. Nếu phần tử mà bạn xác địnhcurrentColorkhông có giá trị màu được xác định, thìcurrentColorsẽ được tính toán theo kiểu thác nước.
Thao tác với màu
Mặc dù có thể có một bảng màu để sử dụng trên trang web, nhưng bạn có thể cần các biến thể của những màu đó cho trạng thái di chuột, đường viền và các thành phần khác trên giao diện người dùng. Bạn có thể chỉ định từng màu, nhưng CSS cũng cung cấp các cách để biến đổi màu sắc nhằm tạo ra các biến thể này.
color-mix()
Để sử dụng kết quả của việc pha trộn hai màu, bạn có thể sử dụng phương thức color-mix().
Điều này rất hữu ích khi kết hợp một màu với màu trắng hoặc đen để tạo ra một biến thể sáng hơn hoặc tối hơn.
Để sử dụng color-mix(), bạn cần xác định hai màu, cách bạn muốn chúng kết hợp (phương thức nội suy) và lượng màu bạn muốn.
Đối với các không gian màu có sắc độ, bạn cũng có thể quyết định hướng di chuyển trên vòng tròn màu. Mặc định là sử dụng đường dẫn shorter, nhưng bạn cũng có thể chọn longer hoặc increasing và decreasing.
Không gian màu và hướng là phương pháp nội suy.
Bạn cũng có thể cung cấp lượng màu cần pha theo từng màu.
Cú pháp màu tương đối
Bạn cũng có thể làm việc trực tiếp hơn với màu bằng cách sử dụng cú pháp màu tương đối, cho phép bạn lấy bất kỳ màu nào và thực hiện các phép tính trên màu đó để tạo màu mới.
h1 {
color: oklch(from red l c h);
}
Khi sử dụng hàm oklch(), bạn sẽ làm việc với các kênh độ sáng, sắc độ và màu sắc. Sau từ khoá from, bạn có thể chỉ định bất kỳ màu nào theo bất kỳ cú pháp nào. Sau đó, bạn sẽ nhận được từng giá trị kênh để sử dụng làm chữ cái. Thao tác này sẽ chuyển sang màu đỏ mà không cần điều chỉnh.
Để điều chỉnh, bạn có thể sử dụng hàm calc() để thay đổi giá trị của kênh hoặc chỉ cần thay thế hoàn toàn kênh. Ở đây, chúng ta sử dụng cùng một màu red, nhưng xác định màu đó bằng oklch(62% 0.25 29).
h1 {
color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}
Kênh độ sáng là 62% / 2 hoặc 31%. Kênh sắc độ không thay đổi, vì vậy, kênh này là 0.25. Kênh màu sắc là 180. Thao tác này sẽ tạo màu mới oklch(31% 0.25 180), một màu xanh lục đậm mới.
Bạn thường sẽ sử dụng một thuộc tính tuỳ chỉnh làm màu đầu vào. Điều này cho phép bạn tạo các biến thể màu một cách linh động.
Bạn có thể thực hiện việc này với bất kỳ hàm màu nào và việc này sẽ hữu ích khi bạn thực hiện với các hàm màu có các kênh mô tả những thay đổi mà bạn muốn thực hiện. Ví dụ: nếu bạn muốn điều chỉnh độ sáng của một màu, hãy chọn oklch hoặc hsl, vì bạn có thể trực tiếp thay đổi kênh độ sáng.
h1 {
color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}
Bằng cách sử dụng Cú pháp màu tương đối (RCS), bạn có thể tạo bảng màu để sử dụng cho trang web của mình.
Màu nằm ngoài gam màu
Nội dung của bạn sẽ hiển thị trên nhiều màn hình có thể hỗ trợ hoặc không hỗ trợ màu sắc rộng. Nếu bạn chỉ định một màu không được màn hình hỗ trợ, thì màu đó sẽ trải qua một quy trình gọi là ánh xạ gam màu để tìm một màu tương tự có thể hiển thị trên màn hình. Nếu muốn xác định các màu cụ thể trong những trường hợp đó, bạn có thể sử dụng truy vấn nội dung đa phương tiện color-gamut.
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 đã nêu trước đó để 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)#0f08#OOFZ2rgb(255, 0, 0)hsl(180deg 50% 50%)hotpinkPhát hiện màu hsl không hợp lệ.
hsl(5, 0%, 90%)hsl(.5turn 40% 60%)hsl(0, 0, 0)hsl(2rad 50% 50%)hsl(0 0% 0% / 20%)