How to Organize your Color Systems
Product development teams have different needs for color systems, illustrators and animators have their needs, as do print editorial designers, along with UX designers. How do we better unify these needs across teams? I will list a variety of strategies to fine-tune your color system.
An example of how blue is not blue, it is slate, sky, cerulean, ultramarine, or Prussian. Names and hex codes are examples of declarative naming conventions.
Definitive Naming
From a branding design perspective, quirky or historical names help lessen the intimidating ordeal of defining a color system. I love reading about the history of pigmented color and often give historical names. Using a phrase such as Yellow, Saffron, Orpiment, or hex code are examples of definitive naming. Although brand designers have a set of needs for naming, such as helping the stakeholder to become comfortable with a decision made about a group of brand colors, it is an easy way to help a team easily remember a color swatch.
Definitive naming has a weakness when it comes to system design decisions. Design system creators need to think more about how color is used in various themes, modes, and interactive states like hovering and clicking. In addition, naming conventions need to allow for the needs of the team as a whole, and standard naming certainly has shortcomings.
Studio WAC’s Semantic Color System, describing the intent of the color, Primary, Secondary, Info, Danger, and Neutral are listed.
Semantic naming
There are a variety of ways to name colors, but semantically named colors are those that describe the intent of the color. For example, “primary” or “info” colors are typically used to convey specific information to the user. “Danger” and “neutral” colors are self-explanatory. Many design systems and CSS frameworks use this convention to allow users to theme their colors as they wish globally. The benefit to this naming convention is that you don’t have to change the name but rather the color data.
Contextual naming
Programmers often use contextual color naming to have fine-grain control over themes and modes within their apps. Semantic color naming is significant for white-labeling purposes, while Contextual color naming is key to supporting dark and light modes. In CSS, it’s simple to duplicate the light-mode Contextual names to a new dark-mode file and update the contextual names files accordingly for user preference. However, too much control can be overwhelming for designers. Hundreds of definitions make it difficult to find and use colors appropriately. Because of this, it’s essential to use Contextual color naming judiciously and with purpose. It can be a powerful tool for creating visually cohesive and consistent interfaces when used correctly.
What naming should i use ?
When choosing color naming conventions, there are two ‘personas’ we need to support. One is beneficial for Programmers, and the other is for Designers. Each discipline has challenges but needs to work together to solve problems systematically.
Designers and engineers must work together to make a comprehensive system that works for everyone.
each disipline needs to communicate with each other so that they can understand the tech side of things as well as design and branding considerations.
Designers need to be able to understand how the different color naming conventions work so that they can design better products.
Engineers need to be able to understand the different color naming conventions so that they can code better applications. By working together, designers and engineers can create a system that is easy to use and helpful for everyone.
From a design perspective, I will speak about semantic naming. I aim to discuss the efforts to bring print-based pigmented color systems closer to UX screen-based color systems.
An example of a complete color system generated in an LCH color model. It allows for even color and setting specific values to exact contrast ratios, taking the guesswork of using this color system for web accessibility guidelines.
Semantic Naming Terminology
Primary Color is the most essential and defining colors in any UI. These provide an instant identity, which companies can use to create more vital brand awareness for the products or services they offer, with it being one of many factors that makes up how people perceive you.
Our agency has opted for a teal primary color, that has versatility in the system’s chroma as well as its 950 shade to use on the background of the website.
Our agency has opted for a teal primary color, that has versatility in the system’s chroma as well as its 950 shade to use on the background of the website.
Secondary Color
Secondary colors are to be used sparingly for UI elements to stand out. These different tones complement the primary color and usually come with guidelines set by your company’s branding strategy. At most, there may only exist 1-6 secondary hues, but limiting this list would bring more recognizability while maintaining consistency across all assets-related work within an app or site design.
In the latest iteration of our agency’s color system, we greatly simplified the number of secondary colors. We opted for a magenta and an orange color for buttons.
Our agency has opted for an orange and magenta secondary color system that can give the ability to update the skin of the website when we want a style change.
Neutrals
Neutrals (Greyscale) include shades of gray, from white to black. They’re great for backgrounds or text colors and can be found in most UI designs!
Check out IBM’s Neutral system for its inclusion of warm, neutral, and cool greyscale pallets. Do you need multiple neutral pallets per White label project? Of course not, but depending on the color choices of the brand’s primary and secondary color system, having the choice between warm and cool will further fine-tune your color system. Again, Semantic naming conventions allow designers this degree of complexity.
IBM has 3 neutral palletes. Neutral, Wam, and Cool Grey.
Luminance Weights
In a previous post, we explained the benefits of LCH over HSB Color. Since the LCH color model allows for more exacting colors across the range, you can more accurately set meaningful and incidental luminance weights in the same way you might organize typographic sizes and weights.
There are various ways to organize your weights; It helps to see how others tackle this problem. My favorites are IBM and Salesforce; you can start to see how design teams construct the color systems, such as LCH or HSB.
Salesforce is a helpful example of the need for different color palettes that relate to one another that serve different use cases. For example, one system is more vibrant and is built for screen display, while the other is subdued, print-safe color variations.
In Salesforce color system, they have designed a vibrant web color system and a muted print safe color variation
Color systems require team input
However, I foresee that you will have to consult with various stakeholders to fine-tune what shades and tints are desired over others. A degree of subjective perception goes into making your color system choices.
People’s feelings are another reason I am drawn specifically to Atmos color tools. For example, suppose a stakeholder strongly feels a particular color shade or tint should be included in a weighted range; I have the adaptability to include the weights that genuinely matter for WCAG accessibility ratios.
I hope the examples show a need to move your color systems to a CIELAB/LCH color model
-
950 - L*20—Anything darker is black, with limited chroma and hue impact.
-
900 - L*25—An in-between shade, nice to have depending on the Hue.
-
800- L*30—WCAG 7:1 on paperwhites.
-
600 - L*47—Base colors are derived from 600 L* value, It achieves WCAG 4.5:1.
-
500 - L*57—WCAG 3:1 on paperwhites.
-
400 - L *66—An in-between pastel that can be used with brand identity that has outline.
-
300 - L*80—Used for darker separator lines on paperwhites.
-
200 - L*85—Used on Separator lines on paperwhite.
-
100 - L*95—Useful for a duller paperwhite.
-
050 - L*98.5—Useful for a brighter paperwhite.
Studio WAC’s color system organized in the weight system listed above.
In the next post
I hope this is a good beginning in understanding how to create a more systematic approach to your color systems. However, one color that is more difficult to standardize, Yellow. In the next blog post, I will address the yellow problem and strategies for developing a color palette that can generate shades you would be proud to use. Stay tuned!
