The Science of Color & Design
色彩与设计的科学

I joined Google as a software engineer with a background in print and digital design. My first project was helping build a new user interface for the Assistant in Android 10. A challenging part of the design was the background—it was unclear where to place text to make sure it was legible, and there was debate over whether it was visually pleasing as it faded from black to translucent.
我以印刷和数字设计背景的软件工程师身份加入了谷歌。我的第一个项目是帮助为 Android 10 中的助手构建新的用户界面。设计中具有挑战性的部分是背景——不清楚在哪里放置文本以确保其可读性，并且关于从黑色渐变为半透明是否视觉上令人愉悦存在争论。

Miranda Kephart, a fellow engineer on the project, pointed out whether it was visually pleasing was based solely on the perceived smoothness of the color distribution while transitioning from black to transparent.
项目上的工程师 Miranda Kephart 指出，视觉上是否令人愉悦完全取决于从黑色过渡到透明时颜色分布的平滑程度。

My initial reaction was this couldn’t be the case. Designers never talked about color distribution like that, or even talked about altering it, it must be correct already. As soon as I said that, I was struck by the questions it raised: What if design and engineering aren’t completely separate? What does it even mean for a set of colors to be ‘smooth’? What does it mean for colors to be organized smoothly? Are there even answers to those questions? If we can get answers to those big questions, do they even help us know where to put the text?
我最初的反应是这不可能是真的。设计师从来没有像那样谈论颜色分布，甚至谈论过对其进行修改，它一定已经是正确的了。我一说出这句话，就被它引发的问题所震撼：如果设计和工程并非完全分开，那意味着什么？一组颜色“平滑”是什么意思？颜色平滑地组织又意味着什么？这些问题是否有答案？如果我们能找到这些重要问题的答案，它们是否能帮助我们知道在哪里放置文本？

Finding answers to those questions took me a couple years and a deep dive into the history of color, both scientifically and in design. The answers pointed to a new color space that would empower designers creatively, and improve everything we do with color.
寻找这些问题的答案花了我几年的时间，深入研究了颜色的历史，无论是科学上还是设计上。这些答案指向了一个新的色彩空间，将激发设计师的创造力，并改善我们在使用颜色方面所做的一切。

Toward a perceptually accurate color system 朝向一个感知准确的色彩系统

The way to construct a smooth distribution of colors is to use a perceptually accurate color system. These systems organize colors in a 3D space by matching how people see them, and they are built by creating formulas to fit data gathered from surveying thousands of people in thousands of experiments over decades. These experiments, generally, show people two colors and ask them to choose the one that is lighter / more colorful.
构建一种平滑的颜色分布的方法是使用一个感知准确的色彩系统。这些系统通过将颜色组织在一个三维空间中，以匹配人们看到它们的方式，并通过创建公式来适应数十年来从调查成千上万人在成千上万次实验中收集到的数据来构建。这些实验通常让人们看到两种颜色，并要求他们选择更轻/更有色彩的那种。

The three dimensions the eye uses to organize colors are hue, colorfulness, and lightness. Hue tells us what angle on the color wheel to use, say, red versus purple. Colorfulness describes how vibrant or neutral (close to gray) a color looks—the further away colors are from the center of the color space, the more colorful it is. Lightness describes how close to white or black a color appears. In color space, lightness is vertical, like floors in a building.
眼睛用来组织颜色的三个维度是色调、色彩饱和度和亮度。色调告诉我们在色轮上使用的角度，比如红色与紫色。色彩饱和度描述颜色看起来有多鲜艳或中性（接近灰色）—颜色离开色彩空间中心的距离越远，颜色就越丰富多彩。亮度描述颜色看起来有多接近白色或黑色。在色彩空间中，亮度是垂直的，就像建筑物中的楼层。

The color system used by designers today is HSL, or hue, saturation, lightness. HSL isn’t remotely accurate, and doesn’t try to be: it was built to make computing colors fast on 1970s computers.
设计师今天使用的颜色系统是 HSL，即色调、饱和度、亮度。HSL 并不准确，也没有尝试：它是为了在 1970 年代的计算机上快速计算颜色而构建的。

Our brand new, perceptually accurate, color system is called HCT, which stands for hue, chroma, tone.

Even though HCT is brand new, it is built on existing work: color science defines many perceptually accurate color spaces. For simplicity, let’s focus on two of them: L*a*b, also known as LCH, (lightness, chroma, hue) and CAM16.

HCT’s lightness measure, tone, is the same as L*a*b*’s lightness. Using that lightness measure, along with some math tricks, meant we could measure contrast with HCT, directly integrating contrast checker algorithms and accessibility requirements.

HCT’s hue and colorfulness measures, hue and chroma, are the same as CAM16’s hue and chroma. You may wonder why we didn’t just use L*a*b*’s hue and chroma measures, then, we could have just use L*a*b*! However, when we tried using it in design, L*a*b* was too inconsistent perceptually.

For the first time, designers have a color system that truly reflects what users see, taking into account a range of variables to ensure appropriate color contrast, accessibility standards, and consistent lightness/colorfulness across hues.

Exposing and solving for contrast

Color contrast has long been a challenge for design.

When I was a print designer, contrast meant whether there was enough difference between colors to be readable. Put simply, black text on a black background had no contrast because there was no difference between the colors.

When I became an engineer at Google, I was shocked to learn there is a precise definition and formula for contrast: the difference in luminance, or, perceptually accurate lightness, between two colors. Also, design was bound by contrast: any software we ship must meet minimum contrast standards. (Material has an excellent page diving into this more)

In the past, designers would plug color pairs into a contrast checker, receiving a number called a contrast ratio that would indicate whether or not there was an appropriate difference between colors. Adjusting the paired colors to meet the requirement wasn’t easy: no color system could adjust lightness while maintaining colorfulness and hue, leaving designers to guess new colors that would meet contrast ratio.

The HCT color system makes meeting accessibility standards much easier. Instead of using the unintuitive measure of a contrast ratio, the system converts those same requirements to a simple difference in tone, HCT’s measure of lightness. Contrast is guaranteed simply by picking colors whose tone values are far enough apart—no complex calculations required.

For example, to meet WCAG contrast requirements, smaller elements (less than ¼” or 40 dp) require a tone difference of 50 with their background, larger elements require a tone difference of 40. This principle works consistently for any pair of colors.

Creating a scalable design system

Just as design systems enable design at scale, HCT supports color at scale. HCT’s simplification and integration of contrast via tone, makes the color system the right foundation for any scalable design system.

When creating a design system, colors are given names, so they can be referenced in design specifications of screens and UI elements. An example in Material Design is “primary,” which refers to a color used for buttons.

Then, the tone of each color is defined. Colors work in pairs in a user interface, such as a button color and button text color, and tones are chosen to ensure contrast between those pairs.

The other components of color, hue and chroma, are open to any values, enabling more creativity. Material You completes its design system by determining hue and chroma dynamically based on the user’s wallpaper, creating a dynamic, personalized color system.

Dynamic color: Personalized color at scale

Material You’s colors are dynamic: it chooses colors in the user's wallpaper, lets the user pick one, then creates an entire UI theme around that color. All of the algorithms behind this are infused with creativity and a designer’s eye, creating a beautiful theme for any color.

First, the wallpaper is quantized, reducing the thousands of colors in it to a smaller number by merging them in color space. The reduced color set is small enough to run statistical algorithms against with efficiency. These algorithms are used to score and filter colors; Android 12 gives colors points for colorfulness and how much of the image they represent, and it filters out colors close to monochrome.

One color, defaulting to the top-ranked color by the algorithm, or chosen by the user in the wallpaper picker, becomes the source color. Its hue and chroma influence the overall color scheme, enabling a vibrant blue scheme, or a muted green one, based on the user’s choice of color.

Using the source color, we create the core palette, which is a set of 5 tonal palettes. A tonal palette is defined by a hue and chroma; the colors in the palette come from varying tones. These tonal palettes reduce cognitive load for designers when creating a design system: instead of specifying hue and chroma for each role, a tonal palette can be substituted.

Finally, we fill out the table that defines the hue chroma and tone of each color role, then use those values and HCT to create the colors used in the theme.

A bright future, built with you

A design system is only as strong as the tools provided to implement it, and Google firmly believes in sharing our work through open source code.

Material Color Utilities is a cross-platform code library for color, containing everything needed to implement Material You. It was initially built for Pixel; as covered in a blog post last week, Android phone manufacturers use it as well. The library is open source, anyone, inside or outside of Google, can contribute to it. The library will be expanded to include new platforms and modules in the near future. We have Dart, Java, and Typescript libraries, and we will open source libraries for iOS, CSS via SASS, and GLSL shaders.

We'll continue updating this tool and adding new code modules as we develop new color features. Color harmony, available today, adjusts colors to dynamically fit the source. By the end of March, Material Color Utilities will add modules for:

• Legible text on any background—HCT’s tone integrates with opacity, unifying contrast with scrims & shadows
• Image filters and blend modes that use HCT, maintaining creative intent and legibility, and a GLSL shader for HCT.
• A new type of gradient that blends realistically, like our work on color harmony. Using HCT produces accurate blends that behave like paints, avoiding issues present in other color spaces.

Behind all of these features, current and future, is our HCT color system. It makes designing with color easier and more successful, from generating wallpaper-based color schemes to adjusting colors for accessibility requirements. HCT drives the tools our designers and engineers use, Material Theme Builder and Material Color Utilities—the same tools used inside Google—which let you deliver consistent, beautiful, colors everywhere, every time.

Have fun, we can’t wait to see what you make with it! Breaking the stasis of unfeeling minimalism in the flat design era will allow people to create things we can’t even imagine. Paraphrasing Tag Savage: “Modern museums are pretty in a designy way, but eventually, the particulars around them fall out of fashion. This is good for the museum. Now they can really mess up the place.”

Resources

• Mark Fairchild’s Color Appearance Models provides a strong foundation and survey of color science.
• Andrew Elliot, Mark Fairchild, and Anna Franklin’s Handbook of Color Psychology is a compilation of research on many color topics
• Josef Albers’ Interaction of Color discusses color science phenomena from design’s perspective
• Bruce Lindbloom’s website has reference equations for converting between color spaces.
• Nico Schlomer’s work, such as the colorio library and algorithmic improvements to CAM16
• Jacob Rus’ CAM16 live document

¹ Munsell.com

² Image source

³ CC BY-SA 3.0 License