Data driven webpage color design

• The first attempt to automate webpage coloring through a data driven approach.
• We addressed the three fundamental design objectives of webpage coloring.
• We introduced novel probabilistic models capturing color contrasts and semantics.
• The models coordinated with the lexicographic strategy prove effective in demos.
• User tests verify the system-generated designs are more preferable.

This paper presents a design framework for automatic webpage coloring regarding several fundamental design objectives: proper visual contrasts, multi-color compatibility and semantic associations. The objective functions are formulated with data-driven probabilistic models: the Color Contrast model concerning visual saliencies is trained on 52,000 basic components parsed from 500 popular webpages. Color Compatibility and Semantics are modeled from a dataset of manually tagged and rated color schemes from Adobe Kuler. To incorporate the multi-objectives in optimization, the framework adopts a lexicographic strategy, which determines the best choices by optimizing the objectives one by one in a user specified sequence. We demonstrate the effectiveness of the models and the flexibility of the framework in two typical web color design scenarios: fine tuning a colored page and recoloring a page with a specified palette. Independent perception experiments verify that the system-generated designs are preferable to those generated by nonprofessionals.