CSS color() function
The CSS color()
function allows the browser to display colors in any color space, such as the P3 color space which can display colors outside of the default sRGB color space.
Spec | https://drafts.csswg.org/css-color/#color-function |
---|---|
Status | W3C Working Draft |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
98 | |||||
95 | 97 | ||||
94 | 96 | TP | |||
11 | 95 | 93 | 95 | 15 | 80 |
10 | 94 | 92 | 94 | 14.1 (1) | 79 |
9 | 93 | 91 | 93 | 14 (1) | 78 |
8 | 92 | 90 | 92 | 13.1 (1) | 77 |
Show all | |||||
7 | 91 | 89 | 91 | 13 (1) | 76 |
6 | 90 | 88 | 90 | 12.1 (1) | 75 |
5.5 | 89 | 87 | 89 | 12 (1) | 74 |
88 | 86 | 88 | 11.1 (1) | 73 | |
87 | 85 | 87 | 11 (1) | 72 | |
86 | 84 | 86 | 10.1 (1) | 71 | |
85 | 83 | 85 | 10 | 70 | |
84 | 82 | 84 | 9.1 | 69 | |
83 | 81 | 83 | 9 | 68 | |
81 | 80 | 81 | 8 | 67 | |
80 | 79 | 80 | 7.1 | 66 | |
79 | 78 | 79 | 7 | 65 | |
18 | 77 | 78 | 6.1 | 64 | |
17 | 76 | 77 | 6 | 63 | |
16 | 75 | 76 | 5.1 | 62 | |
15 | 74 | 75 | 5 | 60 | |
14 | 73 | 74 | 4 | 58 | |
13 | 72 | 73 | 3.2 | 57 | |
12 | 71 | 72 | 3.1 | 56 | |
70 | 71 | 55 | |||
69 | 70 | 54 | |||
68 | 69 | 53 | |||
67 | 68 | 52 | |||
66 | 67 | 51 | |||
65 | 66 | 50 | |||
64 | 65 | 49 | |||
63 | 64 | 48 | |||
62 | 63 | 47 | |||
61 | 62 | 46 | |||
60 | 61 | 45 | |||
59 | 60 | 44 | |||
58 | 59 | 43 | |||
57 | 58 | 42 | |||
56 | 57 | 41 | |||
55 | 56 | 40 | |||
54 | 55 | 39 | |||
53 | 54 | 38 | |||
52 | 53 | 37 | |||
51 | 52 | 36 | |||
50 | 51 | 35 | |||
49 | 50 | 34 | |||
48 | 49 | 33 | |||
47 | 48 | 32 | |||
46 | 47 | 31 | |||
45 | 46 | 30 | |||
44 | 45 | 29 | |||
43 | 44 | 28 | |||
42 | 43 | 27 | |||
41 | 42 | 26 | |||
40 | 41 | 25 | |||
39 | 40 | 24 | |||
38 | 39 | 23 | |||
37 | 38 | 22 | |||
36 | 37 | 21 | |||
35 | 36 | 20 | |||
34 | 35 | 19 | |||
33 | 34 | 18 | |||
32 | 33 | 17 | |||
31 | 32 | 16 | |||
30 | 31 | 15 | |||
29 | 30 | 12.1 | |||
28 | 29 | 12 | |||
27 | 28 | 11.6 | |||
26 | 27 | 11.5 | |||
25 | 26 | 11.1 | |||
24 | 25 | 11 | |||
23 | 24 | 10.6 | |||
22 | 23 | 10.5 | |||
21 | 22 | 10.0-10.1 | |||
20 | 21 | 9.5-9.6 | |||
19 | 20 | 9 | |||
18 | 19 | ||||
17 | 18 | ||||
16 | 17 | ||||
15 | 16 | ||||
14 | 15 | ||||
13 | 14 | ||||
12 | 13 | ||||
11 | 12 | ||||
10 | 11 | ||||
9 | 10 | ||||
8 | 9 | ||||
7 | 8 | ||||
6 | 7 | ||||
5 | 6 | ||||
4 | 5 | ||||
3.6 | 4 | ||||
3.5 | |||||
3 | |||||
2 |
Safari on iOS | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser | KaiOS Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|
15 | all | 94 | 10 | 64 | 94 | 92 | 11 | 12.12 | 15.0 | 10.4 | 7.12 | 2.5 |
14.5-14.8 (1) | 4.4.3-4.4.4 | 7 | 12.1 | 10 | 14.0 | |||||||
14.0-14.4 (1) | 4.4 | 12 | 13.0 | |||||||||
13.4-13.7 (1) | 4.2-4.3 | 11.5 | 12.0 | |||||||||
Show all | ||||||||||||
13.3 (1) | 4.1 | 11.1 | 11.1-11.2 | |||||||||
13.2 (1) | 4 | 11 | 10.1 | |||||||||
13.0-13.1 (1) | 3 | 10 | 9.2 | |||||||||
12.2-12.5 (1) | 2.3 | 8.2 | ||||||||||
12.0-12.1 (1) | 2.2 | 7.2-7.4 | ||||||||||
11.3-11.4 (1) | 2.1 | 6.2-6.4 | ||||||||||
11.0-11.2 (1) | 5.0-5.4 | |||||||||||
10.3 (1) | 4 | |||||||||||
10.0-10.2 | ||||||||||||
9.3 | ||||||||||||
9.0-9.2 | ||||||||||||
8.1-8.4 | ||||||||||||
8 | ||||||||||||
7.0-7.1 | ||||||||||||
6.0-6.1 | ||||||||||||
5.0-5.1 | ||||||||||||
4.2-4.3 | ||||||||||||
4.0-4.1 | ||||||||||||
3.2 |
Notes
For this function to work properly, the device screen and OS also needs to support the color space being used.
Only supports
display-p3
predefined color profile.
Resources
- Chromium implementation bug
- Firefox implementation bug
- WebKit article on using color() with the P3 color space
- Color generator that uses color() with the P3 color space
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-color-function