14 Dejana Javoršek, Janja Močnik and Marica Starešinič University of Ljubljana, Faculty of Natural Sciences and Engineering, Department of Textiles, Snežniška ulica 5, SI-1000 Ljubljana Analyses of Colour Appearances on Different Display Devices Analiza interpretacije barv na različnih prikazovalnih napravah Original Scientific Article/Izvirniznanstveni članek Received/Prispelo 03-2015 • Accepted/Sprejeto 04-2015 Abstract Displaying desired colours on the screen via the web is still a crucial part of being successful for artists and photographers. The aim of our research was to compare accuracies and varieties of displayed colours on different devices and variations on the same device. Seven Apple display screens of various devices were analysed (iPad 2, iPad 3, iPad Mini, iPhone 4, iPhone 5, iMac and MacBook Pro) using two different browsers Safari and Chrome. For iMac display profile iMac, and for MacBook Pro display profile Colour LCD were used. The colour gamuts shown in CIE 1931 x, y and the CIELAB colour diagram were compared with the standard colour space sRGB. The results show that the appearances of colours on different devices are mostly dependent on screen quality. The appearances of colours are largely influenced by the choices of browsers for devices that support colour profiles. In regard to devices with included colour profiles within their displays, it is important to choose a browser that enables colour management to take into account the display colour profile. In our case, the Safari browser takes into account the specific display profile whilst Chrome does not consider those profile. However the results also depend on other factors. These results are important for graphics and fashion designers as well as textile technologists, who present their work and products to their potential clients on different devices. Keywords: colour management, browser, display devices, colour spaces Izvleček Prikazovanje želene barve na zaslonu na spletu je še vedno ključni del uspeha za slikarje in fotografe. Namen naše raziskave je bil primerjati natančnost in različnost prikazanih barv na različnih napravah ter med modeli posamezne naprave. Analiziranih je bilo sedem Applovih zaslonov različnih naprav (iPad 2, iPad 3, iPad Mini, iPhone 4, iPhone 5, iMac ter MacBook Pro) v dveh brskalnikih, Chrome in Safari. Pri napravi iMac je bil uporabljen barvni profil zaslona iMac, pri MacBook Pro pa je bil uporabljen barvni profil Colour LCD. Barvni prostori naprav so prikazani v barvnem diagramu CIEx, y in CIELAB ter primerjani s standardnim barvnim prostorom sRGB. Rezultati kažejo, da na prikaz barv na različnih napravah v veliki meri vpliva predvsem kakovost zaslona. Pri napravah, ki podpirajo barvne profile, na prikaz barv vpliva tudi izbira brskalnika. Pri napravah z vključenim barvnim profilom zaslona je pomembno, da izberemo brskalnik, ki ima omogočeno barvno upravljanje, ki izbrani profil upošteva. V našem primeru brskalnik Safari upošteva določen profil zaslona, medtem ko brskalnik Chrome barvnih profilov zaslona ne upošteva in rezultati so odvisni od drugih dejavnikov. Ti rezultati so pomembni tako za grafične in modne oblikovalce kot tudi za tekstilne tehnologe, ki želijo potencialnim strankam predstaviti svoje delo in izdelke na različnih napravah. Ključne besede: barvno upravljanje, brskalniki, prikazovalne naprave, barvni prostori Corresponding author/Korespondenčna avtorica: Assis. Prof. D.Sc. Dejana Javoršek E-mail: dejana.javorsek@ntf.uni-lj.si Tekstilec 2015, 58(2), 100-107 DOI: 10.14502/Tekstilec2015.58.100-107 Analyses of Colour Appearances on Different Display Devices 101 1 Introduction Nowadays, an increasing amounts of services and retailing take place via the Web. Therefore, the Web has become one of the better tools for photographers, designers and artists in general, enabling them to present their work and products. On-line portfolios, for example, can be easily designed but the colours observed on their screens depend on different parameters, such as the quality of the display device, the resolution, screen brightness, etc. This may change the appearances of images displayed on different devices. This challenge does not only refer to portfolios but also to the sale of the images, and online printing [1]. In order to provide an accurate presentation of the documents or images on the Web, a calibrated screen or display device is rquired together with an image with an embedded profile and browser that enables colour management. Significant differences could occur between browsers depending on whether they support colour management or not [2]. Portable mobile devices are more and more important parts of our lives. We all use mobile phones, tablet devices, navigation devices, as well as computers. The advances in technology, and the fact that we all want to be connected to the Web, to be »online«, all the time and at every location. eMarketer expected 4.55 billion people worldwide to use a mobile phone in 2014. Mobile adoption is slowing but new users in the developing regions of Asia-Pacific and the Middle East and Africa, will drive a further increase. Between 2013 and 2017, mobile phone use will rise from 61.1% to 69.4% of the global population [3]. According to global marketing research, mobile marketing that involves multi-way communication and promotion, between companies and customers using mobile devices is becoming more and more important in retailing environment. The numbes of users of these devices, and related services, indicates the growing audience for mobile electronic communication and marketing, implementing an mobile lifestyle [4]. The development of technology and the increase of markets is resulting in novel devices popping up on the market everyday. The world we live in is in colour and so the colour is important for information as presented on mobile devices, and thus the analyses of colour interpretations on different portable devices are very important. The research of colour on mobile devices, as performed at California State University, indicated that users prefer colours in text and images. The results of this survey indicated user preferences for primary coloured backgrounds in concert with white, black or light-blue foreground colours [5]. Another analysis focused on a novel method for converting a greyscale image into a coloured image for quality image analysis, resulted in a novel algorithm [6]. The greyscale IP operations are very challenging and limited as information extracted from such images is inaccurate. The algorithm they developed is based on transformation of input image using reference colour image by reverse engineering. The grey levels of greyscale image are mapped with the colour image in all the three layers (red, green, blue) and these mapped pixels are used to reconstruct a greyscale image, as represented within a 3 dimensional colour matrix. The algorithm is very simple and accurate and it can be used within any domain such as medical imaging, satellite imaging and agriculture/environment real-scenes. The algorithm is implemented and tested on low-cost mobile devices too, and the results are found to be appreciable. Over recent decades the uses of colour management processes are increasing and are used in many different fields, from digital preparation to print, more recently on the Web, which is very important for complying with the reproduction of the original. The quality of reproduction is influenced by many different factors, from the types of devices to different browsers or operating systems. The same document may look different when printed on different printers or displayed on different screens [7]. In the work by Zoric and Karlovic [8] they suggested a need for novel colour management and colour calibration protocols. They also suggested that future versions of iOS and Android operating systems will be developed in collaborations with ICC. In one report, the author describes the importance of using colour profiles for images that are intended for the Web and recommended the use of sRGB colour space in order to achieve accuracy and consistency of the colour display on the screen. sRGB has been already set for the Web by the W3C (World Wide Web Consortium), unless otherwise specified. In the second part of the report the author presented a method of setting the sRGB colour space of a particular image [9]. The authors of the book Colour Tekstilec 2015,58(2), 100-107 102 Analyses of Colour Appearances on Different Display Devices 101 reproduction and colour management found that there is a problem with the newer displays, implementing greater colour gamut than sRGB, as the colours displayed may vary depending on the type of display and device [2]. Research on the Web describing browser response if Web-safe colours are not used, presented two options: in the first option a browser replaced a particular colour with the colour from the colour palettes, whilst as the other option a particular colour is replaced with the other two colours. The result is a surface composed of dots that look like paint, therefore it is better to avoid the dotted area by using a Web-safe colour, wherever possible. This is especially true for use on tablet devices, smartphones, and colours that are generated by HTML code and GIF files, which are commonly used for logos [10]. Websafe colours consist of 216 colours that display exactly the same on all computers [11]. In one study, the author researched the best methods of ensuring colour quality on the Web, by determining the differences between the displayed images on a variety of browsers of both Macintosh and Windows operating systems. It was found that there was no significant difference in Safari, if the image already had an embedded profile. If the photo did not have an embedded profile, Windows displayed a somewhat brighter image, and in the Firefox browser there were no noticeable differences. The Chrome browser on Macintosh displayed imagery with an embedded profile as in Photoshop, whilst on Windows it looked like an image without an embedded profile. The final findings of the authors were that the operating systems of Windows and Macintosh also affected the displays of images on the web, as well as the choice of browser. For the most consistent browser Mozilla Firefox was chosen as the more consistent browser as there were no noticeable differences in the image colours [1]. The aim of this research was to compare the accuracies and varieties of displayed colours on different devices, and variations on the same device. Seven Apple display screens of various devices were analysed (iPad 2, iPad 3, iPad Mini, iPhone 4, iPhone 5, iMac and MacBook Pro) using two different browsers, Safari and Chrome. Google Chrome has supported ICC v2 and v4 profiles on Apple systems for several years. Chrome version 22 onwards supports ICC profiles v2 on other operating systems [12]. This browser converts image profile to sRGB colour space but the user should set a display colour profile with default settings [13]. Safari with version 2.0 is the first web browser that started supporting colour management on Apple operating systems. It supports ICC profiles and allows colour management on Web. Images without embedded profiles are displayed by using the Safari browser and look slightly supersaturated but only on newer displays with a wider colour gamut. Images with embedded profiles were displayed correctly [14]. This research is important for graphics and fashion designers as well as textile technologists who presents their work and products to their potential clients on different devices. 2 Materials and methods Display screens of various devices were analysed-iPad2, iPad3, iPad Mini, iMac, MacBook Pro, iPhone4 and iPhone5. Three identical models of a particular devicewere measured with display brightness set to maximum value. Equation AE*ab was used for evaluating the data colour difference. The results are presented within a CIE 1931 colour chromaticity diagramme. In our research test chart Colour Checker Classic was used, which represents the more representative colours of nature. The measurements (CIEL*a*b* values) of twenty-four colours from the test chart, displayed on different devices, were performed using a spectrophotometer Eye One (X-Rite) in the emission mode. Each colour was measured on each device in three places and measurements were performed in the Terminal for Mac systems. In regard to other calculations, Microsoft Excel was used for data normalisation, the calculations of colour differences, and the calculations of the chromaticity coordinates x, y, program. 3D CIELAB diagrammes that represent the colour gamuts of individual devices were performed within the MatLab program. 3 Results and discussion The displays of colours in Safari and Chrome browsers on different Apple display devices were analysed during our research. Tekstilec 2015,58(2), 100-107 Analyses of Colour Appearances on Different Display Devices Table 1: Colour difference AE*ab between the colours displayed on different devices in Safari 101 Device iPad 3 iPad 2 iPad Mini iMac MacBook Pro iPhone 4 iPhone 5 iPad 3 X 10.22 11.36 10.86 7.91 14.25 4.41 iPad 2 10.22 X 9.01 8.85 13.97 15.55 11.23 iPad Mini 11.36 9.01 X 6.40 11.41 12.69 8.53 iMac 10.86 8.85 6.40 X 11.02 17.43 8.54 MacBook Pro 7.91 13.97 11.41 11.02 X 18.07 5.51 iPhone 4 14.25 15.55 12.69 17.43 18.07 X 14.25 iPhone 5 4.41 11.23 8.53 8.54 5.51 14.25 X Table 1 shows the colour differences between colours displayed on different devices in the Safari browser. Colour management was only supported on devices iMac and MacBook Pro. The biggest colour difference occured between MacBook Pro and iPhone4. This was expected, as computer screens' support for the uses of profiles and colour management in Safari is fully enabled. The minimum colour difference (AE*ab 4.41) was obtained between the iPad 3 and iPhone 5. In general, the colour differences between devices were fairly significant. The reason can be found in the different screen qualities, and certain tablet devices and smart phones have lower qualities than the computer screens. Figures 1-4 show a comparison between different versions of the same device. Figures 1 and 2 show the colour gamuts of devices iPad (iPad 2, iPad 3 and iPad Mini) in Safari. In the 3D diagramme (Figure 2) we could see that those dots that marked the iPad 2 and the iPad Mini, were somewhat closer together, whilst the dots that marked device iPad 3 were well separated from the other two devices, the lightness of iPad 3 was higher. The Figures show the Lab value as delivered by the measuring program, all of the values calculated according to a standard light source D50, and some values of L* higher than the 100. Measured values CIEL* of colours presented in Figure 2 were higher than the value 100, as the displays typically have higher luminance than other media. The chromaticity diagramme (Figure 1) shows colour gamuts where iPad 2 and iPad Mini were quite similar, whilst the iPad 3 was expanded more in some areas. When the colour gamuts were compared to the sRGB colour space, which is recommended for use on the Web, we could see that they were much closer to the iPad 3, thus having a larger colour gamut than the other two, so we can conclude that iPad 3 is more suitable for viewing images in Safari. —I T iT i—i—i—i—i—i—i—i—i—i—i—i—i 0,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 x Figure 1: The colour gamut of iPad devices in Safari, presented in the 1931 CIE x, y 160^ 140- • t 120- • •1 100- • —1 / 80. • • 1 60- » « • K # % 40- 1 20^ • • -100 _____„ ^50 1°° 150 a b • ¡Pad 3 • ¡Pad Mini • ¡Pad 2 Figure 2: 3D diagramme of colour spaces of iPad devices (Safari browser, L = L*, a = a*, b = b*) Tekstilec 2015,58(2), 100-107 104 Analyses of Colour Appearances on Different Display Devices 101 Figures 3 and 4 show a comparison between the devices iPhone 4 and iPhone 5. iPhone 4 has a smaller colour gamut than iPhone 5, which means that those colours displayed on iPhone 5 were more saturated. In Figure 4, a difference in brightness between devices is noticeable - on iPhone 5 the displayed colours are brighter than on iPhone 4. Figure 3 shows that the colour gamut of iPhone 5 was much closer to the standard sRGB space, so we can conclude that iPad 3 is more suitable for viewing images in Safari. Figures 5 and 6 show a comparison between the computer screen iMac and MacBook Pro in the Safari browser. The dots in the 3D diagramme (Figure 6) do not match, and the colour gamut of MacBook Pro in the chromatic diagramme (Figure 5) is rather larger than that of iMac and somewhat closer to the standard sRGB space. The Colours displayed on the device MacBook Pro are brighter and more saturated than those colours displayed on the device iMac. 0,9 0,8 0,7 0,6 500 0,5 0,4 0,3 0,2 0,1 • ¡Phone 4 • ¡Phone 5 • srgb 0,0 580 480 460 ■ 600 620 0,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 x 0,9 0,8 0,7 0,6 500 0,5 0,4 0,3 0,2 0,1 520 ¡Mac 1 ¡MacBook Pro sRGB 560 0,0 .600 ■L 620 ► 480 460 0,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 x Figure 3: The colour gamut of iPhone devices in Safa- Figure 5: The colour gamuts of iMac and MacBook ri, presented in the 1931 CIE x, y 180. 160. 140120-1 1008060- Pro in Safari, presented in the 1931 CIE x, y 100X5-150-100 -50 0 a b >¡Phone 4 •¡Phone 5 50 100 150 140^ • 120- 100- • • • t j 8060- •• • 'o 40- Mt 20> -100 -50 0 50 • • • 200 100 100 -100 a > ¡Mac I ¡MacBook Pro Figure 4: 3D diagrammme of the colour spaces of Figure 6: 3D diagramme of colour spaces iMac and iPhone devices (Safari browser, L = L*, a = a*, b = b*) MacBook Pro (Safari browser, L = L*, a = a*, b = b*) 0 b Tekstilec 2015,58(2), 100-107 Analyses of Colour Appearances on Different Display Devices 105 Table 2: The colour differences AE*ab amongst devices in Chrome Device iPad 3 iPad 2 iPad Mini iMac MacBook Pro iPhone 4 iPhone S iPad S X 7.S0 7.07 S.20 7.96 1S.SS 4.47 iPad 2 7.S0 X 2.S4 12.S2 11.52 10.S4 S.95 iPad Mini 7.07 2.S4 X 11.91 11.59 10.7S S.67 iMac S.20 12.S2 11.91 X 10.62 20.75 11.4S MacBook Pro 7.96 11.52 11.59 10.62 X 16.7S 9.57 iPhone 4 1S.SS 10.S4 10.7S 20.75 16.7S X 11.57 iPhone 5 4.47 S.95 S.67 11.4S 9.57 11.57 X The second part of the comparisons between different devices was implemented in Chrome. Of all the measured devices, colour management was only supported on devices iMac and MacBook Pro. Table 2 shows that the maximum colour difference (20.75) occurred between the mobile phone iPhone 4 and the computer screen iMac. The differences between the devices in Chrome were slightly lower than in Safari, but still unexpectedly greater. ¡Pad 3 ¡Pad 2 ¡Pad M¡n¡ sRGB 0,9 0,8 ü,7 ü,6 5ÜÜ ü,5 ü,4 ü,3 ü,2 Ü,1 ü,ü f I —I-—f" ' 1--f '1 — f"l 1 I 1 I I I ü,ü Ü,1 ü,2 ü,3 ü,4 ü,5 ü,6 ü,7 Ü,S Figure 7: The colour gamut of all iPad devices in Chrome, presented in the 1931 CIE x, y Figures 7 and 8 show a comparison between the three devices iPad in Chrome browser. Figure 8 shows that the colours displayed on the device iPad 3 varied in brightness. From the chromatic diagramme (Figure 7) it can be seen that the device iPad 3 is again closest to the sRGB colour space, which means that colours displayed on the iPad 3 are the more saturated and that iPad 3 has the largest colour gamut. Colour gamuts of devices iPad 2 and iPad Mini are very similar and have a smaller colour space than the iPad 3. 16Ü 14Ü-12Ü-1ÜÜ SÜ-6Ü-4Ü- 2Ü. -1 ÜÜ > V / J t ' t * I- 1ÜÜ 15Ü 1ÜÜ~'-1ÜÜ -5Ü ü 5Ü ab • ¡Pad 3 < ¡Pad M¡n¡ • ¡Pad 2 Figure 8: 3D diagramme of the colour spaces of all iPad devices (Chrome browser, L = L*, a = a*, b = b*) Figures 9 and 10 show a comparison of colour spaces between the iPhone 4 and iPhone 5. As in the Safari browser it can be seen (Figure 9) that the colour gamut of the device iPhone 5 is much greater than the colour gamut of iPhone 4, which means that the colours displayed on iPhone 5 were more saturated. Also the difference in lightness is quite significant (Figure 10), however the colours displayed on iPhone 5 are brighter than on iPhone 4. Tekstilec20lS,58(2), l00-l07 Ü x 106 Analyses of Colour Appearances on Different Display Devices 101 • ¡Phone 4 • ¡Phone 5 • srgb 0,9 0,8 0,7 0,6 500 0,5 0,4 0,3 0,2 0,1 0,0 0,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 x Figure 9: The colour gamuts of two iPhone devices in Chrome, presented in the 1931 CIE x, y 180 160 140 120 -i 100 80 60 40 20 -100 • • • • • • 100 -150 -100 -50 0 a b • ¡Phone 4 • ¡Phone 5 50 100 150 ¡Mac MacBook Pro sRGB 0,9 0,8 0,7 0,6 500 0,5 0,4 0,3 0,2 0,1 0,0 0,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 x Figure 11: The colour gamuts of iMac and MacBook Pro in Chrome, presented in the 1931 CIE x, y 140-, 120 100 80 60 40 20 -100" « • # » • • t 'f • m w • • V « m • » • • • • • 100 -100 -50 50 100 150 a • ¡Mac "MacBook Pro Figure 10: 3D diagramme of the colour spaces of two iPhone devices (Chrome browser, L = L*, a = a*, b = b*) Figures 11 and 12 shows a comparison between the two devices, iMac and MacBook Pro, in the Chrome browser. The colour difference (10.62) between these devices is also evident in Table 2. The iMac displayed colour slightly brighter than the device MacBook Pro, whilst the colour gamut of iMac is smaller than the colour gamut of MacBook Pro, however the colours displayed on the MacBook Pro were saturated more. Figure 12: 3D diagramme of the colour spaces of iMac and MacBook Pro (Chrome browser, L = L*, a = a*, b = b*) Figures 2, 4, 6, 8, 10 and 12 shows the L*a*b* values as calculated by the measuring program, where all of the values are calculated according to a standard illuminant D50. This is the reason why some values of L* are higher than 100. 4 Conclusion The aim of our research was to compare the accuracies and varieties of displayed colours on different devices, and different types of the same device. Unlike 0 0 b Tekstilec 2015,58(2), 100-107 Analyses of Colour Appearances on Different Display Devices 101 the Safari browser, the Chrome browser does not use the colour display profile. In the cases of some devices, we did not expect such significant (almost disturbing) deviations in colour for the same types of the devices (iPad, iPhone), which is also influenced by the choice of browser used (colour difference between devices is smaller in the case of Chrome). On the devices iPad and iPhone colour management is not supported, so the colour displaying is mostly dependent on the quality of the screen. The other two devices iMac and MacBook Pro are colour-management supported but only in Safari, whilst the Chrome browser excludes the colour profile of the display. In that case, according to the calculated colour differences which are similar for both used browsers, we could not determine which browser was better for colour reproduction. For all devices, the colours displayed on the screens largely depended on the qualities of the screen. This research is important for graphics and fashion designers as well as textile technologists, who presents their work and products on different devices to their potential clients. References 1. WONG, Alice. Colour management for Web browsers [online], Graphic Comunication, Senior project 2010, College of Liberal Arts, California Polytechnic State University, 2010, [accessed 28. 5. 2014]. Available on World Wide Web: . 2. JAVORSEK, Dejana, MUCK, Tadeja in KAR-LOVIC, Igor. Reproduciranje barv in barvno upravljanje. Ljubljana: Univerza v Ljubljani, Naravoslovnotehniska fakulteta, Oddelek za tekstilstvo, 2013, pp. 275. 3. Smartphone users worldwide will total 1.75 billion in 2014 [online], emarketer.com/Article/ Smartphone-Users- Worldwide- Will- Total-175-Billion-2014 [accessed 16. 2. 2014]. Available on World Wide Web: . 4. SHANKAR, Venkatesh, VENKATESH, Alladi, HOFACKER, Charles and NAIK, Prasad. Mobile marketing in the retailing environment: current insights and future research avenues. Journal of Interactive Marketing, 2010, 24(2), 111-120, doi:10.1016/j.intmar.2010.02.006. 5. KERBS, W. Robert. An empirical comparison of user color preferences in electronic interface design [online], California State Polytechnic University, 2003 [accessed 16. 2. 2014]. Available on World Wide Web: . 6. PRASAD, Shitala, KUMAR, Piyush, SINHA, Kumari Priyanka. Grayscale to color map transformation for efficient image analysis on low processing devices. In: Advances in Intelligent Informatics. Editor: El-Sayed M. El-Alfy et al., Springer International Publishing Switzerland, 2015, 9-18, doi./10.1007/978-3-319-11218-3_2. 7. ICC colour management [online], International Colour Consortium [accessed 16. 2. 2014]. Available on World Wide Web: . 8. ZORIC, Vladimir and KARLOVIC, Igor. Color reproduction on tablet devices, Acta Graphica, 2014, 25(1-2), 31-36. 9. DUGGAN, Seán. Colour management: Use the correct ICC profile for web images [online]. [accessed 12. 4. 2014]. Available on World Wide Web: . 10. LIPERA, Roger. Introduction to colour & the Web [online]. Interactive Media Center, University at Albany [accessed: 1. 3. 2015]. Available on World Wide Web: . 11. PREISTER, Gary W. Htmlgoodies. Consistent colors for your site - all you need to know about Web safe colors [online]. HTMLGoodies Staff [accessed: 12. 3. 2014]. Available on World Wide Web: . 12. TINDEMANS, Simon. Web browser colour management [online]. Initial publication, 2012 [accessed 15. 2. 2013]. Available on World Wide Web: . 13. PILI, Fábio. Web browser colour management guide [online]. Published by Fábio Pili, 2010 [accessed 1. 3. 2015]. Available on World Wide Web: . 14. Colour management in Safari [online]. Technical Note TN2220, Safari Developer Library [accessed 1. 3. 2015]. Available on World Wide Web: . Tekstilec 2015,58(2), 100-107