Thay đổi màu nền bằng css mdn

Phần này mô tả trạng thái của tài liệu này tại thời điểm xuất bản. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https. //www. w3. tổ chức/TR/

This document was published by the CSS Working Group as a Candidate Recommendation Draft using the Recommendation track. Publication as a Candidate Recommendation does not imply endorsement by W3C and its Members. A Candidate Recommendation Draft integrates changes from the previous Candidate Recommendation that the Working Group intends to include in a subsequent Candidate Recommendation Snapshot

This is a draft document and may be updated, replaced or obsoleted by other documents at any time. Không phù hợp để trích dẫn tài liệu này ngoài công việc đang tiến hành

Vui lòng gửi phản hồi bằng cách gửi các vấn đề trong GitHub (ưu tiên), bao gồm mã thông số “css-color” trong tiêu đề, như thế này. “[css-color] …summary of comment…”. All issues and comments are archived. Alternately, feedback can be sent to the (archived) public mailing list www-style@w3. org

This document is governed by the 2 November 2021 W3C Process Document

This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy

The following features are at-risk, and may be dropped during the CR period

• Equivalence of deprecated and un-deprecated system colors

“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first

1. Introduction

This section is not normative

This module describes CSS properties which allow authors to specify the foreground color and opacity of the text content of an element. This module also describes in detail the CSS value type

It not only defines the color-related properties and values that already exist in CSS1, CSS2, and CSS Color 3, but also defines new properties and values

In particular, it allows specifying colors in other color spaces than sRGB; previously, the more saturated colors outside the sRGB gamut could not be used in CSS even if the display device supported them

A draft implementation report is available

1. 1. Value Definitions

This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly

2. Color Terminology

A color is a definition (numeric or textual) of the human visual perception of a light or a physical object illuminated with light. The objective study of human color perception is termed colorimetry

The color of a physical object depends on how much light it reflects at each visible wavelength, plus the actual color of the light illuminating it (again, the amount of light at each wavelength). It is measured by a spectrophotometer

The color of something that emits light (including colors on a computer screen) depends on how much light it emits at each visible wavelength. It is measured by a spectroradiometer

If two objects have different spectra, but still produce the same physical sensation, we say they have the same color. We can calculate whether two colors are the same by converting the spectra to CIE XYZ (three numbers)

For example a green leaf, a photograph of that leaf displayed on a computer screen, and a print of that photograph, are all producing a green sensation by different means. If the screen and the printer are calibrated, the green in the leaf, and the photo, and the print will look the same

A color space is an organization of colors with respect to an underlying colorimetric model, such that there is a clear, objectively-measurable meaning for any color in that color space. This also means that the same color can be expressed in multiple color spaces, or transformed from one color space to another, while still looking the same

A leaf is measured with a spectrophotometer and found to have the color lch(51. 2345% 21. 2 130) which is lab(51. 2345% -13. 6271 16. 2401)

This same color could be expressed in various color spaces

 color(sRGB 0.41587 0.503670 0.36664);
 color(display-p3 0.43313 0.50108 0.37950);
 color(a98-rgb 0.44091 0.49971 0.37408);
 color(prophoto-rgb 0.36589 0.41717 0.31333);
 color(rec2020 0.42210 0.47580 0.35605);

An additive color space means that the coordinate system is linear in light intensity. Không gian màu CIE XYZ là một không gian màu phụ gia (ngoài ra, thành phần Y của XYZ là độ sáng)

Trong một không gian màu bổ sung, các tính toán có thể được thực hiện để dự đoán chính xác quá trình trộn màu. Hầu hết các không gian RGB không phải là phụ gia, vì các thành phần được mã hóa gamma. Hoàn tác mã hóa gamma này tạo ra các giá trị ánh sáng tuyến tính

Ví dụ: nếu một thiết bị chiếu sáng có hai đèn có màu giống hệt nhau và chỉ có một đèn được bật và màu được đo là color(xyz 0. 13 0. 12 0. 04), thì màu khi cả hai được bật sẽ chính xác gấp đôi màu đó, color(xyz 0. 26 0. 24 0. 08)

Nếu chúng ta có hai đèn định vị có màu khác nhau chiếu trên một sân khấu và một đèn có màu giá trị đo được (xyz 0. 15 0. 24 0. 17) trong khi cái còn lại là màu(xyz 0. 11 0. 06 0. 06) thì chúng ta có thể dự đoán chính xác rằng nếu các chùm màu được tạo chồng lên nhau, thì màu của hỗn hợp sẽ là tổng của các giá trị thành phần XYZ hoặc color(xyz 0. 26 0. 30 0. 23)

Sắc độ là một phép đo màu trong đó thành phần độ sáng đã được loại bỏ. Từ ví dụ về các đèn giống hệt nhau ở trên, sắc độ u',v' với một đèn là (0. 2537, 0. 5268) và màu sắc giống nhau ở cả hai đèn (chúng có cùng màu, chỉ sáng hơn)

Sắc độ là phụ gia, vì vậy chúng dự đoán chính xác sắc độ (chứ không phải độ đậm nhạt thu được) của hỗn hợp. Là hai chiều, sắc độ dễ dàng được biểu thị trên biểu đồ sắc độ để dự đoán sắc độ của hỗn hợp màu. Bất kỳ hai màu nào cũng có thể được trộn lẫn và các màu thu được sẽ nằm trên đường nối chúng trên sơ đồ. Ba màu tạo thành một mặt phẳng và các màu kết quả sẽ nằm trong tam giác mà chúng tạo thành trên sơ đồ

Biểu đồ màu hiển thị (bằng màu đồng nhất) không gian màu display-p3 và để so sánh (đã mờ) không gian màu sRGB. Điểm trắng (D65) cũng được hiển thị

Không gian màu RGB mang tính cộng và gam màu của chúng được xác định bởi sắc độ của các màu gốc đỏ, lục và lam, cộng với sắc độ của điểm trắng (màu được tạo thành bởi cả ba màu gốc ở cường độ tối đa)

Hầu hết các không gian màu sử dụng một trong số ít điểm trắng mô phỏng ánh sáng ban ngày, được đặt tên theo nhiệt độ màu của bộ tản nhiệt thân đen tương ứng. Ví dụ: D65 là điểm trắng ánh sáng ban ngày tương ứng với nhiệt độ màu tương quan là 6500 Kelvin (thực tế là 6504, vì giá trị của hằng số Plank đã thay đổi kể từ khi màu được xác định ban đầu)

Để tránh các lỗi vòng lặp tích lũy, điều quan trọng là các giá trị sắc độ giống hệt nhau được sử dụng một cách nhất quán, ở tất cả các vị trí trong một phép tính. Do đó, để có khả năng tương thích tối đa, đối với thông số kỹ thuật này, hai điểm trắng mô phỏng ánh sáng ban ngày tiêu chuẩn sau đây được xác định

Tên xyCCTD500. 3457000. 3585005003KD650. 3127000. 3290006504K

Khi các đặc tính vật lý đo được (chẳng hạn như sắc độ của màu cơ bản mà nó sử dụng hoặc màu được tạo ra để đáp ứng với một bộ đầu vào nhất định) của một không gian màu hoặc thiết bị tạo màu đã được biết, thì nó được gọi là đặc trưng.

Nếu các điều chỉnh bổ sung đã được thực hiện để một thiết bị đáp ứng các mục tiêu hiệu chỉnh như điểm trắng, độ trung tính của màu xám, khả năng dự đoán và tính nhất quán của phản hồi âm thanh, thì thiết bị đó được cho là đã được hiệu chỉnh

Các thiết bị vật lý thực sự chưa thể tạo ra mọi màu sắc có thể mà mắt người có thể nhìn thấy. Dải màu mà một thiết bị nhất định có thể tạo ra được gọi là gam màu (đừng nhầm với gamma). Các thiết bị có gam màu hạn chế không thể tạo ra màu sắc rất bão hòa, giống như màu được tìm thấy trong cầu vồng

Các gam của các không gian màu khác nhau có thể được so sánh bằng cách xem khối lượng (tính theo đơn vị Lab khối) của các màu có thể được biểu thị. Bảng sau kiểm tra các không gian màu được xác định trước có sẵn trong CSS

không gian màuÂm lượng (triệu đơn vị Lab)sRGB0. 820màn hình-p31. 233a98-rgb1. 310prophoto-rgb2. 896rec20202. 042

Màu trong CSS hoặc là màu không hợp lệ, như được mô tả bên dưới cho từng dạng cú pháp hoặc là màu hợp lệ

Bất kỳ màu nào không phải là màu không hợp lệ là màu hợp lệ

Một màu có thể là màu hợp lệ nhưng vẫn nằm ngoài phạm vi màu có thể được tạo bởi thiết bị đầu ra (màn hình, máy chiếu hoặc máy in) hoặc phạm vi màu có thể được biểu thị bằng một mô hình màu nhất định (ví dụ HSL . Nó được cho là nằm ngoài gam màu

Mỗi màu hợp lệ nằm trong gam màu cho một thiết bị đầu ra cụ thể (màn hình hoặc máy in) hoặc không gian màu hoặc nằm ngoài gam màu

Ví dụ: cho một màn hình bao phủ 100% không gian màu hiển thị-p3, nhưng không nhiều hơn, màu sau nằm ngoài gam màu.

 color(prophoto-rgb 0.88 0.45 0.10)

bởi vì, được thể hiện trong display-p3, một hoặc nhiều tọa độ lớn hơn 1. 0 hoặc nhỏ hơn 0. 0

 color(display-p3 1.0844 0.43 0.1)

Màu này hợp lệ và có thể được sử dụng làm điểm dừng chuyển màu chẳng hạn, nhưng sẽ cần được ánh xạ gam CSS để hiển thị, tạo ra màu trông tương tự nhưng có sắc độ thấp hơn (ít bão hòa hơn)

3. Áp dụng màu trong CSS

3. 1. Khả năng truy cập và truyền đạt thông tin theo màu sắc

Mặc dù màu sắc có thể thêm thông tin quan trọng vào tài liệu và làm cho tài liệu dễ đọc hơn, nhưng bản thân màu sắc không phải là phương tiện duy nhất để truyền tải thông tin quan trọng. Các tác giả nên xem xét Nguyên tắc truy cập nội dung web của W3C [WCAG21] khi sử dụng màu trong tài liệu của họ

1. 4. 1 Sử dụng Màu sắc. Màu sắc không được sử dụng làm phương tiện trực quan duy nhất để truyền đạt thông tin, biểu thị một hành động, nhắc phản hồi hoặc phân biệt một yếu tố trực quan

3. 2. Màu nền. thuộc tính màu

bài kiểm tra

Thuộc tính này chỉ định màu nền trước chính của phần tử. Màu này được sử dụng làm màu tô cho nội dung văn bản của nó và ngoài ra, nó còn chỉ định giá trị được sử dụng mà màu hiện tại phân giải thành, cho phép tham chiếu gián tiếp đến màu nền trước này và ảnh hưởng đến các giá trị ban đầu của nhiều thuộc tính màu khác như màu đường viền và văn bản-

Đặt màu nền trước chính thành màu đã chỉ định

Loại cung cấp nhiều cách để chỉ định cú pháp một màu nhất định. Ví dụ: tất cả các khai báo sau đều chỉ định màu sRGB “lime”.

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

Khi được áp dụng cho văn bản, thuộc tính này, bao gồm cả thành phần alpha của nó, không ảnh hưởng đến "hình tượng màu" (chẳng hạn như biểu tượng cảm xúc trong một số phông chữ), được tô màu bằng bảng màu tích hợp. Tuy nhiên, một số phông chữ màu có thể tham chiếu đến "màu nền trước" theo ngữ cảnh, chẳng hạn như theo mục nhập bảng màu 0xFFFF trong bảng

rgba(100%, 0%, 0%, 0.5)

0 của OpenType hoặc theo giá trị điền vào ngữ cảnh trong SVG-in-OpenType. Trong những trường hợp như vậy, màu nền trước được đặt bởi thuộc tính này, giống với cách nó đặt giá trị màu hiện tại

3. 3. minh bạch. thuộc tính độ trong suốt

Độ mờ có thể được coi là một hoạt động hậu xử lý. Về mặt khái niệm, sau khi phần tử (bao gồm cả hậu duệ của nó) được hiển thị thành hình ảnh ngoài màn hình RGBA, cài đặt độ mờ chỉ định cách kết hợp kết xuất ngoài màn hình vào kết xuất tổng hợp hiện tại. Xem tổng hợp alpha đơn giản để biết chi tiết

Kiểm tra Độ mờ được áp dụng cho phần tử. Nó được giải thích giống hệt với định nghĩa của nó trong rgb(), ngoại trừ độ mờ kết quả được áp dụng cho toàn bộ phần tử, thay vì một màu cụ thể. bài kiểm tra

Thuộc tính độ mờ áp dụng độ mờ đã chỉ định cho toàn bộ phần tử, bao gồm cả nội dung của nó, thay vì áp dụng nó cho từng phần tử con riêng lẻ. Điều này có nghĩa là, ví dụ: một phần tử con trong suốt che khuất một phần nền của phần tử sẽ tiếp tục làm như vậy ngay cả khi độ mờ nhỏ hơn 1, nhưng toàn bộ phần tử và phần tử con sẽ hiển thị trang bên dưới thông qua chính chúng

Điều đó cũng có nghĩa là các nét tượng trưng tương ứng với tất cả các ký tự trong phần tử được xử lý như một tổng thể;

Kiểm traHiển thị chính xác và không chính xác văn bản có giá trị độ mờ nhỏ hơn một, có các ký tự trùng lặp.

Nếu muốn có độ mờ riêng biệt cho từng hình tượng, thì có thể đạt được điều đó bằng cách sử dụng giá trị màu bao gồm độ mờ, thay vì đặt thuộc tính độ mờ

Nếu một hộp có độ mờ nhỏ hơn 1, nó sẽ tạo thành ngữ cảnh xếp chồng cho các phần tử con của nó. (Điều này ngăn nội dung của nó xen kẽ trong trục z với nội dung bên ngoài nó. )

bài kiểm tra

Hơn nữa, nếu thuộc tính chỉ mục z áp dụng cho hộp, giá trị tự động được coi là 0 cho phần tử; . 0)

Xem phần 9. 9 và Phụ lục E của [CSS2] để biết thêm thông tin về bối cảnh xếp chồng

Các quy tắc về thứ tự z này không áp dụng cho các phần tử SVG, vì SVG có mô hình kết xuất riêng ([SVG11], Chương 3)

3. 4. Không gian màu của hình ảnh được gắn thẻ

Hình ảnh được gắn thẻ là hình ảnh được chỉ định rõ ràng một cấu hình màu, như được xác định bởi định dạng hình ảnh. Điều này thường được thực hiện bằng cách bao gồm hồ sơ của Hiệp hội màu quốc tế (ICC) [ICC]

Ví dụ: JPEG [JPEG], PNG [PNG] và TIFF [TIFF] đều chỉ định một phương tiện để nhúng cấu hình ICC

Các định dạng hình ảnh cũng có thể sử dụng các phương pháp tương đương khác, thường là để cho ngắn gọn

Ví dụ: PNG chỉ định một phương tiện (khối sRGB) để gắn thẻ rõ ràng cho một hình ảnh nằm trong không gian màu sRGB mà không bao gồm cấu hình sRGB ICC

Hình ảnh RGB được gắn thẻ và hình ảnh được gắn thẻ sử dụng chuyển đổi RGB chẳng hạn như YCbCr, nếu cấu hình màu hoặc thông tin nhận dạng khác hợp lệ, phải được coi là nằm trong không gian màu đã chỉ định

bài kiểm tra

Nếu cấu hình màu hoặc thông tin nhận dạng khác không hợp lệ, hình ảnh được coi là hình ảnh không được gắn thẻ

Ví dụ: khi trình duyệt chạy trên hệ thống có màn hình Display P3 hiển thị hình ảnh JPEG được gắn thẻ là trong ITU Rec BT. 2020 [Ghi. 2020] không gian màu, nó phải chuyển đổi màu từ ITU Rec BT. 2020 để Hiển thị P3 để chúng hiển thị chính xác. Nó không được xử lý ITU Rec BT. 2020 như thể chúng là giá trị Hiển thị P3, sẽ tạo ra màu không chính xác

3. 5. Không gian màu của các màu không được đánh dấu

Các màu được chỉ định trong HTML và hình ảnh không được gắn thẻ phải được coi là nằm trong không gian màu sRGB ([SRGB]) trừ khi có chỉ định khác

bài kiểm tra

Hình ảnh không được gắn thẻ là hình ảnh không được chỉ định rõ ràng cấu hình màu, như được xác định bởi định dạng hình ảnh

Lưu ý rằng quy tắc này không áp dụng cho các video không được gắn thẻ vì video không được gắn thẻ phải được coi là ở trong không gian màu do ITU xác định

• Ở mức dưới 720p, đó là Khuyến nghị ITU-R BT. 601 [ITU-R-BT. 601]

• Ở 720p, đó là SMPTE ST 296 (cùng phép đo màu với 709) [SMPTE296]

• Ở 1080p, đó là Khuyến nghị ITU-R BT. 709 [ITU-R-BT. 709]

• Ở 4k (UHDTV) trở lên, đó là ITU-R BT. 2020 [Ghi. 2020] cho video SDR

4. đại diện cho màu sắc. loại

Màu sắc trong CSS được biểu diễn dưới dạng danh sách các thành phần màu, đôi khi còn được gọi là “kênh”, biểu thị các trục trong không gian màu. Mỗi kênh có giá trị tối thiểu và tối đa và có thể nhận bất kỳ giá trị nào giữa hai giá trị đó. Ngoài ra, mỗi màu được đi kèm với một thành phần alpha, cho biết mức độ trong suốt của nó và do đó người ta có thể nhìn thấy bao nhiêu phông nền qua màu đó

CSS có một số cú pháp để chỉ định giá trị màu

Các hàm màu sử dụng ký hiệu chức năng CSS để thể hiện màu trong nhiều không gian màu khác nhau bằng cách chỉ định tọa độ kênh của chúng. Một số trong số này sử dụng mô hình màu phân cực hình trụ, chỉ định màu theo một góc, trục trung tâm biểu thị độ sáng (từ đen sang trắng) và bán kính biểu thị độ bão hòa hoặc sắc độ (màu cách xa màu xám trung tính bao xa). Những cái khác sử dụng mô hình màu trực giao hình chữ nhật, chỉ định màu bằng ba trục thành phần trực giao

Các chức năng màu có sẵn trong Cấp độ 4 là

Để dễ dàng tham khảo trong các thông số kỹ thuật khác, màu đen mờ đục được định nghĩa là màu rgb(0 0 0 / 100%); . e. rgb(0 0 0 / 0%)

Màu sắc trong CSS được thể hiện bằng loại

 =  | currentcolor |  

 =  |  |  | transparent
 =  |  |
                             |  |  |
                             |  |  |  |
                            

Các hàm , , , và color là các biểu diễn màu cực hình trụ sử dụng một góc;

Tất cả các dạng cú pháp được định nghĩa trong đặc tả này đều sử dụng dấu cách, không phải dấu phẩy, để phân tách các thành phần màu. Họ cũng sử dụng dấu gạch đầu dòng ("/") để tách một thuật ngữ alpha tùy chọn khỏi các thành phần màu

Phần sau thể hiện màu đỏ sRGB bão hòa có độ mờ 50%

rgb(100% 0% 0% / 50%)

4. 1. 1. Cú pháp chức năng màu được phân tách bằng dấu phẩy kế thừa

Để tương thích với Web, các dạng cú pháp của rgb(), rgba(), hsl(), và hsla(), (những dạng được xác định trong thông số kỹ thuật trước đó) cũng hỗ trợ cú pháp màu kế thừa có những điểm khác biệt sau

• các thành phần màu được phân tách bằng dấu phẩy (tùy chọn đứng trước và/hoặc theo sau bởi khoảng trắng)

• các dạng không mờ đục sử dụng một ký hiệu riêng (ví dụ: hsla() thay vì hsl())

• độ chính xác yêu cầu tối thiểu thấp hơn, 8 bit cho mỗi thành phần

• giá trị none không được phép

Phần sau thể hiện màu đỏ sRGB bão hòa có độ mờ 50%

rgba(100%, 0%, 0%, 0.5)

Đối với các chức năng màu được giới thiệu ở cấp độ này hoặc các cấp độ tiếp theo, khi không có vấn đề về tính tương thích với Web, cú pháp màu kế thừa không hợp lệ

4. 2. Đại diện cho sự minh bạch. cú pháp

________số 8

Độ mờ trong CSS thường được thể hiện bằng cú pháp, ví dụ như trong thuộc tính độ mờ hoặc dưới dạng thành phần alpha trong hàm màu. Được biểu thị dưới dạng , phạm vi hữu ích của giá trị là 0 (biểu thị độ trong suốt hoàn toàn) đến 1 (biểu thị độ mờ hoàn toàn). Nó cũng có thể được viết dưới dạng , tính toán tương đương (0% đến 0, 100% đến 1). Trừ khi có quy định khác, một thành phần mặc định là 100% khi bỏ qua. Các giá trị bên ngoài phạm vi [0,1] không hợp lệ, nhưng được kẹp vào phạm vi đó khi tính toán

4. 3. Đại diện cho sắc độ tọa độ hình trụ. cú pháp

Sắc độ được thể hiện dưới dạng một góc của vòng tròn màu (cầu vồng, xoắn quanh thành một vòng tròn và có thêm màu tím giữa tím và đỏ)

 =  | 

Bởi vì giá trị này thường được đưa ra theo độ, đối số cũng có thể được đưa ra dưới dạng một số, được hiểu là một số độ

Số này không bị giới hạn trong phạm vi [0,360] nhưng không bị chặn. Một số thao tác nhất định, chẳng hạn như nội suy màu sắc, có thể chuẩn hóa góc màu sắc trong quá trình tính toán

Ghi chú. Các góc và khoảng cách tương ứng với các sắc thái cụ thể phụ thuộc vào không gian màu. Ví dụ: trong HSL và HWB, sử dụng không gian màu sRGB, sRGB xanh lục là 120 độ. Trong LCH, sRGB xanh là 134. 39 độ, display-p3 green là 136. 01 độ, a98-rgb green là 145. 97 độ và prophoto-rgb green là 141. 04 độ (vì đây là tất cả các sắc thái khác nhau của màu xanh lá cây)

các thành phần là những thành phần phổ biến nhất trở nên bất lực;

4. 4. Thành phần màu “thiếu” và từ khóa không có

Trong một số trường hợp nhất định, một màu có thể thiếu một hoặc nhiều thành phần màu

Trong thông số kỹ thuật này, điều này tự động xảy ra do phép nội suy dựa trên sắc độ cho một số màu (chẳng hạn như màu trắng);

Nó cũng có thể được chỉ định rõ ràng, bằng cách cung cấp từ khóa none cho một thành phần trong hàm màu. Tất cả các hàm màu (ngoại trừ những hàm sử dụng cú pháp màu kế thừa) cho phép bất kỳ thành phần nào của chúng được chỉ định là không có

Để xử lý thành phần bị thiếu trong phép nội suy màu, xem §12. 2 Nội suy với các thành phần bị thiếu

Đối với tất cả các mục đích khác, một thành phần bị thiếu hoạt động như một giá trị bằng 0, trong đơn vị thích hợp cho thành phần đó. 0, 0% hoặc 0 độ. Điều này bao gồm hiển thị màu trực tiếp, chuyển đổi nó sang không gian màu khác, thực hiện tính toán trên các giá trị thành phần màu, v.v.

Nếu một màu có thành phần bị thiếu được đánh số thứ tự hoặc được trình bày trực tiếp cho tác giả, thì đối với cú pháp màu kế thừa, nó biểu thị thành phần đó dưới dạng giá trị 0;

Màu bị thiếu là phổ biến khi nội suy trong không gian màu hình trụ. Ví dụ: sử dụng hàm color-mix() được chỉ định trong [CSS-COLOR-5], người ta có thể viết color-mix(in hsl, white 30%, green 70%). Vì màu trắng là một màu tiêu sắc nên nó bị thiếu sắc độ khi được biểu thị bằng hsl() (thực tế là hsl(none none 100%)), vì bất kỳ sắc độ hoặc độ bão hòa nào cũng sẽ tạo ra cùng một màu), điều đó có nghĩa là chức năng trộn màu sẽ xử lý

Kết quả sẽ là một màu thực sự trông giống như sự pha trộn của màu xanh lá cây và màu trắng, thay vì có thể trông hơi đỏ (nếu màu trắng được mặc định là 0 độ) hoặc hơi xám (nếu độ bão hòa của màu trắng được mặc định là 0%)

Chỉ định rõ ràng các thành phần bị thiếu có thể hữu ích để đạt được hiệu ứng khi bạn chỉ muốn nội suy các thành phần nhất định của một màu

Ví dụ: để tạo hiệu ứng động cho một màu thành "thang độ xám", bất kể màu đó là gì, người ta có thể nội suy nó bằng lch(none 0 none). Điều này sẽ lấy màu sắc và độ sáng từ màu bắt đầu, nhưng tạo hiệu ứng cho sắc độ của nó xuống 0, biến nó thành màu xám có độ sáng bằng nhau với màu sắc ổn định trên toàn bộ hoạt ảnh

Làm điều này theo cách thủ công sẽ yêu cầu phải khớp màu sắc và độ sáng của màu bắt đầu một cách rõ ràng

4. 4. 1. Các thành phần màu “bất lực”

Các cú pháp màu riêng lẻ có thể chỉ định rằng, trong một số trường hợp, một thành phần nhất định trong cú pháp của chúng trở thành một thành phần màu bất lực. Điều này chỉ ra rằng giá trị của thành phần không ảnh hưởng đến màu được hiển thị;

Ví dụ: trong hsl(), thành phần màu sắc bất lực khi thành phần bão hòa là 0%;

Nếu một thành phần không có điện được chỉ định thủ công, nó sẽ hoạt động như bình thường; . Tuy nhiên, nếu một màu được tự động tạo ra bởi quá trình chuyển đổi không gian màu, thì bất kỳ thành phần không có năng lượng nào trong kết quả phải được đặt thành thiếu thay vì bất kỳ giá trị nào được tạo ra bởi quá trình chuyển đổi

Tác nhân người dùng có thể coi một thành phần là bất lực nếu màu "đủ gần" với các điều kiện chính xác được chỉ định. Ví dụ: màu xám được chuyển đổi thành lch() có thể, do lỗi số, có sắc độ cực nhỏ thay vì chính xác 0%; . Nó cố ý không xác định chính xác "đủ gần" nghĩa là gì cho mục đích này

5. Màu sRGB

Màu CSS trong không gian màu sRGB được thể hiện bằng bộ ba giá trị—đỏ, lục và lam—xác định một điểm trong không gian màu sRGB [SRGB]. Đây là không gian màu độc lập với thiết bị được quốc tế công nhận và do đó rất hữu ích để chỉ định màu sẽ hiển thị trên màn hình máy tính nhưng cũng hữu ích để chỉ định màu trên các loại thiết bị khác, chẳng hạn như máy in

CSS cũng cho phép sử dụng không gian màu không phải sRGB, như được mô tả trong §10 Không gian màu được xác định trước

CSS cung cấp một số phương pháp chỉ định trực tiếp màu sRGB. màu hex, hàm màu rgb()/rgba(), hàm màu hsl()/hsla(), hàm màu hwb(), màu được đặt tên và từ khóa trong suốt

5. 1. Các chức năng RGB. rgb() và rgba()

Hàm rgb() xác định màu sRGB bằng cách chỉ định trực tiếp các kênh màu đỏ, lục và lam. Cú pháp của nó là

 color(prophoto-rgb 0.88 0.45 0.10)

0Bài kiểm tra

Ba đối số đầu tiên chỉ định các kênh màu đỏ, lục và lam tương ứng. 0% biểu thị giá trị tối thiểu cho kênh màu đó trong gam sRGB và 100% biểu thị giá trị tối đa. A tương đương với a , nhưng với phạm vi khác. 0 lại đại diện cho giá trị tối thiểu cho kênh màu, nhưng 255 đại diện cho giá trị tối đa. Các giá trị này xuất phát từ thực tế là nhiều công cụ đồ họa lưu trữ các kênh màu bên trong dưới dạng một byte đơn, có thể chứa các số nguyên trong khoảng từ 0 đến 255. Việc triển khai phải tôn trọng độ chính xác của kênh như tác giả hoặc tính toán bất cứ khi nào có thể. Nếu điều này là không thể, kênh sẽ được làm tròn về phía +∞

Đối số cuối cùng, chỉ định alpha của màu. Nếu bỏ qua, nó mặc định là 100%

bài kiểm tra

Các giá trị bên ngoài các phạm vi này không phải là không hợp lệ, nhưng được kẹp vào các phạm vi được xác định ở đây tại thời điểm giá trị được tính toán

Vì các lý do cũ, rgb() cũng hỗ trợ cú pháp màu cũ phân tách tất cả các đối số của nó bằng dấu phẩy

 color(prophoto-rgb 0.88 0.45 0.10)

0

Ngoài ra, một cú pháp màu kế thừa rgba() cũng tồn tại, với ngữ pháp và hành vi giống hệt với rgb()

bài kiểm tra

5. 2. Ký hiệu thập lục phân RGB. #RRGGBB

Ký hiệu màu hex CSS cho phép chỉ định màu sRGB bằng cách cung cấp cho các kênh dưới dạng số thập lục phân, tương tự như cách màu thường được viết trực tiếp trong mã máy tính. Nó cũng ngắn hơn so với việc viết cùng một màu trong ký hiệu rgb()

Cú pháp của a là một mã thông báo có giá trị bao gồm 3, 4, 6 hoặc 8 chữ số thập lục phân. Nói cách khác, màu hex được viết dưới dạng ký tự băm, "#", theo sau là một số chữ số 0-9 hoặc chữ cái a-f (trường hợp các chữ cái không quan trọng - #00ff00 giống với #00FF00)

Số chữ số hex đã cho xác định cách giải mã ký hiệu hex thành màu RGB

6 chữ sốCặp chữ số đầu tiên, được hiểu là số thập lục phân, chỉ định kênh màu đỏ, trong đó 00 biểu thị giá trị tối thiểu và ff (255 ở dạng thập phân) biểu thị giá trị tối đa. Cặp chữ số tiếp theo, được giải thích theo cách tương tự, chỉ định kênh màu xanh lá cây và cặp cuối cùng chỉ định màu xanh lam. Kênh alpha của màu hoàn toàn mờ đục

Nói cách khác, #00ff00 biểu thị cùng màu với rgb(0 255 0) (màu xanh lá chanh)

8 chữ số6 chữ số đầu tiên được hiểu giống như ký hiệu 6 chữ số. Cặp chữ số cuối cùng, được hiểu là số thập lục phân, chỉ định kênh alpha của màu, trong đó 00 biểu thị màu hoàn toàn trong suốt và ff biểu thị màu hoàn toàn mờ đục

Nói cách khác, #0000ffcc biểu thị cùng màu với rgb(0 0 100%/80%) (màu xanh hơi trong suốt)

3 chữ sốĐây là biến thể ngắn hơn của ký hiệu 6 chữ số. Chữ số đầu tiên, được hiểu là số thập lục phân, chỉ định kênh màu đỏ, trong đó 0 đại diện cho giá trị nhỏ nhất và f đại diện cho giá trị lớn nhất. Hai chữ số tiếp theo lần lượt biểu thị các kênh màu xanh lục và xanh lam theo cách tương tự. Kênh alpha của màu hoàn toàn mờ đục

Cú pháp này thường được giải thích bằng cách nói rằng nó giống với ký hiệu 6 chữ số có được bằng cách "nhân đôi" tất cả các chữ số. Ví dụ: ký hiệu #123 chỉ định cùng màu với ký hiệu #112233. Phương pháp chỉ định màu này có "độ phân giải" thấp hơn so với ký hiệu 6 chữ số;

4 chữ sốĐây là biến thể ngắn hơn của ký hiệu 8 chữ số, được "mở rộng" giống như cách ký hiệu 3 chữ số. Chữ số đầu tiên, được hiểu là số thập lục phân, chỉ định kênh màu đỏ, trong đó 0 đại diện cho giá trị nhỏ nhất và f đại diện cho giá trị lớn nhất. Ba chữ số tiếp theo tương ứng là các kênh màu lục, lam và alpha. bài kiểm tra

6. từ khóa màu

Ngoài các cú pháp số khác nhau cho s, CSS xác định một số bộ từ khóa màu có thể được sử dụng thay thế—mỗi bộ có lợi thế hoặc trường hợp sử dụng riêng

6. 1. Màu sắc được đặt tên

CSS xác định một tập hợp lớn các màu được đặt tên để các màu phổ biến có thể được viết và đọc dễ dàng hơn. A được viết dưới dạng an , được chấp nhận ở mọi nơi a là. Như thường lệ đối với các định nghĩa CSS, tất cả các từ khóa này đều không phân biệt chữ hoa chữ thường ASCII

Tên phân giải thành màu trong sRGB

16 màu được đặt tên của CSS ban đầu đến từ bảng màu VGA và sau đó được đưa vào HTML. nước, đen, xanh dương, hoa vân anh, xám, xanh lá cây, vôi, màu hạt dẻ, hải quân, ô liu, tím, đỏ, bạc, mòng két, trắng và vàng. Hầu hết phần còn lại đến từ một phiên bản của hệ màu X11, được sử dụng trong các hệ thống có nguồn gốc Unix để chỉ định màu cho bảng điều khiển và sau đó được đưa vào SVG

Ghi chú. những tên màu này được tiêu chuẩn hóa ở đây, không phải vì chúng tốt mà vì việc sử dụng và triển khai chúng đã phổ biến trong nhiều thập kỷ và tiêu chuẩn cần phản ánh thực tế. Thật vậy, thật khó để tưởng tượng mỗi cái tên sẽ trông như thế nào (do đó có danh sách dưới đây); . Vì vậy, việc sử dụng chúng không được khuyến khích

(Hai giá trị màu đặc biệt, trong suốt và màu hiện tại, được xác định đặc biệt trong phần riêng của chúng. )

Bảng sau đây xác định tất cả các màu có tên mờ, bằng cách đưa ra các thông số kỹ thuật số tương đương trong các cú pháp màu khác

NamedNumericColor nameHex rgbDecimalaliceblue#f0f8ff240 248 255antiquewhite#faebd7250 235 215aqua#00ffff0 255 255aquamarine#7fffd4127 255 212azure#f0ffff240 255 255beige#f5f5dc245 245 220bisque#ffe4c4255 228 196black#0000000 0 0blanchedalmond#ffebcd255 235 205blue#0000ff0 0 255blueviolet#8a2be2138 43 226brown#a52a2a165 42

Ghi chú. danh sách các màu này và định nghĩa của chúng là tập hợp lớn nhất của danh sách các màu được đặt tên được xác định bởi SVG 1. 1

Vì lý do lịch sử, đây còn được gọi là bộ màu X11

Ghi chú. Lịch sử của hệ màu X11 rất thú vị và đã được Alex Sexton tóm tắt một cách xuất sắc trong bài nói chuyện của anh ấy “Peachpuffs and Lemonchiffons”

bài kiểm tra

6. 2. Màu hệ thống

Nói chung, các từ khóa phản ánh các lựa chọn màu mặc định do người dùng, trình duyệt hoặc HĐH thực hiện. Chúng thường được sử dụng trong biểu định kiểu mặc định của trình duyệt, vì lý do này

Để duy trì mức độ dễ đọc, các từ khóa cũng phản ứng với các thay đổi ở chế độ sáng hoặc chế độ tối

Tuy nhiên, ở chế độ màu bắt buộc, hầu hết các màu trên trang bị buộc vào một bảng màu hạn chế, do người dùng chọn. Các từ khóa hiển thị các màu do người dùng chọn này để phần còn lại của trang có thể tích hợp với bảng màu hạn chế này

Khi tính năng phương tiện ép màu đang hoạt động, tác giả nên sử dụng các từ khóa làm giá trị màu trong các thuộc tính khác với các thuộc tính được liệt kê trong Điều chỉnh màu CSS §3. 1 Thuộc tính bị ảnh hưởng bởi Chế độ màu bắt buộc, để đảm bảo tính dễ đọc và nhất quán trên trang và tránh sự nhầm lẫn không phối hợp giữa màu do người dùng bắt buộc và màu do trang chọn

bài kiểm tra

Khi các giá trị của từ khóa đến từ trình duyệt, (trái ngược với mặc định của hệ điều hành hoặc lựa chọn của người dùng), trình duyệt phải đảm bảo rằng các cặp nền trước/nền phù hợp có độ tương phản WCAG AA tối thiểu. Tuy nhiên, các tùy chọn của người dùng (đối với độ tương phản cao hơn hoặc thấp hơn), cho dù được đặt làm tùy chọn trình duyệt, biểu định kiểu người dùng hay bằng cách thay đổi các giá trị mặc định của hệ điều hành, đều phải được ưu tiên hơn yêu cầu này

Tác giả cũng có thể sử dụng các từ khóa này bất cứ lúc nào, nhưng nên cẩn thận khi sử dụng màu sắc trong các cặp nền-tiền cảnh phù hợp để đảm bảo độ tương phản phù hợp, vì bất kỳ mối quan hệ tương phản cụ thể nào giữa các cặp không phù hợp (e. g. Canvas và ButtonText) không được đảm bảo

Các từ khóa được xác định như sau

Canvas Nền của nội dung hoặc tài liệu ứng dụng. CanvasText Văn bản trong tài liệu hoặc nội dung ứng dụng. LinkText Văn bản trong các liên kết không hoạt động, không được truy cập. Đối với nền sáng, màu xanh truyền thống. VisitedText Văn bản trong các liên kết đã truy cập. Đối với nền sáng, màu tím truyền thống. ActiveText Văn bản trong liên kết hoạt động. Đối với nền sáng, màu đỏ truyền thống. ButtonFace Màu nền của khuôn mặt cho các nút ấn. ButtonText Văn bản trên các nút ấn. ButtonBorder Màu viền cơ bản cho các nút ấn. Trường Nền của trường nhập. FieldText Văn bản trong các trường nhập. Đánh dấu Nền của văn bản đã chọn, ví dụ từ. lựa chọn. Văn bản nổi bật Văn bản của văn bản đã chọn. Mục đã chọn Nền của các mục đã chọn, ví dụ: hộp kiểm đã chọn. SelectedItemText Văn bản của các mục đã chọn. Đánh dấu Nền của văn bản đã được đánh dấu đặc biệt (chẳng hạn như bởi phần tử HTML

rgba(100%, 0%, 0%, 0.5)

1). MarkText Văn bản đã được đánh dấu đặc biệt (chẳng hạn như bởi phần tử HTML

rgba(100%, 0%, 0%, 0.5)

1). GrayText Văn bản bị vô hiệu hóa. (Thường xuyên, nhưng không nhất thiết, màu xám. )Màu nền Nền của các điều khiển giao diện người dùng có dấu. AccentColorText Văn bản điều khiển giao diện người dùng có dấu. bài kiểm tra

Ghi chú. Như với tất cả các từ khóa khác, những tên này không phân biệt chữ hoa chữ thường ASCII. Chúng được hiển thị ở đây với cách viết hoa hỗn hợp để dễ đọc

Đối với các hệ thống không có khái niệm giao diện người dùng hệ thống cụ thể, giá trị đã chỉ định phải được ánh xạ tới giá trị màu hệ thống có liên quan chặt chẽ nhất tồn tại. Các cặp màu hệ thống sau đây dự kiến ​​sẽ tạo thành các màu nền trước dễ đọc

Ngoài ra, GrayText dự kiến ​​​​sẽ có thể đọc được, mặc dù có thể ở mức độ tương phản thấp hơn, trên bất kỳ hình nền nào

Ví dụ: sự kết hợp màu hệ thống trong trình duyệt bạn hiện đang sử dụng

Canvas với CanvasText. CanvasVăn bản

Canvas với LinkText. Văn bản liên kết

Canvas với VisitedText. Văn bản đã truy cập

Canvas với ActiveText. ActiveText

Canvas với GrayText. văn bản màu xám

Canvas có ButtonBorder và Canvas liền kề. CanvasVăn BảnLiền kề

ButtonFace với ButtonText. Nút văn bản

ButtonFace với ButtonText và ButtonBorder. Nút văn bản

ButtonFace với GrayText. văn bản màu xám

Trường có FieldText. trường văn bản

Trường có GrayText. văn bản màu xám

Đánh dấu bằng MarkText. đánh dấu văn bản

Đánh dấu bằng GrayText. văn bản màu xám

Đánh dấu bằng HighlightText. Văn bản nổi bật

Đánh dấu bằng GrayText. văn bản màu xám

SelectedItem với văn bản SelectedItem. SelectedItemText

AccentColor với AccentColorText. Điểm NhấnMàuVăn Bản

AccentColor với GrayText. văn bản màu xám

Các phiên bản trước của CSS đã xác định các s bổ sung, từ đó không được dùng nữa. Chúng được ghi lại trong Phụ lục A. Màu hệ thống CSS không dùng nữa

Ghi chú. Họ phát sinh một số rủi ro về quyền riêng tư và bảo mật, như được trình bày chi tiết trong §20 Cân nhắc về quyền riêng tư và §19 Cân nhắc về bảo mật

Từ khóa trong suốt chỉ định màu đen trong suốt. Nó là một loại

bài kiểm tra

Từ khóa currentcolor đại diện cho giá trị của thuộc tính màu trên cùng một phần tử. Không giống như s, nó không bị giới hạn ở sRGB; . Các giá trị được sử dụng của nó được xác định bằng cách phân giải các giá trị màu

bài kiểm tra

Đây là một ví dụ đơn giản cho thấy cách sử dụng từ khóa màu hiện tại.

 color(prophoto-rgb 0.88 0.45 0.10)

1

Điều này tương đương với việc viết

 color(prophoto-rgb 0.88 0.45 0.10)

2

Ví dụ: thuộc tính text-emphasis-color [CSS3-TEXT-DECOR], có giá trị ban đầu là màu hiện tại, theo mặc định khớp với màu văn bản ngay cả khi thuộc tính màu thay đổi giữa các phần tử.

 color(prophoto-rgb 0.88 0.45 0.10)

3

Trong ví dụ trên, các dấu nhấn mạnh có màu đen trên văn bản "Some" và "văn bản được nhấn mạnh", nhưng có màu đỏ trên văn bản "really"

Ghi chú. Các từ khóa nhiều từ trong CSS thường phân tách các từ thành phần của chúng bằng dấu gạch nối. màu hiện tại thì không, bởi vì (thở sâu) ban đầu nó được giới thiệu trong SVG dưới dạng giá trị thuộc tính, "màu hiện tại" với cách viết CSS thông thường. Nó (cùng với tất cả các thuộc tính khác và giá trị của chúng) sau đó trở thành các thuộc tính trình bày và giá trị thuộc tính, cũng như các thuộc tính, để tạo ra XSLT dễ dàng hơn. Sau đó, tất cả các thuộc tính bản trình bày đã được thay đổi từ gạch nối thành camelCase, vì DOM gặp sự cố với dấu gạch nối có nghĩa là "dấu trừ". Nhưng sau đó, họ không tuân theo các quy ước CSS nữa nên tất cả các thuộc tính và giá trị thuộc tính vốn là một phần của CSS đã được đổi lại thành gạch nối. currentcolor không phải là một phần của CSS vào thời điểm đó, vì vậy vẫn còn camelCased. Mãi sau này, CSS mới chọn nó, tại thời điểm đó, việc viết hoa không còn quan trọng nữa, vì các từ khóa CSS không phân biệt chữ hoa chữ thường ASCII

7. Màu sắc HSL. Hàm hsl() và hsla()

Hệ thống RGB để chỉ định màu sắc, trong khi thuận tiện cho máy móc và thư viện đồ họa, thường được coi là rất khó để con người nắm bắt trực quan. Chẳng hạn, không dễ để biết cách thay đổi màu RGB để tạo ra một biến thể sáng hơn của cùng một màu

Có thể có một số cách phối màu khác. Một trong số đó là bảng màu HSL [HSL], sử dụng trực quan hơn nhiều nhưng vẫn dễ dàng ánh xạ trở lại màu RGB

Màu HSL được chỉ định là bộ ba màu sắc, độ bão hòa và độ sáng. Cú pháp của hàm hsl() là

 color(prophoto-rgb 0.88 0.45 0.10)

4Bài kiểm tra

Đối số đầu tiên chỉ định góc hue

Trong HSL (và HWB), góc 0deg biểu thị màu đỏ chính sRGB (cũng như 360deg, 720deg, v.v. ) và phần còn lại của các màu được trải đều xung quanh vòng tròn, vì vậy 120 độ đại diện cho màu xanh lục chính sRGB, 240 độ đại diện cho màu xanh lam chính sRGB, v.v.

Hai đối số tiếp theo lần lượt là độ bão hòa và độ sáng. Đối với độ bão hòa, 100% là màu sáng, bão hòa hoàn toàn và 0% là màu xám không bão hòa hoàn toàn. Đối với độ sáng, 50% đại diện cho màu "bình thường", trong khi 100% là màu trắng và 0% là màu đen. Nếu độ bão hòa hoặc độ sáng nhỏ hơn 0% hoặc lớn hơn 100%, chúng sẽ được cố định với các giá trị đó tại thời điểm giá trị được tính toán, trước khi được chuyển đổi thành màu sRGB

Đối số cuối cùng chỉ định kênh alpha của màu. Nó được giải thích giống hệt với đối số thứ tư của hàm rgb(). Nếu bỏ qua, nó mặc định là 100%

Màu HSL phân giải thành sRGB

Nếu độ bão hòa của màu HSL là 0%, thì thành phần màu sắc bất lực. Nếu độ sáng của màu HSL là 0% hoặc 100%, thì cả hai thành phần bão hòa và màu sắc đều bất lực

Ví dụ: màu đỏ thông thường, cùng màu mà bạn sẽ thấy từ từ khóa  màu đỏ hoặc ký hiệu hex  #f00, được thể hiện trong HSL là  hsl(0deg 100% 50%)

Một lợi thế của HSL so với RGB là nó trực quan hơn. mọi người có thể đoán màu họ muốn, sau đó điều chỉnh

Ví dụ: tất cả các màu sau đây đều có thể được tạo ra từ màu "xanh lá cây" cơ bản, chỉ bằng cách thay đổi hai đối số còn lại.

 color(prophoto-rgb 0.88 0.45 0.10)

5

Một lợi thế của HSL so với LCH là, bất kể thao tác như thế nào, kết quả luôn nằm trong gam màu sRGB. Một nhược điểm của HSL so với LCH là thao tác tô màu làm thay đổi độ đậm nhạt của hình ảnh và các màu không cách đều nhau

Do đó, trong HSL, việc tạo các tập hợp màu phù hợp sẽ dễ dàng hơn (bằng cách giữ nguyên màu sắc và thay đổi độ bão hòa và độ sáng), so với thao tác với các giá trị thành phần sRGB;

Ví dụ:  màu xanh lam được thể hiện trong HSL là  hsl(240deg 100% 50%) trong khi  màu vàng là  hsl(60deg 100% 50%). Cả hai đều có Độ sáng HSL là 50%, nhưng rõ ràng màu vàng trông nhạt hơn nhiều so với màu xanh lam

Trong LCH, màu xanh lam sRGB là  lch(29. 6% 131. 2 301. 3) trong khi màu vàng sRGB là  lch(97. 6% 94. 7 99. 6). Độ sáng LCH là 29. 6% và 97. 6% phản ánh rõ ràng độ đậm nhạt của hai màu

Góc màu sắc trong HSL không đồng nhất về mặt nhận thức;

Ví dụ: cặp màu sắc  hsl(220deg 100% 50%) và  hsl(250deg 100% 50%) có chênh lệch màu HSL là 250-220 = 30deg và trông khá giống nhau, trong khi một cặp màu khác  hsl(50deg 100%

Trong LCH, cùng một cặp màu  lch(42. 1% 97. 4 290. 6) và  lch(30. 8% 129. 7 302. 1) có chênh lệch màu sắc là 302. 1-290. 6 = 11. 5deg trong khi cặp thứ hai lch(86. 8% 86. 2 87. 3) và  lch(92. 0% 98. 8 119. 1) có chênh lệch màu sắc là 119. 1-87. 3 = 31. 8deg, phản ánh chính xác sự phân tách màu sắc trực quan

Vì các lý do cũ, hsl() cũng hỗ trợ cú pháp màu cũ phân tách tất cả các đối số của nó bằng dấu phẩy

 color(prophoto-rgb 0.88 0.45 0.10)

6

Ngoài ra, một cú pháp màu kế thừa hsla() cũng tồn tại, với ngữ pháp và hành vi giống hệt với hsl()

bài kiểm tra

7. 1. Chuyển đổi màu HSL sang sRGB

Chuyển đổi màu HSL thành sRGB đơn giản về mặt toán học. Đây là triển khai mẫu của thuật toán chuyển đổi trong JavaScript. Nó trả về một mảng gồm ba số đại diện cho các kênh màu đỏ, lục và lam, được chuẩn hóa thành phạm vi [0, 1]

 color(prophoto-rgb 0.88 0.45 0.10)

7

7. 2. Chuyển đổi màu sRGB sang HSL

Chuyển đổi theo hướng ngược lại tiến hành tương tự

 color(prophoto-rgb 0.88 0.45 0.10)

8

7. 3. Ví dụ về màu HSL

Các bảng dưới đây minh họa một loạt các màu HSL có thể. Mỗi bảng đại diện cho một sắc độ, được chọn cách nhau 30°, để minh họa các sắc độ "lõi" phổ biến. đỏ, vàng, lục, lam, lam, đỏ tươi và sáu màu trung gian giữa các màu này

Trong mỗi bảng, trục X biểu thị độ bão hòa trong khi trục Y biểu thị độ sáng

0° Đỏ100%80%60%40%20%0%100%90%80%70%60%50%40%30%20%10%0%30° Đỏ-Vàng (=Cam)100%80%60

8. Màu HWB. hàm hwb()

HWB (viết tắt của Hue-Whiteness-Blackness) [HWB] là một phương pháp khác để xác định màu sRGB, tương tự như HSL', nhưng con người thường dễ làm việc hơn. Nó mô tả các màu với sắc độ bắt đầu, sau đó là mức độ trắng và đen để trộn vào sắc độ cơ bản đó

Nhiều bộ chọn màu dựa trên hệ thống màu HWB, do tính trực giác của nó

Màu HWB phân giải thành sRGB

Đây là ảnh chụp màn hình bộ chọn màu của Chrome, được hiển thị khi người dùng kích hoạt

rgba(100%, 0%, 0%, 0.5)

3. Bánh xe bên ngoài được sử dụng để chọn màu sắc, sau đó lượng màu trắng và đen tương đối được chọn bằng cách nhấp vào hình tam giác bên trong

Cú pháp của hàm hwb() là

 color(prophoto-rgb 0.88 0.45 0.10)

9

Đối số đầu tiên chỉ định màu sắc và được hiểu giống hệt với hsl()

Đối số thứ hai chỉ định lượng màu trắng để trộn vào, theo tỷ lệ phần trăm từ 0% (không có độ trắng) đến 100% (độ trắng hoàn toàn). Tương tự, đối số thứ ba chỉ định lượng màu đen để trộn vào, cũng từ 0% (không có màu đen) đến 100% (màu đen hoàn toàn). Các giá trị bên ngoài các phạm vi này không phải là không hợp lệ, nhưng được kẹp vào các phạm vi được xác định ở đây tại thời điểm giá trị được tính toán. Nếu tổng của hai đối số này lớn hơn 100%, thì tại thời điểm giá trị được tính toán, chúng sẽ được chuẩn hóa thêm để cộng thành 100%, với cùng tỷ lệ tương đối

Đối số thứ tư chỉ định kênh alpha của màu. Nó được giải thích giống hệt với đối số thứ tư của hàm rgb(). Nếu bỏ qua, nó mặc định là 100%

Về mặt khái niệm, màu thu được có thể được coi là hỗn hợp của sơn trong màu sắc đã chọn, sơn trắng và sơn đen, với số lượng tương đối của mỗi loại được xác định theo tỷ lệ phần trăm. Nếu trắng+đen bằng 100% (sau khi chuẩn hóa), nó xác định một màu tiêu sắc, tôi. e. một số màu xám, không có bất kỳ gợi ý nào về màu sắc đã chọn. Trong trường hợp này, thành phần màu sắc bất lực

Không có vấn đề về khả năng tương thích Web với hwb, đây là tính năng mới ở cấp đặc tả này và vì vậy hwb() không hỗ trợ cú pháp màu kế thừa phân tách tất cả các đối số của nó bằng dấu phẩy. Sử dụng dấu phẩy bên trong hwb() là một lỗi

bài kiểm tra

8. 1. Chuyển đổi màu HWB sang sRGB

Chuyển đổi màu HWB thành sRGB rất đơn giản và liên quan đến cách chuyển đổi HSL thành RGB. Việc triển khai Javascript sau đây của thuật toán trước tiên sẽ chuẩn hóa các thành phần trắng và đen, vì vậy tổng của chúng không lớn hơn 100%

 color(display-p3 1.0844 0.43 0.1)

0

8. 2. Chuyển đổi màu sRGB sang HWB

Chuyển đổi theo hướng ngược lại tiến hành tương tự

 color(display-p3 1.0844 0.43 0.1)

1

8. 3. Ví dụ về màu HWB

0° ĐỏW\B0%20%40%60%80%100%0%20%40%60%80%100%30° Đỏ-Vàng (Cam)W\B0%20%40%60%80%100%

9. Màu sắc độc lập với thiết bị. CIE Lab và LCH, Oklab và Oklch

9. 1. Phòng thí nghiệm CIE và LCH

Các phép đo vật lý của một màu thường được thể hiện trong không gian màu CIE L*a*b* [CIELAB], được CIE tạo ra vào năm 1976 và thường được gọi đơn giản là Lab. Chuyển đổi màu từ thiết bị này sang thiết bị khác cũng có thể sử dụng Lab làm bước trung gian. Bắt nguồn từ các thí nghiệm về thị giác của con người, Lab đại diện cho toàn bộ dải màu mà con người có thể nhìn thấy

Phòng thí nghiệm là một hệ tọa độ hình chữ nhật với trục Độ sáng trung tâm. Giá trị này thường được viết dưới dạng một số không có đơn vị; . 100% có nghĩa là giá trị L là 100, không phải 1. 0. L=0% là màu đen sâu (hoàn toàn không có ánh sáng) trong khi L=100% là màu trắng khuếch tán

Các giá trị của L lớn hơn 100 sẽ tương ứng với các điểm nổi bật đặc trưng, ​​nhưng màu chính xác của chúng không được xác định trong thông số kỹ thuật này. Thật hữu ích, L=50% có màu xám trung bình, theo thiết kế và các khoảng tăng bằng nhau trong L được đặt cách đều nhau về mặt trực quan. không gian màu Lab nhằm mục đích đồng nhất về mặt nhận thức

Hình này hiển thị trục Độ sáng của không gian màu CIE Lab. Hai mươi mốt mẫu màu trung tính được hiển thị (L=0%, L=5%, đến L=100%). Các bước cách đều nhau, trực quan

Các trục a và b truyền đạt màu sắc; . Tương tự, các giá trị dương dọc theo trục b có màu vàng và âm là màu xanh dương/tím bổ sung. Các màu khử bão hòa có các giá trị nhỏ của a và b và gần với trục L;

Đèn chiếu sáng có màu trắng D50, quang phổ ánh sáng ban ngày được tiêu chuẩn hóa với nhiệt độ màu 5000K, được phản xạ bởi một gương phản xạ khuếch tán hoàn hảo; . D50 cũng là điểm trắng được sử dụng cho không gian kết nối cấu hình trong chuyển đổi màu ICC, điểm trắng được sử dụng trong trình chỉnh sửa hình ảnh cung cấp tính năng chỉnh sửa trong Phòng thí nghiệm và giá trị được sử dụng bởi các thiết bị đo lường vật lý như máy đo quang phổ và máy đo bức xạ quang phổ khi chúng báo cáo các màu đo được trong Phòng thí nghiệm

Chuyển đổi từ các màu được chỉ định bằng cách sử dụng các điểm trắng khác được gọi là chuyển đổi thích ứng màu, mô hình hóa các thay đổi trong hệ thống thị giác của con người khi chúng ta thích nghi với điều kiện ánh sáng mới. Thuật toán Bradford [Bradford-CAT] là phép biến đổi thích ứng màu tiêu chuẩn của ngành và rất dễ tính toán vì đây là phép nhân ma trận đơn giản

CIE LCH có cùng trục L với Lab, nhưng sử dụng tọa độ cực C (sắc độ) và H (sắc độ), biến nó thành một hệ tọa độ cực, hình trụ. C là khoảng cách hình học từ trục L và H là góc từ trục a dương về phía trục b dương

Hình này cho thấy mặt phẳng L=50 của không gian màu CIE Lab. Gia số 20 độ trong CIE LCH được hiển thị dưới dạng vòng tròn ở ba cấp độ Sắc độ. 20, 40 và 60. Tất cả 20 màu Chroma đều nằm trong gam sRGB, một số màu 40 và 60 Chroma nằm bên ngoài. Những màu nằm ngoài gam màu này được hiển thị dưới dạng màu xám, với nét cảnh báo bên ngoài màu đỏ

Ghi chú. Trục Lightness trong Lab và LCH không bị nhầm lẫn với trục L trong HSL. Ví dụ: trong HSL, các màu sRGB xanh dương (#00F) và vàng (#FF0) có cùng giá trị L (50%) mặc dù về mặt trực quan, màu xanh lam đậm hơn nhiều. Điều này rõ ràng hơn nhiều trong Lab. sRGB blue là phòng thí nghiệm (29. 567% 68. 298 -112. 0294) trong khi màu vàng sRGB là phòng thí nghiệm (97. 607% -15. 753 93. 388). Trong Phòng thí nghiệm và LCH, nếu hai màu có cùng giá trị L đo được, thì chúng có độ đậm nhạt giống hệt nhau. HSL và các mô hình RGB cực có liên quan đã được phát triển nhằm cố gắng mang lại lợi ích về khả năng sử dụng tương tự cho RGB mà LCH đã cung cấp cho Phòng thí nghiệm, nhưng kém chính xác hơn đáng kể

Mặc dù việc sử dụng CIE Lab và LCH phổ biến, nhưng nó được biết là có một số vấn đề. Đặc biệt

Độ tuyến tính của sắc độ Trong vùng màu lam (LCH Sắc độ từ 270° đến 330°), sắc độ thị giác khác với những gì LCH dự đoán. Vẽ một tập hợp các màu xanh lam có cùng sắc độ và Sắc độ khác nhau, nằm trên một đường thẳng từ trục trung tính, thay vào đó tạo thành một đường cong. Nói cách khác, vì màu xanh lam bão hòa có Chroma giảm dần, nó trở thành màu tím rõ rệt. Tính đồng nhất của sắc độ Mặc dù các sắc độ trong LCH nói chung có khoảng cách đều nhau (và tốt hơn nhiều so với HSL hoặc HWB), tính đồng nhất không hoàn hảo. Dự đoán quá mức về sự khác biệt về Sắc độ cao Đối với các màu có Sắc độ cao, các thay đổi về Sắc độ ít được chú ý hơn so với các màu trung tính hơn

Ví dụ, những thiếu sót này ảnh hưởng đến việc tạo ra các dải màu cách đều nhau, ánh xạ gam màu từ một không gian màu này sang một không gian màu nhỏ hơn và tính toán sự khác biệt trực quan giữa hai màu

Để bù đắp cho điều này, công thức dự đoán sự khác biệt trực quan giữa hai màu (delta E) đã được thực hiện chính xác hơn theo thời gian (nhưng cũng phức tạp hơn nhiều để tính toán). Công thức tiêu chuẩn ngành hiện tại, delta E 2000, hoạt động tốt để giảm thiểu một số vấn đề về Phòng thí nghiệm và LCH. Một triển khai mẫu được đưa ra trong §18. 1 ΔE2000

Tuy nhiên, điều này không giúp ích gì cho độ cong màu sắc

9. 2. Oklab và Oklch

Gần đây, Oklab, một không gian giống như Phòng thí nghiệm cải tiến đã được phát triển [Oklab]. Dạng cực tương ứng được gọi là Oklch. Nó được tạo ra bằng cách tối ưu hóa bằng số của một tập dữ liệu lớn có màu sắc tương tự trực quan và đã cải thiện độ tuyến tính của màu sắc, độ đồng nhất của màu sắc và độ đồng nhất của sắc độ so với CIE LCH

Giống như CIE Lab, có một trục độ sáng trung tâm thường được viết dưới dạng một số không có đơn vị trong phạm vi [0,1]; . 100% có nghĩa là giá trị L là 1. 0. L=0% là màu đen sâu (hoàn toàn không có ánh sáng) trong khi L=100% là màu trắng khuếch tán

Ghi chú. Không giống như CIE Lab giả định thích ứng với màu trắng khuếch tán, Oklab giả định thích ứng với màu được xác định, nhằm mục đích làm cho nó không thay đổi tỷ lệ

Như với CIE Lab, trục a và b truyền đạt màu sắc; . Tương tự, các giá trị dương dọc theo trục b có màu vàng và âm là màu xanh dương/tím bổ sung

Đèn chiếu sáng là D65, điểm trắng giống như hầu hết các không gian màu RGB

Oklch có cùng trục L với Oklab, nhưng sử dụng tọa độ cực C (sắc độ) và H (sắc độ)

Ghi chú. Không giống như CIE LCH, nơi Chroma có thể đạt giá trị từ 200 trở lên, Oklch Chroma nằm trong khoảng 0. 5 hoặc hơn. Các góc sắc độ giữa CIE LCH và Oklch tương tự nhau, nhưng không giống nhau

Một lát màu CIE LCH không đổi, hiển thị gam màu sRGB xung quanh màu xanh lam chính. Một màu tím đáng chú ý là rõ ràng ngay lập tức. Một lát màu Oklch không đổi, hiển thị gam màu sRGB xung quanh màu xanh lam chính. Màu sắc hình ảnh không đổi.

Bởi vì Oklab đồng nhất hơn về mặt cảm quan, nên sự khác biệt về màu sắc là một khoảng cách đơn giản trong không gian 3D (tổng bình phương). Mặc dù tầm thường, nhưng việc triển khai mẫu được đưa ra trong §18. 2 ∆EOK

9. 3. Chỉ định Lab và LCH. ký hiệu chức năng lab() và lch()

CSS cho phép màu sắc được thể hiện trực tiếp trong Lab và LCH

 color(display-p3 1.0844 0.43 0.1)

2Phần trăm Được phép cho L, phạm vi tham chiếu a và bPhần trăm cho L. 0% = 0. 0, 100% = 100. 0
cho a và b. -100% = -125, 100% = 125Kiểm tra

Đối số đầu tiên chỉ định CIE Lightness. Đây là một số nằm trong khoảng từ 0% (đại diện cho màu đen) đến 100% (đại diện cho màu trắng), Các giá trị nhỏ hơn 0% phải được cố định thành 0% tại thời điểm giá trị được tính toán;

Đối số thứ hai và thứ ba là khoảng cách dọc theo trục "a" và "b" trong không gian màu Lab, như được mô tả trong phần trước. Các giá trị này được ký (cho phép cả giá trị dương và âm) và về mặt lý thuyết là không giới hạn (nhưng trong thực tế không vượt quá ±160)

Có một thành phần thứ tư tùy chọn, được phân tách bằng dấu gạch chéo, đại diện cho thành phần alpha

Nếu độ sáng của màu Lab là 0% hoặc 100% thì cả hai thành phần a và b đều bất lực và màu tương ứng là đen hoặc trắng

 color(display-p3 1.0844 0.43 0.1)

3

 color(display-p3 1.0844 0.43 0.1)

4Phần trăm Được phép cho L và phạm vi tham chiếu CPPhần trăm cho L. 0% = 0. 0, 100% = 100. 0
đối với C. 0% = 0, 100% = 150 lần kiểm tra

Đối số đầu tiên chỉ định Độ sáng của CIE, được hiểu giống hệt với đối số Độ sáng của lab()

Đối số thứ hai là sắc độ (đại diện cho "lượng màu"). Giá trị hữu ích tối thiểu của nó là 0, trong khi giá trị tối đa của nó về mặt lý thuyết là không giới hạn (nhưng trong thực tế không vượt quá 230). Nếu giá trị được cung cấp là âm, thì giá trị đó được cố định thành 0 tại thời điểm giá trị được tính toán

Đối số thứ ba là góc hue. Nó được giải thích tương tự như đối số của hsl(), nhưng không ánh xạ màu sắc tới các góc theo cùng một cách vì chúng cách đều nhau theo cảm nhận. Thay vào đó, 0deg chỉ dọc theo trục "a" dương (về phía đỏ tía), (cũng như 360deg, 720deg, v.v. );

Có một thành phần thứ tư tùy chọn, được phân tách bằng dấu gạch chéo, đại diện cho thành phần alpha

Nếu sắc độ của màu LCH là 0%, thành phần màu sắc bất lực. Nếu độ sáng của màu LCH là 0% hoặc 100%, thì cả hai thành phần sắc độ và sắc độ đều bất lực

 color(display-p3 1.0844 0.43 0.1)

5

Không có vấn đề về khả năng tương thích Web với lab hoặc lch', đây là những tính năng mới ở cấp độ đặc tả này và do đó, lab() và lch() không hỗ trợ cú pháp màu kế thừa phân tách tất cả các đối số của chúng bằng dấu phẩy. Sử dụng dấu phẩy bên trong các chức năng này là một lỗi

9. 4. Chỉ định Oklab và Oklch. ký hiệu chức năng oklab() và oklch()

CSS cho phép màu sắc được thể hiện trực tiếp trong Oklab và Oklch

 color(display-p3 1.0844 0.43 0.1)

6Phần trăm Được phép cho L, phạm vi tham chiếu a và bPhần trăm cho L. 0% = 0. 0, 100% = 1. 0
cho a và b. -100% = -0. 4, 100% = 0. 4Bài kiểm tra

Đối số đầu tiên chỉ định Oklab Lightness. Đây là một số giữa 0% (đại diện cho màu đen) và 100% (đại diện cho màu trắng)

Các giá trị nhỏ hơn 0% phải được cố định thành 0% tại thời điểm giá trị được tính toán;

Đối số thứ hai và thứ ba là khoảng cách dọc theo trục "a" và "b" trong không gian màu Oklab, như được mô tả trong phần trước. Các giá trị này được ký (cho phép cả giá trị dương và âm) và về mặt lý thuyết là không giới hạn (nhưng trong thực tế không vượt quá ±0. 5)

Có một thành phần thứ tư tùy chọn, được phân tách bằng dấu gạch chéo, đại diện cho thành phần alpha

Nếu độ sáng của màu Oklab là 0% hoặc 100%, thì cả hai thành phần a và b đều bất lực và màu tương ứng là đen hoặc trắng

 color(display-p3 1.0844 0.43 0.1)

7

 color(display-p3 1.0844 0.43 0.1)

8Phần trăm Được phép cho L và phạm vi tham chiếu CPPhần trăm cho L. 0% = 0. 0, 100% = 1. 0
đối với C. 0% = 0. 0 100% = 0. 4Bài kiểm tra

Đối số đầu tiên chỉ định Oklch Lightness, được hiểu giống hệt với đối số Lightness của oklab()

Đối số thứ hai là sắc độ. Giá trị hữu ích tối thiểu của nó là 0, trong khi giá trị tối đa của nó về mặt lý thuyết là không giới hạn (nhưng trong thực tế không vượt quá 0. 5). Nếu giá trị được cung cấp là âm, thì giá trị đó được cố định thành 0 tại thời điểm giá trị được tính toán

Đối số thứ ba là góc hue. Nó được giải thích tương tự như các đối số của hsl() và lch(), nhưng không ánh xạ màu sắc tới các góc theo cùng một cách. 0deg chỉ dọc theo trục "a" dương (về phía đỏ tía), (cũng như 360deg, 720deg, v.v. );

Có một thành phần thứ tư tùy chọn, được phân tách bằng dấu gạch chéo, đại diện cho thành phần alpha

Nếu sắc độ của màu Oklch là 0%, thành phần màu sắc bất lực. Nếu độ sáng của màu Oklch là 0% hoặc 100%, cả hai thành phần màu sắc và sắc độ đều bất lực

 color(display-p3 1.0844 0.43 0.1)

9

Không có vấn đề về khả năng tương thích Web với oklab hoặc oklch', đây là những tính năng mới ở cấp đặc tả này, vì vậy oklab() và oklch() không hỗ trợ cú pháp màu kế thừa phân tách tất cả các đối số của chúng bằng dấu phẩy. Sử dụng dấu phẩy bên trong các chức năng này là một lỗi

9. 5. Chuyển đổi màu Lab hoặc Oklab thành màu LCH hoặc Oklch

Chuyển đổi sang dạng cực là tầm thường

1. H = atan2(b, a)
2. C = sqrt(a^2 + b^2)
3. L là như nhau

Đối với các giá trị cực nhỏ của a và b (Sắc độ gần như bằng không), mặc dù màu trực quan không thay đổi so với trên trục trung tính, những thay đổi nhỏ đối với các giá trị có thể dẫn đến góc màu được báo cáo dao động dữ dội và về cơ bản là ngẫu nhiên. Trong CSS, điều này có nghĩa là màu sắc không có hiệu lực và được coi là thiếu khi được chuyển đổi thành LCH hoặc Oklch;

9. 6. Chuyển đổi màu LCH hoặc Oklch sang màu Lab hoặc Oklab

Chuyển đổi sang dạng hình chữ nhật là tầm thường

1. Nếu thiếu H thì a = b = 0
2. Nếu không thì,
3. L là như nhau

10. Không gian màu được xác định trước

CSS cung cấp một số không gian màu được xác định trước bao gồm display-p3 [Display-P3], là không gian gam màu rộng điển hình của các màn hình gam màu rộng hiện tại, prophoto-rgb, được sử dụng rộng rãi bởi các nhiếp ảnh gia và rec2020 [Rec. 2020], là tiêu chuẩn của ngành phát sóng, không gian gam màu cực rộng có khả năng thể hiện hầu hết tất cả các màu trong thế giới thực có thể nhìn thấy

10. 1. Chỉ định màu được xác định trước. hàm color()

Hàm color() cho phép một màu được chỉ định trong một không gian màu cụ thể, được chỉ định (chứ không phải không gian màu sRGB ẩn mà hầu hết các hàm màu khác hoạt động trong đó). Cú pháp của nó là

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

0Bài kiểm tra

Hàm màu lấy các tham số chỉ định một màu, trong một không gian màu được liệt kê rõ ràng

Nó đại diện cho một màu không hợp lệ, như được mô tả bên dưới hoặc một màu hợp lệ

Các tham số có dạng sau

Màu nằm ngoài gam màu có giá trị thành phần nhỏ hơn 0 hoặc 0% hoặc lớn hơn 1 hoặc 100%. Đây không phải là không hợp lệ và được giữ lại cho các tính toán trung gian;

bài kiểm tra

Không có vấn đề về khả năng tương thích Web với color(), đây là tính năng mới ở cấp đặc tả này và vì vậy color() không hỗ trợ cú pháp màu kế thừa phân tách tất cả các đối số của nó bằng dấu phẩy. Sử dụng dấu phẩy bên trong chức năng này là một lỗi

Không thể hiển thị màu không hợp lệ hoặc màu ngoài gam màu

Nếu màu được chỉ định có thể được hiển thị (nghĩa là màu đó không phải là màu không hợp lệ và không nằm ngoài gam màu) thì đây là giá trị thực của hàm color()

Nếu màu đã chỉ định là màu hợp lệ nhưng không thể hiển thị, thì giá trị thực được lấy từ màu đã chỉ định, gam màu css được ánh xạ để hiển thị

Nếu màu không hợp lệ, giá trị được sử dụng là màu đen mờ

Màu vôi rất đậm này nằm trong gam màu cho rec. 2020.

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

1

trong LCH, màu đó là

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

2

trong display-p3, màu đó là

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

3

và nằm ngoài phạm vi hiển thị-p3 (đỏ và xanh dương là âm, xanh lá cây lớn hơn 1). Nếu bạn có màn hình display-p3, màu đó là

• có hiệu lực
• trong gam (đối với rec. 2020)
• ngoài gam màu (cho màn hình của bạn)
• và vì vậy không thể được hiển thị

Màu được sử dụng để hiển thị sẽ là màu ít đậm hơn được tạo tự động bằng ánh xạ gam màu

Ví dụ này có một lỗi đánh máy. Màu xanh đậm được cung cấp trong không gian profoto-rgb (không tồn tại). Điều này làm cho nó không hợp lệ, vì vậy giá trị được sử dụng có màu đen mờ

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

4

10. 2. Không gian màu sRGB được xác định trước. từ khóa sRGB

Không gian màu xác định trước sRGB được xác định bên dưới giống với không gian được sử dụng cho các màu sRGB kế thừa, chẳng hạn như rgb()

srgbKhông gian màu srgb [SRGB] chấp nhận ba tham số số, đại diện cho các kênh màu đỏ, lục và lam của màu. Màu trong gam có tất cả ba thành phần trong phạm vi [0, 1]. Điểm trắng là D65

[SRGB] chỉ định hai điều kiện xem, mã hóa và điển hình. [ICC] khuyến nghị sử dụng các điều kiện mã hóa để chuyển đổi màu và để xem tối ưu, đó là các giá trị trong bảng bên dưới

sRGB là không gian màu mặc định cho CSS, được sử dụng cho tất cả các chức năng màu kế thừa

Nó có các đặc điểm sau

sắc độ xyĐỏ0. 6400. 330Sắc độ xanh lục0. 3000. 600Sắc xanh lam0. 1500. 060Sắc độ trắngD65Chức năng truyền xem bên dướiĐộ sáng trắng80. 0 cd/m2Độ sáng màu đen0. 20 cd/m2Trạng thái hình ảnh được ưu tiên hiển thịPhần trăm được phép cho R, G và BPhạm vi tham chiếu phần trăm cho R,G,B. 0% = 0. 0, 100% = 1. 0____35

c là thành phần màu đỏ, lục hoặc lam được mã hóa bằng gamma. cl là thành phần ánh sáng tuyến tính tương ứng

Trực quan hóa không gian màu sRGB trong LCH. Bầu cử sơ bộ và bầu cử thứ hai được hiển thị. bài kiểm tra

10. 3. Không gian màu sRGB ánh sáng tuyến tính được xác định trước. từ khóa srgb-tuyến tính

Không gian màu được xác định trước tuyến tính sRGB giống như srgb ngoại trừ chức năng truyền là ánh sáng tuyến tính (không có mã hóa gamma)

srgb-tuyến tínhKhông gian màu srgb-tuyến tính [SRGB] chấp nhận ba tham số số, đại diện cho các kênh màu đỏ, lục và lam của màu. Màu trong gam có tất cả ba thành phần trong phạm vi [0, 1]. Điểm trắng là D65

Nó có các đặc điểm sau

sắc độ xyĐỏ0. 6400. 330Sắc độ xanh lục0. 3000. 600Sắc xanh lam0. 1500. 060Sắc độ trắngD65Chức năng truyền thống nhất, xem bên dướiĐộ sáng trắng80. 0 cd/m2Độ sáng màu đen0. 20 cd/m2Trạng thái hình ảnh được ưu tiên hiển thịPhần trăm được phép cho R, G và BPhạm vi tham chiếu phần trăm cho R,G,B. 0% = 0. 0, 100% = 1. 0____36

c là thành phần màu đỏ, lục hoặc lam. cl là thành phần ánh sáng tuyến tính tương ứng, giống hệt nhau

bài kiểm tra

Để tránh tạo dải, cần có độ chính xác cao hơn đối với srgb-tuyến tính so với srgb

Ví dụ, những thứ này có cùng màu

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

7

10. 4. Không gian màu P3 hiển thị được xác định trước. từ khóa hiển thị-p3

display-p3Không gian màu display-p3 [Display-P3] chấp nhận ba tham số số, đại diện cho các kênh màu đỏ, lục và lam của màu. Màu trong gam có tất cả ba thành phần trong phạm vi [0, 1]. It uses the same primary chromaticities as [DCI-P3], but with a D65 whitepoint, and the same transfer curve as sRGB

Modern displays, TVs, laptop screens and phone screens are able to display all, or nearly all, of the display-p3 gamut

Nó có các đặc điểm sau

xyRed chromaticity0. 6800. 320Green chromaticity0. 2650. 690Blue chromaticity0. 1500. 060White chromaticityD65Transfer functionsame as srgbWhite luminance80. 0 cd/m2Black luminance0. 80 cd/m2Image statedisplay-referredPercentagesAllowed for R, G and BPercent reference range for R,G,B. 0% = 0. 0, 100% = 1. 0Visualization of the P3 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. P3 primaries have higher Chroma. Tests

10. 5. The Predefined A98 RGB Color Space. the a98-rgb keyword

a98-rgbThe a98-rgb color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The transfer curve is a gamma function, close to but not exactly 1/2. 2

Nó có các đặc điểm sau

xyRed chromaticity0. 64000. 3300Green chromaticity0. 21000. 7100Blue chromaticity0. 15000. 0600White chromaticityD65Transfer function256/563White luminance160. 0 cd/m2Black luminance0. 5557 cd/m2Image statedisplay-referredPercentagesAllowed for R, G and BPercent reference range for R,G,B. 0% = 0. 0, 100% = 1. 0Visualization of the A98 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. a98 primaries have higher Chroma, especially the yellow, green and cyan. Tests

10. 6. The Predefined ProPhoto RGB Color Space. the prophoto-rgb keyword

prophoto-rgbThe prophoto-rgb color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The transfer curve is a gamma function with a value of 1/1. 8, and a small linear portion near black. The white point is D50, the same as is used by CIE Lab. Thus, conversion to CIE Lab does not require the chromatic adaptation step

The ProPhoto RGB space uses hyper-saturated, non physically realizable primaries. These were chosen to allow a wide color gamut and in particular, to minimize hue shifts under tonal manipulation. It is often used in digital photography as a wide gamut color space for the archival version of photographic images. The prophoto-rgb color space allows CSS to specify colors that will match colors in such images having the same RGB values

The ProPhoto RGB space was originally developed by Kodak and is described in [Wolfe]. It was standardized by ISO as [ROMM],[ROMM-RGB]

The white luminance is given as a range, and the viewing flare (and thus, the black luminance) is 0. 5% to 1. 0% of this

Nó có các đặc điểm sau

xyRed chromaticity0. 7346990. 265301Green chromaticity0. 1595970. 840403Blue chromaticity0. 0365980. 000105White chromaticityD50Transfer functionsee belowWhite luminance160. 0 to 640. 0 cd/m2Black luminanceSee textImage statedisplay-referredPercentagesAllowed for R, G and BPercent reference range for R,G,B. 0% = 0. 0, 100% = 1. 0

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

8

c là thành phần màu đỏ, lục hoặc lam được mã hóa bằng gamma. cl là thành phần ánh sáng tuyến tính tương ứng

Visualization of the prophoto-rgb color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. prophoto-rgb primaries and secondaries have much higher Chroma, but much of this ultrawide gamut does not correspond to physically realizable colors. Tests

10. 7. The Predefined ITU-R BT. 2020-2 Color Space. the rec2020 keyword

rec2020The rec2020 [Rec. 2020] color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1], ("full-range", in video terminology). ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television

The primaries are physically realizable, but with difficulty as they lie very close to the spectral locus

Current displays are unable to reproduce the full gamut of rec2020. Coverage is expected to increase over time as displays improve

Nó có các đặc điểm sau

xyRed chromaticity0. 7080. 292Green chromaticity0. 1700. 797Blue chromaticity0. 1310. 046Sắc độ trắngD65Chức năng truyềnxem bên dưới, từ [Rec. 2020] table 4Image statedisplay-referredPercentagesAllowed for R, G and BPercent reference range for R,G,B. 0% = 0. 0, 100% = 1. 0

em { color:  lime; }   /* color keyword  */
em { color:  rgb(0 255 0); } /* RGB range 0-255   */
em { color:  rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color:  color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */

9

c là thành phần màu đỏ, lục hoặc lam được mã hóa bằng gamma. cl là thành phần ánh sáng tuyến tính tương ứng

Visualization of the rec2020 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. rec2020 primaries have much higher Chroma. Tests

10. 8. The Predefined CIE XYZ Color Spaces. the xyz-d50, xyz-d65, and xyz keywords

xyz-d50, xyz-d65, xyzThe xyz color space accepts three numeric parameters, representing the X,Y and Z values. It represents the CIE XYZ [COLORIMETRY] color space, scaled such that diffuse white has a luminance (Y) of 1. 0. and, if necessary, chromatically adapted to the reference white

The reference white for xyz-d50 is D50, while the reference white for xyz-d65 and xyz is D65

Values greater than 1. 0/100% are allowed and must not be clamped; they represent colors brighter than diffuse white. Values less than 0/0% are uncommon, but can occur as a result of chromatic adaptation, and likewise must not be clamped

Nó có các đặc điểm sau

PercentagesAllowed for X,Y,ZPercent reference range for X,Y,Z. 0% = 0. 0, 100% = 1. 0

Đây là chính xác tương đương.

 =  | currentcolor |  

 =  |  |  | transparent
 =  |  |
                             |  |  |
                             |  |  |  |
                            

0

bài kiểm tra

10. 9. Chuyển đổi không gian màu được xác định trước thành Lab hoặc Oklab

For all predefined RGB color spaces, conversion to Lab requires several steps, although in practice all but the first step are linear calculations and can be combined

1. Convert from gamma-encoded RGB to linear-light RGB (undo gamma encoding)
2. Chuyển đổi từ RGB tuyến tính sang CIE XYZ
3. Nếu cần, hãy chuyển đổi từ điểm trắng D65 (được sử dụng bởi sRGB, display-p3, a98-rgb và rec2020) sang điểm trắng D50 được sử dụng trong Phòng thí nghiệm, với phép biến đổi Bradford. prophoto-rgb đã có điểm trắng D50
4. Chuyển đổi XYZ thích nghi với D50 sang Lab

Chuyển đổi sang Oklab cũng tương tự, nhưng bước điều chỉnh màu sắc chỉ cần thiết cho prophoto-rgb

1. Convert from gamma-encoded RGB to linear-light RGB (undo gamma encoding)
2. Chuyển đổi từ RGB tuyến tính sang CIE XYZ
3. Nếu cần, hãy chuyển đổi từ điểm trắng D50 (được sử dụng bởi prophoto-rgb) sang điểm trắng D65 được sử dụng trong Oklab, với biến đổi Bradford
4. Chuyển đổi XYZ được điều chỉnh theo D65 sang Oklab

Có mã JavaScript mẫu cho các chuyển đổi này trong §17 Mã mẫu cho Chuyển đổi màu

10. 10. Chuyển đổi Lab hoặc Oklab sang Không gian màu RGB được xác định trước

Việc chuyển đổi từ Lab sang các không gian được xác định trước như display-p3 hoặc rec2020 cũng yêu cầu nhiều bước và trên thực tế, tất cả trừ bước cuối cùng là tính toán tuyến tính và có thể được kết hợp

1. Chuyển đổi Lab thành (tương thích với D50) XYZ
2. Nếu cần, hãy chuyển đổi từ điểm trắng D50 (do Phòng thí nghiệm sử dụng) sang điểm trắng D65 được sử dụng trong sRGB và hầu hết các không gian RGB khác, với phép biến đổi Bradford. prophoto-rgb' không yêu cầu bước này
3. Chuyển đổi từ CIE XYZ (tương thích với D65) sang RGB tuyến tính
4. Chuyển đổi từ RGB ánh sáng tuyến tính sang RGB (thực hiện mã hóa gamma)

Chuyển đổi từ Oklab cũng tương tự, nhưng bước điều chỉnh màu chỉ cần cho prophoto-rgb

1. Chuyển đổi Oklab sang XYZ (tương thích với D65)
2. Nếu cần, hãy chuyển đổi từ điểm trắng D65 (do Oklab sử dụng) sang điểm trắng D50 được sử dụng trong prophoto-rgb, với biến đổi Bradford
3. Chuyển đổi từ CIE XYZ (tương thích với D65) sang RGB tuyến tính
4. Chuyển đổi từ RGB ánh sáng tuyến tính sang RGB (thực hiện mã hóa gamma)

Có mã JavaScript mẫu cho các chuyển đổi này trong §17 Mã mẫu cho Chuyển đổi màu

Việc triển khai có thể chọn triển khai các bước này theo một số cách khác (ví dụ: sử dụng cấu hình ICC với mục đích hiển thị đo màu tương đối) miễn là kết quả giống nhau đối với các màu bên trong cả gam màu nguồn và đích

10. 11. Chuyển đổi giữa các không gian màu RGB được xác định trước

Chuyển đổi từ một không gian màu RGB được xác định trước sang một không gian màu khác yêu cầu nhiều bước, một trong số đó chỉ cần thiết khi các điểm trắng khác nhau. Để chuyển đổi từ src sang dest

1. Chuyển đổi từ srcRGB được mã hóa gamma sang srcRGB ánh sáng tuyến tính (hoàn tác mã hóa gamma)
2. Chuyển đổi từ srcRGB tuyến tính sang CIE XYZ
3. Nếu src và dest có các điểm trắng khác nhau, hãy chuyển đổi giá trị XYZ từ srcWhite thành destWhite bằng phép biến đổi Bradford
4. Chuyển đổi từ CIE XYZ sang destRGB tuyến tính
5. Chuyển đổi từ destRGB ánh sáng tuyến tính sang destRGB (thực hiện mã hóa gamma)

Có mã JavaScript mẫu cho chuyển đổi này cho các không gian màu RGB được xác định trước, trong §17 Mã mẫu cho Chuyển đổi màu

10. 12. Tổng hợp Alpha đơn giản

Khi vẽ, các cài đặt phải xử lý alpha theo quy định tại mục 5. 1 Tổng hợp alpha đơn giản của [Tổng hợp]

11. Chuyển đổi màu sắc

Các màu có thể được chuyển đổi từ không gian màu này sang không gian màu khác và với điều kiện là không có ánh xạ gam màu và mỗi không gian màu có thể biểu thị ngoài các màu gam màu (đối với không gian RGB, điều này có nghĩa là chức năng truyền được xác định trên phạm vi mở rộng) sau đó

Để chuyển đổi màu col1 trong không gian màu nguồn src với điểm trắng src-white thành màu col2 trong không gian màu đích dest với điểm trắng dest-white

12. Nội suy màu

Nội suy màu xảy ra với độ dốc, tổng hợp, bộ lọc, chuyển tiếp, hoạt ảnh, trộn màu và chức năng sửa đổi màu

Nội suy giữa các giá trị xảy ra bằng cách trước tiên chuyển đổi chúng thành một không gian màu nhất định sẽ được gọi là không gian màu nội suy bên dưới, sau đó nội suy tuyến tính từng thành phần của giá trị được tính toán của màu một cách riêng biệt

Có thể nội suy đến hoặc từ màu hiện tại. Giá trị số được sử dụng cho mục đích này là giá trị được sử dụng

Giá trị được tính toán cần có khả năng thể hiện sự kết hợp của Màu hiện tại và màu thực tế. Xem xét giá trị của text-emphasis-color trong

rgba(100%, 0%, 0%, 0.5)

4 Xem Vấn đề 445. ↵

Mã CSS để thay đổi màu nền của bạn là gì?

Làm cách nào để thay đổi màu sắc trong CSS?