e9af35bcf8757ad58acaf61a06d484b62300db04
[WebKit-https.git] / Websites / webkit.org / blog-files / color-gamut / index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <title>Examples of various wide-gamut images</title>
5   <meta name="viewport" content="width=850">
6   
7   <style>
8   body {
9       background-color: #888;
10       text-align: center;
11       font-family: -apple-system;
12       max-width: 800px;
13       margin: 0 auto;
14       font-size: 18px;
15   }
16
17   body.white {
18       background-color: white;
19       color: black;
20   }
21
22   body.light-grey {
23       background-color: #bbb;
24       color: black;
25   }
26
27   body.mid-grey {
28       background-color: #888;
29       color: black;
30   }
31
32   body.dark-grey {
33       background-color: #333;
34       color: white;
35   }
36
37   body.black {
38       background-color: black;
39       color: white;
40   }
41
42   p {
43       text-align: justify;
44       line-height: 1.4;
45   }
46
47   button {
48       -webkit-appearance: none;
49       backgroud-color: #539298;
50       color: black;
51       border: 1px solid #333;
52       box-shadow: 0px 1px 0px #336;
53       border-radius: 5px;
54       font-size: 18px;
55       cursor: pointer;
56   }
57
58   button:hover, button:active {
59       background-color: #4d6997;
60   }
61
62   section.photo {
63       border: 2px solid #622;
64       padding: 1em 3em;
65       margin-bottom: 2em;
66   }
67
68   section.photo p {
69       text-align: center;
70   }
71
72   section.photo > h2 {
73       margin: 0 0 0.7em 0;
74       font-size: 200%;
75   }
76
77   section.photo > img {
78       margin: 0 auto 15px auto;
79       display: block;
80   }
81
82   section.photo.shoes > img,
83   section.photo.iceland > img,
84   section.photo.italy > img,
85   section.photo.yellow > img,
86   section.photo.flowers > img {
87       width: 600px;
88       height: 400px;
89   }
90
91   section.photo.logo > img,
92   section.photo.rose > img {
93       width: 500px;
94       height: 500px;
95   }
96
97   section.photo.sunset > img {
98       width: 397px;
99       height: 600px;
100   }
101
102   section.photo > div > div {
103       display: inline-block;
104       margin: 0 5px;
105   }
106
107   section.photo > div > div > img {
108       margin: 0 auto 10px auto;
109       display: block;
110       cursor: pointer;
111   }
112
113   section.photo > div > div > img:hover {
114       outline: 2px solid #bbf;
115   }
116
117   section.photo.shoes > div > div > img,
118   section.photo.iceland > div > div > img,
119   section.photo.italy > div > div > img,
120   section.photo.yellow > div > div > img,
121   section.photo.flowers > div > div > img {
122       width: 200px;
123       height: 133px;
124   }
125
126   section.photo.logo > div > div > img,
127   section.photo.rose > div > div > img {
128       width: 150px;
129       height: 150px;
130   }
131
132   section.photo.sunset > div > div > img {
133       width: 132px;
134       height: 200px;
135   }
136
137   </style>
138   <script>
139
140   function init() {
141       var buttons = Array.from(document.querySelectorAll(".background button"));
142       buttons.forEach(function (button) {
143           button.addEventListener("click", function (event) {
144               switch (button.textContent) {
145               case "White":
146                   document.body.className = "white";
147                   break;
148               case "Light grey":
149                   document.body.className = "light-grey";
150                   break;
151               case "Middle grey":
152                   document.body.className = "mid-grey";
153                   break;
154               case "Dark grey":
155                   document.body.className = "dark-grey";
156                   break;
157               case "Black":
158                   document.body.className = "black";
159               }
160           });
161       });
162
163       var sections = Array.from(document.querySelectorAll("section.photo"));
164       sections.forEach(function (section) {
165           var images = Array.from(section.querySelectorAll("div > div > img"));
166           images.forEach(function (image) {
167               image.addEventListener("click", function (event) {
168                   var main = section.querySelector("img");
169                   main.src = event.target.src;
170                   var info = section.querySelector("p");
171                   var imageType = "";
172                   var suffix = event.target.src.match(/.*\-(\w+)\.jpg/)[1];
173                   switch (suffix) {
174                   case "AdobeRGB":
175                       imageType = "Adobe RGB";
176                       break;
177                   case "P3":
178                       imageType = "Display P3";
179                       break;
180                   case "oog":
181                       imageType = "Out of sRGB Gamut";
182                       break
183                   default:
184                       imageType = suffix;
185                   }
186                   info.textContent = "Currently showing: " + imageType;
187               }, false);
188           });
189       });
190   }
191
192     window.addEventListener("load", init, false);
193
194   </script>
195 </head>
196 <body>
197     <h1>Comparison between normal and wide-gamut images</h1>
198
199     <p>
200         Below are example images to demonstrate wide-gamut. There
201         are multiple versions of each image: one in sRGB, which is the
202         typical color space we've been using on the Web for years, then
203         some in other color spaces with a wider gamut, and then a version
204         where the pixels outside sRGB have been highlighted.
205     </p>
206     <p>
207         You can swap between the versions by tapping the buttons below
208         the image. You can also change the background color of this page:
209     </p>
210     <p class="background">
211         Page background color:
212         <button>White</button>
213         <button>Light grey</button>
214         <button>Middle grey</button>
215         <button>Dark grey</button>
216         <button>Black</button>
217     </p>
218     <p>
219         If you're not using a wide-gamut display to view these images,
220         the different versions should quite similar, although color
221         matching might produce a small difference.
222     </p>
223
224     <section class="photo shoes">
225         <h2>Shoes</h2>
226         <img src="Shoes-sRGB.jpg" alt="Bright orange shoes">
227         <p>Currently showing: sRGB</p>
228         <p>Tap/click on one of the images below to replace the main image</p>
229         <div>
230             <div>
231                 <img src="Shoes-sRGB.jpg" alt="Bright orange shoes in the sRGB color space">
232                 <span>sRGB</span>
233             </div>
234             <div>
235                 <img src="Shoes-AdobeRGB.jpg" alt="Bright orange shoes in the Adobe RGB color space">
236                 <span>Adobe RGB</span>
237             </div>
238             <div>
239                 <img src="Shoes-oog.jpg" alt="Bright orange shoes showing which parts are outside of the sRGB gamut">
240                 <span>Out of sRGB areas</span>
241             </div>
242         </div>
243     </section>
244
245     <section class="photo logo">
246         <h2>WebKit Logo</h2>
247         <img src="Webkit-logo-sRGB.png" alt="Red image with very faint WebKit logo">
248         <p>Currently showing: sRGB</p>
249         <p>Tap/click on one of the images below to replace the main image</p>
250         <div>
251             <div>
252                 <img src="Webkit-logo-sRGB.png" alt="Faint WebKit logo in the sRGB color space">
253                 <span>sRGB</span>
254             </div>
255             <div>
256                 <img src="Webkit-logo-P3.png" alt="Faint WebKit logo in the Display P3 color space">
257                 <span>Display P3</span>
258             </div>
259             <div>
260                 <img src="Webkit-logo-oog.png" alt="Faint WebKit logo showing which parts are outside of the sRGB gamut">
261                 <span>Out of sRGB areas</span>
262             </div>
263         </div>
264     </section>
265
266     <section class="photo iceland">
267         <h2>Iceland</h2>
268         <img src="Iceland-sRGB.jpg" alt="A river in Iceland with a sunset">
269         <p>Currently showing: sRGB</p>
270         <p>Tap/click on one of the images below to replace the main image</p>
271         <div>
272             <div>
273                 <img src="Iceland-sRGB.jpg" alt="A river in Iceland with a sunset in the sRGB color space">
274                 <span>sRGB</span>
275             </div>
276             <div>
277                 <img src="Iceland-P3.jpg" alt="A river in Iceland with a sunset in the Display P3 color space">
278                 <span>Display P3</span>
279             </div>
280             <div>
281                 <img src="Iceland-oog.jpg" alt="A river in Iceland with a sunset showing which parts are outside of the sRGB gamut">
282                 <span>Out of sRGB areas</span>
283             </div>
284         </div>
285     </section>
286
287     <section class="photo italy">
288         <h2>Italy</h2>
289         <img src="Italy-sRGB.jpg" alt="Umbrellas in Italy">
290         <p>Currently showing: sRGB</p>
291         <p>Tap/click on one of the images below to replace the main image</p>
292         <div>
293             <div>
294                 <img src="Italy-sRGB.jpg" alt="Umbrellas in Italy in the sRGB color space">
295                 <span>sRGB</span>
296             </div>
297             <div>
298                 <img src="Italy-P3.jpg" alt="Umbrellas in Italy in the Display P3 color space">
299                 <span>Display P3</span>
300             </div>
301             <div>
302                 <img src="Italy-oog.jpg" alt="Umbrellas in Italy showing which parts are outside of the sRGB gamut">
303                 <span>Out of sRGB areas</span>
304             </div>
305         </div>
306     </section>
307
308     <section class="photo flowers">
309         <h2>Flowers</h2>
310         <img src="Flowers-sRGB.jpg" alt="Lots of red flowers">
311         <p>Currently showing: sRGB</p>
312         <p>Tap/click on one of the images below to replace the main image</p>
313         <div>
314             <div>
315                 <img src="Flowers-sRGB.jpg" alt="Lots of red flowers in the sRGB color space">
316                 <span>sRGB</span>
317             </div>
318             <div>
319                 <img src="Flowers-ProPhoto.jpg" alt="Lots of red flowers in the ProPhoto color space">
320                 <span>ProPhoto</span>
321             </div>
322             <div>
323                 <img src="Flowers-oog.jpg" alt="Lots of red flowers showing which parts are outside of the sRGB gamut">
324                 <span>Out of sRGB areas</span>
325             </div>
326         </div>
327     </section>
328
329     <section class="photo yellow">
330         <h2>Yellow Flower</h2>
331         <img src="YellowFlower-sRGB.jpg" alt="A yellow flowers">
332         <p>Currently showing: sRGB</p>
333         <p>Tap/click on one of the images below to replace the main image</p>
334         <div>
335             <div>
336                 <img src="YellowFlower-sRGB.jpg" alt="A yellow in the sRGB color space">
337                 <span>sRGB</span>
338             </div>
339             <div>
340                 <img src="YellowFlower-P3.jpg" alt="A yellow in the Display P3 color space">
341                 <span>Display P3</span>
342             </div>
343             <div>
344                 <img src="YellowFlower-oog.jpg" alt="A yellow showing which parts are outside of the sRGB gamut">
345                 <span>Out of sRGB areas</span>
346             </div>
347         </div>
348     </section>
349
350     <section class="photo sunset">
351         <h2>Sunset</h2>
352         <img src="Sunset-sRGB.jpg" alt="A sunset">
353         <p>Currently showing: sRGB</p>
354         <p>Tap/click on one of the images below to replace the main image</p>
355         <div>
356             <div>
357                 <img src="Sunset-sRGB.jpg" alt="A sunset in the sRGB color space">
358                 <span>sRGB</span>
359             </div>
360             <div>
361                 <img src="Sunset-P3.jpg" alt="A sunset in the P3 color space">
362                 <span>Display P3</span>
363             </div>
364             <div>
365                 <img src="Sunset-oog.jpg" alt="A sunset showing which parts are outside of the sRGB gamut">
366                 <span>Out of sRGB areas</span>
367             </div>
368         </div>
369     </section>
370
371     <section class="photo rose">
372         <h2>Rose</h2>
373         <img src="Rose-sRGB.jpg" alt="A red rose">
374         <p>Currently showing: sRGB</p>
375         <p>Tap/click on one of the images below to replace the main image</p>
376         <div>
377             <div>
378                 <img src="Rose-sRGB.jpg" alt="A red rose in the sRGB color space">
379                 <span>sRGB</span>
380             </div>
381             <div>
382                 <img src="Rose-ProPhoto.jpg" alt="A red rose in the ProPhoto color space">
383                 <span>ProPhoto</span>
384             </div>
385             <div>
386                 <img src="Rose-AdobeRGB.jpg" alt="A red rose in the Adobe RGB color space">
387                 <span>Adobe RGB</span>
388             </div>
389             <div>
390                 <img src="Rose-oog.jpg" alt="A red rose showing which parts are outside of the sRGB gamut">
391                 <span>Out of sRGB areas</span>
392             </div>
393         </div>
394     </section>
395
396 </body>
397 </html>
398