Skip to main content
SpringerLink
Log in

Screenshot-based color compatibility assessment and transfer for Web pages

  • Published:
Multimedia Tools and Applications Aims and scope Submit manuscript

Abstract

Colors play particularly important roles in both designing and accessing Web pages. A well-designed color scheme improves the visual aesthetic of Web pages and facilitates user interactions. As far as we know, existing studies on color compatibility assessment and enhancement focus on images, and the assessment and enhancement for Web colors are rare. In order to aid Web designers evaluate and choose colors, this paper investigates color compatibility assessment for Web pages and applies this assessment to Web color editing based on Web screenshots rather than source codes. This study consists of four parts. First, the roles of color design in Web pages are discussed and a screenshot-based approach is proposed for the analysis of Web page regions. Second, a new method for extracting the color theme of a Web page is proposed. Then, we construct an assessment model that attributes scores to the color compatibility of Web pages through transfer learning. Third, we examine Web color transfer and combine it with the learned compatibility assessment model to create a new application that recommends colors for Web design. Lastly, the evaluation results suggest that the constructed compatibility assessment model and the proposed color transfer technique are effective and are superior over conventional methods. User studies suggest that our color recommendation application can generate new Web page screenshots that have higher color compatibility scores in comparison with those of the original pages.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Log in via an institution

Price excludes VAT (USA)
Tax calculation will be finalised during checkout.

Instant access to the full article PDF.

Institutional subscriptions

Fig. 1
Fig. 2
Fig. 3
Fig. 4
Fig. 5
Fig. 6
Fig. 7
Fig. 8
Fig. 9
Fig. 10
Fig. 11
Fig. 12
Fig. 13
Fig. 14
Fig. 15
Fig. 16
Fig. 17
Fig. 18
Fig. 19

Similar content being viewed by others

Notes

  1. In previous literature, color theme is a concept used in image/video analysis. Following the definition used in [24], the color theme of a Web page is defined as an ordered combination of 5 (or less) colors that can best represent the colors of that page.

  2. Ideally, color transfer should ideally be investigated between Web pages. However, color transfer between pages requires the colors of each position of the Web pages and their corresponding positions in the source codes which is quite challenging. In addition, Web design has become increasingly graphical in nature [14]. Therefore, in terms of Web color design, a screenshot with new colors through color transfer can also inspire designers. In addition, the approach investigated for color transfer between Web page screenshots can also transfer the colors of images or videos into a Web page screenshot.

  3. http://www.webdesign.org/web-design-basics/color-theory/ the-importance-of-color-in-web-designing.12437.html

  4. Temporal Web pages of a given URL can be obtained from http://web.archive.org/automatically.

  5. There have been several Web page block division algorithms. These algorithms are based on analyzing source codes. As this study does not intend to analyze HTML source codes, these existing algorithms are not used in this work.

  6. In the experiments, because it is difficult to conduct a theoretical analysis for the optimal values of the involved parameters, the parameters were chosen based on grid search on a small validation set. The block sampling times was chosen from the candidate set {500, 1500, 2000, 2500, 3000}. For N 1 and N 2, a set of candidate values {(20, 20), (25, 25), (30, 30), (35, 35), (40, 40), (45, 45), (50, 50)} was tested. When the number of the sampling times was set as 2000, and the values of (N)1,N 2) were set as {40, 40}, the performance was the best.

  7. The choice of this number follows the choices in previous studies on image color theme extraction. In addition, a larger number requires more features which may lead to less accurate learning performances because of curse of dimensionality.

  8. When the block sampling-based method is used, the value of w i approximately proportions to the similarity of the block the i-th pixel locates.

  9. http://www.colormax.org/colorblind-test.htm

  10. The step of transforming new colors into a Web page relies on a powerful code analysis method that can infer the color of each position of a Web page. Unfortunately, to our knowledge, existing source code analysis techniques cannot implement these inferences.

  11. The dynamic and static parts of the reference Web pages’ screenshots are still extracted by the proposed algorithm. The number of reference pages can be large, whereas the number of source page is only one. Therefore, automatic extraction for the reference pages and manual extraction for the source page are reasonable. In fact, many computer graphic techniques are semi-automatic and require human interaction during running. If an accurate static part location algorithm is obtained in our future work, the new algorithm will be directly used in the approach.

  12. Cartoon images are selected because they usually have vivid and brighter colors.

  13. The value 56.67% is based on the evaluation of the top-3 Web screenshots. If top-5 or top-10 Web screenshots are returned, the value will most likely increase. All the top-N transferred screenshots are shown to designers. Whether or not they will be used depends on the choices of designers.

References

  1. Alexa (2011) http://www.alexa.com/topsites11/30/2011

  2. Cao LJ, Chua KS, Chong WK (2003) A comparison of pca, kpca and ica for dimensionality reduction in support vector machine. Neurocomputing 55(1–2):321–336

    Google Scholar 

  3. Cohen-Or D, Sorkine O, Gal R, Leyvand T, Xu YQ (2006) Color harmonization. ACM Trans Graph 25(3):624–630

    Article  Google Scholar 

  4. Coursaris CK, Lansing E, Swierenga SJ, Watrall E (2008) An empirical investigation of color temperature and gender effects on web aesthetics. J Usability Stud 3(3):103–117

    Google Scholar 

  5. Cyra D, Head M, Larios H (2010) Colour appealinwebsitedesignwithinandacrosscultures: A multi-methodevaluation. Int J Hum Comput Stud 68:1–21

    Article  Google Scholar 

  6. DIAOCHA (2015) http://www.diaochapai.net/

  7. Dong W, Bao G, Zhang X, Paul JC (2010) Fast local color transfer via dominant colors mapping ACM SIGGRAPH ASIA 2010 Sketches. ACM, pp 46:1–46:2

  8. Flatla DR, Reinecke K, Gutwin C, Gajos KZ (2013) Sprweb: Preserving subjective responses to website colour schemes through automatic recolouring. In: ACM SIGCHI conference on human factors in computing systems (CHI), pp 2069–2078

  9. Fleiss JL (1971) Measuring nominal scale agreement among many raters. Psychol Bull 76(5):378–382

    Article  Google Scholar 

  10. Forero PA, Kekatos V, Giannakis GB (2012) Robust clustering using outlier-sparsity regularization. IEEE Trans Sig Proc 60(8):4163–4177

    Article  MathSciNet  Google Scholar 

  11. Goethe J (1810) Theory of Colors

  12. Hochbaum D, Shmoys D (1985) A best possible heuristic for the k-center problem. Math Oper Res 10(2):180–184

    Article  MathSciNet  MATH  Google Scholar 

  13. Huang J, Alexander JS, Gretton A, Borgwardt KM, Schölkopf B (2006) Correcting sample selection bias by unlabeled data. In: The neural information processing systems (NIPS), pp 601–608

  14. Ivory MY, Megraw R (2005) Evolution of web site design patterns. ACM Trans Inf Syst 23(4):463– 497

    Article  Google Scholar 

  15. Ivory MY, Sinha RR, Hearst MA (2001) Empirically valiyeard web page design metrics. In: Proceedings of the SIGCHI conference on human factors in computing systems, pp 53–60

  16. Kendall M (1938) A new measure of rank correlation. Biometrika 30:81–89

    Article  MATH  Google Scholar 

  17. Kondratova I, Goldfarb I (2007) Color your website: use of colors on the web. In: International conference on usability and internationalization, pp 123–132

  18. Koufaris M (2002) Applying the technology acceptance model and flow theory to online consumer behavior. Inf Syst Res 13(2):205–223

    Article  Google Scholar 

  19. Kumar R (2012) Data-driven interaction web design. In: ACM symposium on user interface software and technology, pp 2197–2206

  20. Kumar R, Talton JO, Ahmad S, Klemmer SR (2011) Bricolage: example-based retargeting for web design. In: ACM SIGCHI conference on human factors in computing systems (CHI), pp 2197–2206

  21. Lafleur C, Rummel B (2011) Predicting perceived screen clutter by feature congestion. In: Mensch & computer 2011: 11. fachübergreifende konferenz für interaktive und kooperative medien. überMEDIEN-ÜBERmorgen, p 101

  22. Lalonde JF, Hoiem D, Efros AA, Rother C, Winn J, Criminisi A (2007) Photo clip art. ACM Trans Graph 26(3)

  23. Lee S, Koubek RJ (2010) The effects of usability and web design attributes on user preference for e-commerce web sites. Comput Ind 61(4):329–341

    Article  Google Scholar 

  24. Lin S, Hanrahan P (2013) Modeling how people extract color themes from images. In: Proceedings of the SIGCHI conference on human factors in computing systems, CHI’13, pp 3101–3110

  25. Ling J, Van Schaik P (2002) The effect of text and background colour on visual search of web pages. Displays 23(5):223–230

    Article  Google Scholar 

  26. Liu W, Meng X, Meng W (2010) Vide: A vision-based approach for deep web data extraction. IEEE Trans Knowl Data Eng:447–460

  27. Nielsen J (2006) F-shaped pattern for reading web content. http://www.useit.com/alertbox/readingpattern.html

  28. O’Donovan P, Agarwala A, Hertzmann A (2011) Color compatibility from large datasets. ACM Trans Graph 30(4):63:1–63:12

    Google Scholar 

  29. Ou LC, Luo MR, Woodcock A, Wright A (2004) A study of colour emotion and colour preference. part i: Colour emotions for single colours. Color Res Appl 29 (3):232–240

    Article  Google Scholar 

  30. Ou LC, Luo R, Wright AWA (2007) A study of colour emotion and colour preference. part i: Colour emotions for single colours. Color Res Appl 29(3):232–240

    Article  Google Scholar 

  31. Park S, Choi D, Kim J (2004) Critical factors for the aesthetic fidelity of web pages: empirical studies with professional web designers and users. Interact Comput 16:351–376

    Article  Google Scholar 

  32. Pitié F, Kokaram AC, Dahyot R (2007) Automated colour grading using colour distribution transfer. Comput Vis Image Underst 107(1-2):123–137

    Article  Google Scholar 

  33. Reinecke K, Yeh T, Miratrix L, Mardiko R, Zhao Y, Liu T, Gajos KZ (2013) Predicting users’ first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In: ACM SIGCHI conference on human factors in computing systems (CHI), pp 2049–2058

  34. Reinhard E, Ashikhmin M, Gooch B, Shirley P (2001) Color transfer between images. IEEE Comput Graph Appl 21(5):34–41

    Article  Google Scholar 

  35. Rubner Y, Tomasi C, Guibas LJ (2000) The earth mover’s distance as a metric for image retrieval. Int J Comput Vision 40(2):99–121

    Article  MATH  Google Scholar 

  36. Schloss KB, Palmer SE (2011) Aesthetic response to color combinations: preference, harmony, and similarity. Atten Percept Psychophys 73(2):551–571

    Article  Google Scholar 

  37. Schmidta KE, Liua Y, Sridharanb S (2009) Webpage aesthetics, performance and usability: Design variables and their effects. Ergonomics 52:631–643

    Article  Google Scholar 

  38. Su Z, Zeng K, Liu L, Li B, Luo X (2014) Corruptive artifacts suppression for example-based color transfer. IEEE Trans Multimedia 16(4):988–999

    Article  Google Scholar 

  39. Tai YW, Jia J, Tang CK (2005) Local color transfer via probabilistic segmentation by expectation- maximization. In: IEEE conference on computer vision and pattern recognition (CVPR), pp 747–754

  40. Thorlacius L (2007) The role of aesthetics in web design. Nordicom Review 28 (1):63–76

    Article  Google Scholar 

  41. Valdez P, Mehrabian A (1994) Effects of color on emotions. J Exp Psychol 123(4):394–409

    Article  Google Scholar 

  42. Wang B, Yu Y, Wong TT, Chen C, Xu YQ (2010) Data-driven image color theme enhancement. ACM Trans Graph 29(6):146:1–146:10

    Google Scholar 

  43. Xiao Y, Wan L, Leung CS (2013) Example-based color transfer for gradient meshes. IEEE Trans Multimedia 15(3):549–560

    Article  Google Scholar 

  44. Yang Y, Zhao H, You L, Tu R, Wu X, Jin X (2015) Semantic portrait color transfer with internet images. Multimedia Tools and Applications:1–19

  45. Zhu X, Gauch S (2000) Incorporating quality metrics in centralized/distributed information retrieval on the world wide web. In: International ACM SIGIR conference on research and development in information retrieval, pp 288–295

Download references

Author information

Authors and Affiliations

  1. Center for Applied Mathematics, Tianjin University, Tianjin, China

    Ou Wu

  2. NLPR, Institute of Automation, Chinese Academy of Sciences, Beijing, China

    Mengqiao Han

Authors
  1. Ou Wu
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. Mengqiao Han
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Ou Wu.

Additional information

This work is supported by NSFC No. 61379098.

Electronic supplementary material

Below is the link to the electronic supplementary material.

(PDF 678 KB)

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Wu, O., Han, M. Screenshot-based color compatibility assessment and transfer for Web pages. Multimed Tools Appl 77, 6671–6698 (2018). https://doi.org/10.1007/s11042-017-4582-4

Download citation

  • Received:

  • Revised:

  • Accepted:

  • Published:

  • Issue Date:

  • DOI: https://doi.org/10.1007/s11042-017-4582-4

Keywords

Search

Navigation