Dynamic Color Theming and Relative Color Predicting in HTML Documents

Abstract

Colors add an extraordinary value to anything. Colors of the HTML user interfaces give them a fascinating attraction for users. But today HTML pages are written in a static way which the colors are embedded into the code. This property makes it very hard to change once the design is finalized. We have to define many CSS pages as themes, since we need web sites in many color ranges. We purpose a solution to this issue by letting the colors of the HTML pages to be dynamic even after the design is finalized. We purpose a framework which is called “Chameleon JS” Users of the framework need to integrate it to their HTML documents. Then they can change the colors of a particular HTML document. We can choose any color form the planet for the web document. Framework is built by experimenting the properties of color and the way they are presented in the computer screen. We purpose a way to define a color relative to another color. This relativity property is used to predict a color which is relative to the initially defined color of the HTML document. This way we keep the initial color combination of the HTML page and change the colors relatively to another color. Purposed framework is written in native CSS and JavaScript with HTML 5 standard. Hence, we assume any web technology can adapt this framework and use with their respective applications. RGB and HSL color schemes are considered to find a method to define colors relatively. HSL color scheme is selected with its unique features of dividing color into several aspects. Hue, Saturation and Lightness are compared when predicting a new color. This work achieves the state of dynamic color theming for the HTML documents using HSL color scheme. Furthermore, the framework is able to keep the color consistency and predict new colors relative to a previously defined color while keeping the initial color scheme of the original HTML document. CSS variables are used to apply the relevant colors into the HTML document. With CSS variables colors which are predicted can be applied right away to the HTML document. Dynamic color theming and relative color predicting framework is tested against many technologies and succeeded over them. A website called “chameleonjs.xyz” is created for the convenience of the users. Download bundles are available in this website. Design, implementation and the evaluation of this work is included in this report.