Building a Color Guideline for TV UI

Define the palettes and coloring methodology.

BACKGROUND
Founded in 1958, Changhong is a top 5 smart TV manufacturer and the most well-known home appliances enterprise in China.
‍
This project was to develop a TV version of UI design system to solve problems of visual inconsistency caused by different designers, time period and platforms.
ROLE
Competitive Analysis, Palettes & Coloring Methodology Producing, Testing & Implementing
‍
July - September, 2020
Our goals
Our design system consists of interaction and visual parts, the later of which is composed of 8 modules as are pictured on the right.

The color module contains two parts: color values and color usage. The values are especially suitable for TV screens, while the color usage is a methodology that guides the designers’ regular work.
Two goals
1. Unify color schemes across Changhong’s main TV models in a time period;
2. For different models or period, let the coloring directed by a certain methodology and let the code base reused, so as to increase team efficiency.
Principles
First of all, the 6:3:1 principle was applied in my whole coloring work. Second, unlike portable devices, television has big screen and far watching distance, needing people using remotes to control the focus component. TV has its own coloring principles:
Dark Mode
‍
It will bring much eye strain If TV colors its background by white or light gray. Moreover, TV makes better user experience when providing a sense of immersion, and the dark mode can highlight its content and actions.
Muted Background
Background uses the primary color, but it should be underwhelming to set off information. Moreover, color as well as other visual treatments should distinguish different states of the components.
Findable Focus
‍
TV uses a focus component, which is controlled by a remote, for navigation. Users should always know where they are at a glance, so not only the focus color should make it stand out, but also there can only be one focus color on a screen.
Test on TV
‍
Colors on TV can look very different from computer or mobile devices. We must make sure the effect satisfies on an ordinary TV screen before delivering design outputs.
The background color
Competitive analysis
There are two types of background colors: solid color vs gradient colors.

On-screen performance told us that for tool-oriented screens, which contain no gorgeous pictures, the “even-toned color” is too dull: the focus color is overwhelmed by large-scale darkness. This is probably why most TV products use gradient colors.
monochromatic color is too dull
iQiyi’s gradient colors was widely praised
The background color
Here are rules for big screen's background gradient colors concluded by us:
cold
smooth
natural
legible

Cold colored background shows a sense of retreat.

Small gradient gap can avoid color strips. Saturation of between the gradients will be adjusted.

Change from top side light to bottom side dark looks like dented. Saturation between them needs to be adjusted.

The lighter part should ensure the text has sufficient legibility when there’re overlapping containers behind it.

In our previous projects, “sense of technology” has been most demanded for product tonality. This guided us to blue color, which is most properly representative of a tech feeling. We found 2 color values ​​for gradients: HSB (219,45,17) and HSB (219,38,27). To reduce rigidness, we increased the saturation at the position of 30% close to the dark side, and added a highlight in the upper right corner:

The background color

The focus color
Competitive palettes analysis
Since I didn’t find a detailed color specification for TV UI, I looked for inspiration from five big companies: LG, Apple, Alibaba, IBM and Google. Alibaba and Apple have specific dark mode palettes while Google (Material Design) recommends its brighter colors for dark mode, and darker range for TV.
The focus color
Unlike LG owning its brand color - an elegant magenta - to use for the focus, we don't have one. Based on our product characteristics, the color theme must not be too distracting, so we also limited the focus color within blue hue. I didn't pick a value from nature or just make up one. Actually I picked all blues from those big companies' palettes, which had been adjusted by algorithms.

There is often some text (usually using "TV White” #F0F0F0) appearing on the focused element such as a button. To make sure the accessibility of the text on focus, and of the focus on background, I calculated the blues' contrast ratios against the "TV White" and our background color (#282E45), then kept 6 blues that met the WCAG2.0 AA Standard of at least 3:1. The 6 blues were displayed on the pre-determined background on TV, in the form of buttons. More than 20 users voted for #2979FF, which is the Blue A400 of Material Design.
1. All blues
2. Six blues meeting the contrast ratio
3. The winner blue on TV screen
The focus color
Ocean
#2979FF  HSB(218, 84, 100)
Derived core colors
With the focus color’s hue value of 218, other hues can be derived from it based on the angle differences on the color wheel. Theoretically, 2 neighboring colors, 2 analogous colors, 2 mid-difference colors, 2 triadic colors and 1 complementary color in relation to the focus color will be obtained.
Some failed attempts
First we calculated by a set of certain angle differences in color wheel, but the resulting colors looked factitious and not “intuitive” enough, as shown on the right.

Although Material Design offers a tool to produce derived colors, the result was not good as its not customized for dark mode. Then we tried to expand the range of angle differences and also looked for colors from those big companies.
Saw hope from big companies
The palettes of Apple, IBM, Alibaba and Google have 10, 7, 12 and 16 color hues respectively. Those hues’ angle differences are all not equal: blue, red, and orange account for the largest proportion, while magenta and spring green are less.
I used RGB wheel in stead of RYB wheel, but l felt not completely appropriate when reviewing the work. But it didn’t have much impact on the results of this project. Please read my conclusion about the two wheels at the last page of this work.
In fact, the hue differences are not fixed values, but range within some intervals. For example, as long as the hue difference between a color and the focus color is in (60°, 120°), that color is a mid-difference color, and if the difference is in (120°, 165°), it’s a triadic color. In the four companies’ palettes, I picked the colors with moderate hues, then checked their actual performance on TV, considering that the function colors (like red, yellow and green) need be intuitive. Finally I got 9 derived core colors:
10-Core Family:
This set of core colors not only appear aesthetically pleasing on TV but also have proper red, yellow and blue to act as function colors.
Examples of Core Colors
Customized TV model
Changhong mainstream models
The video application has rich functions and a sense of technology, Ocean and Magenta are used to communicate different actions.
Targeting at young users, the rotating game TV applies Green and Violet from the core family to reflect personality and coolness.
The palettes
Variants from light to dark
Having the 10 core colors, the next step was to generate their variants, which were 10 swatches from light to dark. Initially we used semi-translucent black and white masks to cover the core colors, but it turned out not ideal. Material Design and Alibaba both provided color gradation tools and Alibaba specially had a dark mode, which was the most suitable. Take the focus color for example:
The version produced by black/white mask was rigid.
Alibaba's light mode tool: the deeper colors produced optical vibrations on our dark background.
Material Design’s tool: there was little obvious change in tone.
Alibaba's dark mode tool: the deeper parts looked comfortable on our dark background.
The other 9 core colors also got their variants from Alibaba’s dark mode tool.
The palettes
Dark mode palette
Light mode palette
Considering the operation design, the light mode palettes are also necessary.
In the dark mode, since Indigo and Violet palettes look too close, Indigo was removed, so only 9 hues were left. The result of Alibaba dark mode tool is that our original core colors are independent of the calculated palettes, but we still kept the the core colors because they can be used in focus components which have a principle to be eye-catching.
Function colors
In dark mode, colors were desaturated to reduce visual vibration.
Container and grayscale colors
The container colors
The container color is typically used by floating surfaces like the pop-up window. The principle here was to present the visual hierarchy while weaken container's existence as much as possible.
Among competitive products, Apple's "Translucency and Vibrancy" was the most beautiful, but we couldn't support this real-time blurring. To ensure the text legibility against a playing video behind it, the container should have very high opacity.
Container 1
#1B222F  HSB (27, 34, 47)
Container 2
#323A4B  HSB (50, 58, 75)
We defined two container colors to ensure visual hierarchy in case there’re containers overlapping. They are derived from the previous background.

Container 1: Close to the darkest part of background gradients.
Container 2: Overlaid 10% opacity of white on container 1, then adjusted the saturation.
Examples of container colors
Grayscale colors
Grayscale colors are neutral grays that have a hue value of 0, predominantly used for text, icons, strokes, the non-floating component surfaces, etc. In TV UI, the brightest color is called "TV White", which generally is not pure white because that’s too harsh on TV. There are two ways to generate the grayscale color midtones:
1 / Starting from pure white/black, gradually reduce the opacity. This approach is easy to remember, allows the elements better blend into a colored background, and makes the color scheme rich in subtle changes. The disadvantage is that we can’t add a little blue in it, so it doesn’t work well on gray backgrounds.
‍
2 / Define the color value of each midtone, all of which are opaque. The advantage of this approach is that we can manually add some faint blue in grayscale colors. But it’s more suitable for gray backgrounds, as it will look a little dirty if used on the colored backgrounds.
Since our TV UIs nearly have no gray background, we adopted the first way:
Color usage and examples
So far, all color values had been defined. As a team, we knew that there’s no universal formula for all UIs coloring. But we tried our best to find a way that helps most of our regular interface designs.
Coloring methodology
Based on the 6:3:1 principle, our background color which has the largest proportion is 6, and the focus color that calls to action is 3. Other colors are used sparingly and purposefully, which are the 1 - I call them decoration colors (including the function colors), and they are selected from our palettes. Decoration colors are optional. PS: the 6:3:1 relationship is considered at the level of all pages.
Background
color
60%
Focus
color
30%
Decoration
color
optional
10%
Container
color
not included in 631 relationship since they don't appear frequently.
Grayscale
color
not included in 631 relationship since our TV UIs are not grayscale themed. Please read more about 631 principle at the end page of this work.
+
+
+
+
Recalling a part of our goals of this project:
1. For the same period and TV models, unify color schemes across interfaces.
2. For different time or models, let coloring directed by a certain methodology.

Consequently, for the current mainstream TV models, we use the baseline color theme: the decoration colors will be selected by designers from our two palettes according to the features of UI element, while the other 4 color roles have definite values as mentioned previously.

For models customized by our business partner or new changes happening to the mainstream style in a few years, we may need to redefine color themes, but they can still share the methodology with the current one, which follows the steps:
1  / customize the dark mode background color and derive two container colors from it;
2 / select a focus color from our palettes;
3 / select decoration colors as well as function colors (better inherit);
4 / keep the grayscale colors consistent with this period.
Examples of Color Usage
This system was partly implemented by code so the whole team’s efficiency was improved. Let's take a look at the application of our palettes and color usage in real work.
The baseline color theme for current mainstream models
Following the theme, all our TV interfaces had put on new skins. The pictures below list 4 applications: video player, media center, system upgrade and fitness search. Although they have different content, they share the same color language.
ADDFUN TV, a Game TV model
In the cloud game TV customized for China Telecom, I used vibrant Green as the focus color. The combination of Green and Black is energetic. Contrasting Violet was used with increased proportion, to form a strong visual tension and showcase the game world. Exciting and cool.
Music TV model
A music TV that wanted to convey literary and romantic feelings used Violet and Magenta of our palettes. The decoration color is Amber, which can neutralize the cold tone of the canvas.
VIP exclusive UI for the video app
The combination of Amber and Violet fully accents the elegance and dignity of VIP users. To maintain this style, the overall hue values should not be scattered, therefore the decoration color uses brown, same hue with the focus color.
Conclusions
1 / I personally have a practical summary of whether the grayscale colors (appearing anywhere in UIs) are counted in the 6:3:1 relationship, that is, regardless of type of the devices, regardless of app or operation design, an applicable formula:
So according to this formula, it’s wrong to take the TV’s focus color as primary. As long as the background (with the largest proportion of UI) is not grayscale, background is the primary color.
Examples
Banners
A grayscale themed banner in which the black and white are counted in 6:3:1 ratio.
A non-grayscale themed banner with black and white only acting as highlights and canvas but not included in the 6:3:1 relationship.
A non-grayscale themed banner.
A non-grayscale themed banner.
Apps
A grayscale themed app in which the black and white are counted in 6:3:1 ratio.
A non-grayscale themed app, black and white as highlight, shadow and canvas, not included in 6:3:1.
A non-grayscale themed app.
A non-grayscale themed app.
2 / The palette of this work used RGB color wheel to calculate relationships in stead of RYB wheel, although we can see both wheels are used in the market. The RGB wheel has its red-yellow part significantly compressed, compared to its counterpart. Therefore, the “RGB method” will definitely lead to a palette with less warm colors, just like in this work.

My personal summary would be: use the RYB wheel to calculate color relationships, while using RGB wheel to pick and generate colors; two reasons:
1. in human evolution, we are more familiar with pigment based coloring (that is, red, yellow, and blue).  After all, the RGB color emitted by the screen has only appeared in recent decades;
2. the RYB wheel produces more balanced colors, no warm area is compressed.

Then I summed up a two-wheel conversion formula, which can help quickly find the desirable colors in relation to a focus color:
So in this project the focus color has H=218, and D=229. If we use RYB wheel to calculate the derived core colors, there would be more warm colors, but we didn’t modify our palette, since we decided the tonality of our products should be cold and the current palette is quite good. However in future work, I will use the “RYB method” especially if I want a palette that is red and yellow oriented or needs balanced warmth and coldness.

Finally, recalling again the project goals, the palette needs to connect with code base to improve efficiency of front-end development. At present we have replaced hard coded color values with semantic values for the most commonly used elements such as focus, buttons, pop-up windows, etc. But there is still a long way from the realization of entire color scheme. The team is under continuous construction.
Back to homepage