Sử dụng màu sắc trong CSS [viết tắt của cascading stylesheets] thực sự khá dễ dàng. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng tất cả các định dạng màu khác nhau trong CSS, bao gồm mã màu Hex, tên màu HTML và các giá trị RGB và HSL. Nếu bạn chưa quen với CSS, chỉ cần tìm kiếm phần giới thiệu về CSS, có rất nhiều hướng dẫn tuyệt vời ở đó
Cách sử dụng mã màu Hex trong CSS
Mã màu hex là phương pháp phổ biến nhất để thêm màu vào phần tử HTML bằng CSS. Trong biểu định kiểu của mình, bạn có thể sử dụng thuộc tính màu CSS để thay đổi màu mặc định của văn bản trên trang web của mình
CSS
/* In your .css stylesheet */
body { color: #FF0000; }
A second option is to include the CSS styles right in the of your HTML document using tags, like below:
HTML
body { color: #FF0000; }
Dễ dàng, phải không? . Lên cơn điên
Cách sử dụng tên màu HTML trong CSS
Tên màu HTML là một cách khác để tạo kiểu cho nội dung của bạn trong CSS và thường dễ hiểu hơn. Bạn có thể sử dụng tên màu theo cách giống như mã màu Hex, đặt nó làm giá trị cho thuộc tính màu CSS trong biểu định kiểu của bạn
CSS
/* In your .css stylesheet */
body { color: red; }
Hiện tại, 140 tên màu được hỗ trợ trên tất cả các trình duyệt hiện đại và chúng tôi đã tập hợp một danh sách đẹp về tất cả chúng ở đây để tham khảo nhanh
Cách sử dụng các giá trị màu RGB trong CSS
RGB, viết tắt của Red, Green và Blue, là một hệ màu thường thấy trong nhiều ứng dụng và công nghệ thiết kế, và gần đây đã trở thành lựa chọn phù hợp cho các nhà thiết kế web cũng như lập trình viên. Trong CSS, màu RGB có thể được sử dụng bằng cách gói các giá trị trong dấu ngoặc đơn và đặt trước chúng bằng chữ thường 'rgb'
CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
Một trong những lợi ích của việc sử dụng RGB trong CSS của bạn là khả năng kiểm soát độ mờ bên cạnh màu sắc. Việc thêm 'a' vào tiền tố rgb[] cho phép gán giá trị thứ tư xác định độ trong suốt của màu trên thang điểm từ 0 đến 1. Trong ví dụ này, văn bản trang HTML sẽ hiển thị ở độ mờ 50% kể từ 0. 5 nằm giữa 0 và 1
CSS
/* In your .css stylesheet */
body { color: rgba[255, 0, 0, 0.5]; }
Nếu bạn muốn sử dụng RGB nhưng không biết bắt đầu từ đâu, hãy xem bộ chọn màu của chúng tôi để tạo nhanh một số mã màu
Cách sử dụng giá trị màu HSL trong CSS
Bạn có thể đã nghe nói về HSL, viết tắt của Hue, Saturation và Lightness, một hệ màu khác được sử dụng trong nhiều ứng dụng. Hue được đo bằng độ từ 0 – 360, trong khi Saturation và Lightness sử dụng thang đo từ 0% – 100%. Trong CSS, HSL có thể dễ dàng triển khai theo cú pháp tương tự như RGB nhưng thay vào đó là tiền tố 'hsl'
CSS
/* In your .css stylesheet */
body { color: hsl[0, 100%, 50%]; }
Tương tự, HSL cũng hỗ trợ kênh alpha để kiểm soát độ trong suốt của màu. Việc sử dụng nó giống với RGB, với giá trị thứ tư nằm trong khoảng từ 0 đến 1 được bật khi sử dụng tiền tố 'hsla'
CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
Lưu ý, rgba[], hsl[] và hsla[] là những bổ sung tương đối mới cho CSS và không được một số trình duyệt cũ hỗ trợ. Tùy thuộc vào tình huống của bạn, bạn có thể muốn chọn các phương pháp khác nhau để điều chỉnh độ mờ của màu sắc
Kiểu dữ liệu CSS
=0 đại diện cho một màu. Một
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=0 cũng có thể bao gồm một giá trị độ trong suốt của kênh alpha, cho biết màu nên phù hợp với nền của nó như thế nào.
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Một
=0 có thể được định nghĩa theo bất kỳ cách nào sau đây
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
- Sử dụng một từ khóa [chẳng hạn như
=
3 hoặc
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65=
4]. Tất cả các từ khóa hiện có chỉ định một màu trong không gian màu sRGB
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65 - Sử dụng hệ thống [thông qua #-thập lục phân hoặc ký hiệu chức năng
=
5 và
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65=
6]. Chúng luôn chỉ định một màu trong không gian màu sRGB
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65 - Sử dụng hệ tọa độ trụ HSL [thông qua các ký hiệu chức năng
=
7 và
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65=
8]. Chúng luôn chỉ định một màu trong không gian màu sRGB
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65 - Sử dụng hệ tọa độ trụ HWB [thông qua ký hiệu chức năng
=
9]. Chúng luôn chỉ định một màu trong không gian màu sRGB
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65 - Sử dụng , thông qua ký hiệu chức năng
HTML
70. Điều này có thể chỉ định bất kỳ màu nào có thể nhìn thấybody { color: #FF0000; }
- Sử dụng hệ tọa độ Lab, thông qua ký hiệu chức năng
HTML
71. Điều này có thể chỉ định bất kỳ màu nào có thể nhìn thấybody { color: #FF0000; }
- Sử dụng ký hiệu chức năng
HTML
72, để chỉ định một màu trong nhiều không gian màu được xác định trước hoặc tùy chỉnhbody { color: #FF0000; }
Ghi chú. Bài viết này mô tả chi tiết về kiểu dữ liệu
=0. Để tìm hiểu thêm về cách sử dụng màu trong HTML, hãy xem Áp dụng màu cho các thành phần HTML bằng CSS
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Loại dữ liệu
=0 được chỉ định bằng một trong các tùy chọn được liệt kê bên dưới
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Ghi chú. Mặc dù các giá trị
=0 được xác định chính xác, nhưng giao diện thực tế của chúng có thể khác nhau [đôi khi đáng kể] tùy theo thiết bị. Điều này là do hầu hết các thiết bị không được hiệu chỉnh và một số trình duyệt không hỗ trợ cấu hình màu của thiết bị đầu ra
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Các màu được đặt tên là các mã định danh phân biệt chữ hoa chữ thường đại diện cho một màu cụ thể, chẳng hạn như
HTML
body { color: #FF0000; }
76, =3,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
HTML
body { color: #FF0000; }
78 hoặc HTML
body { color: #FF0000; }
79. Mặc dù những cái tên ít nhiều mô tả màu sắc tương ứng của chúng, nhưng về cơ bản chúng là nhân tạo, không có lý do chính đáng đằng sau những cái tên được sử dụngDanh sách đầy đủ các từ khóa như vậy có sẵn ở đây
Từ khóa
CSS
/* In your .css stylesheet */
body { color: red; }
70 đại diện cho giá trị thuộc tính CSS
/* In your .css stylesheet */
body { color: red; }
71 của một phần tử. Điều này cho phép bạn sử dụng giá trị CSS
/* In your .css stylesheet */
body { color: red; }
71 trên các thuộc tính không nhận được giá trị này theo mặc địnhNếu
CSS
/* In your .css stylesheet */
body { color: red; }
70 được sử dụng làm giá trị của thuộc tính CSS
/* In your .css stylesheet */
body { color: red; }
71, thay vào đó, nó sẽ lấy giá trị của nó từ giá trị kế thừa của thuộc tính CSS
/* In your .css stylesheet */
body { color: red; }
71CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
3Mô hình màu RGB xác định một màu nhất định trong không gian màu sRGB theo các thành phần đỏ, lục và lam của nó. Một thành phần alpha tùy chọn thể hiện độ trong suốt của màu
Màu RGB có thể được thể hiện thông qua cả ký hiệu thập lục phân [có tiền tố là
CSS
/* In your .css stylesheet */
body { color: red; }
76] và chức năng [=5,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=6]ký hiệu thập lục phân.
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
CSS
/* In your .css stylesheet */
body { color: red; }
79 hoặcCSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
80________ 381 [đỏ], _______ 382 [xanh lục], ________ 383 [xanh dương] và ________ 384 [alpha] là các ký tự thập lục phân [0–9, A–F].
CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
84 là tùy chọn. Ví dụ, CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
86 tương đương với CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
87. Ký hiệu ba chữ số [CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
88] là phiên bản ngắn hơn của dạng sáu chữ số [CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
89]. Ví dụ: CSS
/* In your .css stylesheet */
body { color: rgba[255, 0, 0, 0.5]; }
80 có cùng màu với CSS
/* In your .css stylesheet */
body { color: rgba[255, 0, 0, 0.5]; }
81. Tương tự như vậy, ký hiệu RGB gồm bốn chữ số [______482] là phiên bản ngắn hơn của dạng tám chữ số [CSS
/* In your .css stylesheet */
body { color: rgba[255, 0, 0, 0.5]; }
83]. Ví dụ: CSS
/* In your .css stylesheet */
body { color: rgba[255, 0, 0, 0.5]; }
84 có cùng màu với CSS
/* In your .css stylesheet */
body { color: rgba[255, 0, 0, 0.5]; }
85=5 hoặc
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=6.
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
CSS
/* In your .css stylesheet */
body { color: rgba[255, 0, 0, 0.5]; }
88 hoặc CSS
/* In your .css stylesheet */
body { color: rgba[255, 0, 0, 0.5]; }
89CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
81 [đỏ], CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
82 [xanh lục] và CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
83 [xanh dương] có thể là CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
13 hoặc CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
14, trong đó số CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
15 tương ứng với CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
16. CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
84 [alpha] có thể là một CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
13 giữa CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
19 và CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
80, hoặc một CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
14, trong đó số CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
80 tương ứng với CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
16 [độ mờ hoàn toàn]Mô hình màu HSL xác định một màu nhất định trong không gian màu sRGB theo các thành phần màu sắc, độ bão hòa và độ sáng của nó. Một thành phần alpha tùy chọn thể hiện độ trong suốt của màu
Nhiều nhà thiết kế nhận thấy HSL trực quan hơn RGB, vì nó cho phép điều chỉnh màu sắc, độ bão hòa và độ sáng của từng màu một cách độc lập. HSL cũng có thể giúp việc tạo một tập hợp các màu phù hợp trở nên dễ dàng hơn [chẳng hạn như khi bạn muốn có nhiều sắc thái của một sắc độ]. Tuy nhiên, sử dụng HSL để tạo các biến thể màu có thể tạo ra kết quả đáng ngạc nhiên, vì nó không. Ví dụ: cả
CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
84 và CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
85 đều có cùng độ sáng, mặc dù cái trước tối hơn nhiều so với cái sauMàu HSL được thể hiện thông qua các ký hiệu chức năng
=7 và
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=8
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=7 hoặc
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=8.
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=80 hoặc
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=81
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=82 [màu sắc] là một
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=83 của vòng tròn màu được đưa ra trong những năm
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=84,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=85,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=86 hoặc
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=87 trong thông số kỹ thuật. Khi được viết dưới dạng
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
13 không có đơn vị, nó được hiểu là độ, như được chỉ định trong thông số kỹ thuật. Theo định nghĩa, màu đỏ=0độ=360độ, với các màu khác trải rộng xung quanh vòng tròn, vì vậy màu lục=120độ,xanh dương=240độ,v.v. Là một =83, nó hoàn toàn bao bọc xung quanh sao cho -120deg=240deg, 480deg=120deg, -1turn=1turn, v.v.
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=80 [độ bão hòa] và
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=81 [độ sáng] là tỷ lệ phần trăm. Độ bão hòa của
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
16 hoàn toàn bão hòa, trong khi =83 hoàn toàn không bão hòa [màu xám].
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
16 độ sáng là màu trắng, _______ 883 độ sáng là màu đen và độ sáng ________ 886 là "bình thường"CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
84 [alpha] có thể là một CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
13 giữa CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
19 và CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
80, hoặc một CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
14, trong đó số CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
80 tương ứng với CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
16 [độ mờ hoàn toàn]Tương tự như mô hình màu HSL, mô hình màu HWB xác định một màu nhất định trong không gian màu sRGB theo các thành phần màu sắc, độ trắng và độ đen của nó
Cũng như HSL, HWB có thể sử dụng trực quan hơn RGB. Màu sắc được chỉ định theo cùng một cách, theo sau là lượng độ trắng và độ đen tương ứng theo giá trị phần trăm. Chức năng này cũng chấp nhận một giá trị alpha
Ghi chú. Không có hàm
=04 riêng biệt như với HSL, giá trị alpha là một tham số tùy chọn, nếu nó không được chỉ định thì giá trị alpha là 1 [hoặc 100%] sẽ được sử dụng. Để chỉ định giá trị này, dấu gạch chéo lên phía trước [
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=05] phải theo sau giá trị độ đen trước khi chỉ định giá trị alpha
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Màu HWB được thể hiện thông qua ký hiệu
=9 chức năng
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Ghi chú. Hàm HWB không dùng dấu phẩy để phân cách các giá trị như các hàm màu trước đây
=9.
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=08
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Tương tự với HSSL.
=82 [màu sắc] là một
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=83 của vòng tròn màu được đưa ra trong những năm
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=84,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=85,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=86 hoặc
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=87 trong thông số kỹ thuật. Khi được viết dưới dạng
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
13 không có đơn vị, nó được hiểu là độ, như được chỉ định trong thông số kỹ thuật. Theo định nghĩa, màu đỏ=0độ=360độ, với các màu khác trải rộng xung quanh vòng tròn, vì vậy màu lục=120độ,xanh dương=240độ,v.v. Là một =83, nó hoàn toàn bao bọc xung quanh sao cho -120deg=240deg, 480deg=120deg, -1turn=1turn, v.v.
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=17 [độ trắng] và
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
83 [độ đen] là tỷ lệ phần trăm. Hai màu này kết hợp với nhau, vì vậy bạn sẽ cần =83 độ trắng và
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
16 độ đen để tạo ra màu đen. Và ngược lại CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
16 độ trắng và =83 độ đen cho màu trắng.
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=86 của cả hai giá trị hiển thị màu xám trung bình và bất kỳ biến thể nào khác là sắc thái của màu được chỉ định
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
84 [alpha], tùy chọn, có thể là một CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
13 giữa CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
19 và CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
80, hoặc một CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
14, trong đó số CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
80 tương ứng với CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
16 [độ mờ hoàn toàn]. Khi chỉ định một giá trị alpha, nó phải được đặt trước bằng dấu gạch chéo lên [=05]
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Ở chế độ màu bắt buộc [có thể phát hiện được bằng truy vấn phương tiện màu bắt buộc], hầu hết các màu được giới hạn trong bảng màu do người dùng và trình duyệt xác định. Các màu hệ thống này được hiển thị bằng các từ khóa sau, có thể được sử dụng để đảm bảo rằng phần còn lại của trang tích hợp tốt với bảng màu hạn chế. Các giá trị này cũng có thể được sử dụng trong các ngữ cảnh khác, nhưng không được các trình duyệt hỗ trợ rộng rãi
Các từ khóa trong danh sách sau đây được xác định bởi đặc tả Mô-đun Màu CSS Cấp 4.
=32,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=33,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=34,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=35,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=36,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=37,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=38,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=39,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=40,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=41,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=42,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=43,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=44,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=45,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=46,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=47,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=48,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=49,
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=50
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Ghi chú. Lưu ý rằng những từ khóa này không phân biệt chữ hoa chữ thường nhưng được liệt kê ở đây với cả chữ hoa chữ thường để dễ đọc
CSS Color 4 giới thiệu màu Lab. Màu phòng thí nghiệm được chỉ định thông qua ký hiệu chức năng
HTML
body { color: #FF0000; }
71. Chúng không bị giới hạn trong một không gian màu cụ thể và có thể đại diện cho toàn bộ phổ thị giác của con ngườiCSS Color 4 giới thiệu màu LCH. Màu LCH được chỉ định thông qua ký hiệu chức năng
HTML
body { color: #FF0000; }
70. Chúng không bị giới hạn trong một không gian màu cụ thể và có thể đại diện cho toàn bộ phổ thị giác của con ngườiTrên thực tế, LCH là dạng phân cực của Lab. Nó thân thiện với con người hơn Lab, vì các thành phần sắc độ và màu sắc của nó xác định chất lượng của màu mong muốn, trái ngược với việc pha trộn. Nó tương tự như HSL theo cách đó, mặc dù nó đồng nhất về mặt nhận thức hơn nhiều. Không giống như HSL mô tả cả
CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
85 và CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
84 có cùng độ đậm nhạt, LCH [và Phòng thí nghiệm] mô tả chính xác độ đậm nhạt khác nhau cho chúng. cái trước [màu vàng] có L là 97. 6 và cái sau [màu xanh] L là 29. 6. Do đó, LCH có thể được sử dụng để tạo các bảng màu với các màu hoàn toàn khác nhau, với kết quả có thể dự đoán được. Xin lưu ý rằng sắc độ LCH không giống với sắc độ HSL và sắc độ LCH không giống với độ bão hòa HSL, mặc dù chúng có chung một số điểm tương đồng về khái niệmCSS Color 4 đã giới thiệu ký hiệu này. Các màu được chỉ định thông qua hàm
HTML
body { color: #FF0000; }
72 có thể chỉ định một màu trong bất kỳ không gian màu nào được xác định trước, cũng như các không gian màu tùy chỉnh, được xác định thông qua quy tắc =56
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Trong hoạt ảnh và chuyển màu, các giá trị
=0 được nội suy trên từng thành phần màu đỏ, xanh lá cây và xanh dương của chúng. Mỗi thành phần được nội suy dưới dạng một số thực, dấu phẩy động. Lưu ý rằng nội suy màu xảy ra trong để ngăn các màu xám không mong muốn xuất hiện. Trong hoạt ảnh, tốc độ của nội suy được xác định bởi chức năng thời gian
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Một số người gặp khó khăn trong việc phân biệt màu sắc. Khuyến nghị khuyên bạn không nên sử dụng màu sắc làm phương tiện duy nhất để truyền tải một thông điệp, hành động hoặc kết quả cụ thể. Xem để biết thêm thông tin
=
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Trong ví dụ này, chúng tôi cung cấp một
=58 và một kiểu nhập văn bản. Nhập một màu hợp lệ vào đầu vào sẽ khiến
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=58 áp dụng màu đó, cho phép bạn kiểm tra các giá trị màu của chúng tôi
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
HTML
HTML
body { color: #FF0000; }
7CSS
CSS
/* In your .css stylesheet */
body { color: red; }
7CSS
/* In your .css stylesheet */
body { color: rgb[255, 0, 0]; }
8Kết quả
Ví dụ này cho thấy nhiều cách có thể tạo một màu duy nhất bằng các cú pháp màu RGB khác nhau
CSS
/* In your .css stylesheet */
body { color: rgba[255, 0, 0, 0.5]; }
8CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
1CSS
/* In your .css stylesheet */
body { color: hsla[0, 100%, 50%, 0.5]; }
8=8
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
Ký hiệu Mô tảTrực tiếp
=60đỏ
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=61cam
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=62vàng
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=63xanh lá chanh
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=64xanh lá cây
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=65xanh dương-xanh lá cây
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=66lục lam
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=67xanh da trời
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=68xanh dương
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=69tím
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=70đỏ tươi
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=71hồng
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
=72đỏ
|
currentcolor |
=
|
|
|
transparent
=
|
|
|
|
|
|
|
|
|
=
rgb[ [ | none ]{3} [ / [ | none ] ]? ] |
rgb[ [ | none ]{3} [ / [ | none ] ]? ]
=
hsl[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
hwb[ [ | none ] [ | none ] [ | none ] [ / [ | none ] ]? ]
=
lab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
lch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
oklab[ [ | | none ] [ | | none ] [ | | none ] [ / [ | none ] ]? ]
=
oklch[ [ | | none ] [ | | none ] [ | none ] [ / [ | none ] ]? ]
=
color[ [ / [ | none ] ]? ]
=
|
=
|
=
|
=
[ | | none ]{3}
=
[ | | none ]{3}
=
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
=
xyz |
xyz-d50 |
xyz-d65
4 cách để đặt màu trong CSS là gì?
Bạn có thể tô màu hình ảnh trong CSS không?
Làm cách nào để tô màu nền trong CSS?
,
, and