The company recognized the need for a standardized color system, but it wasn't a business priority. I identified this opportunity and decided to pursue it by starting it as a side project.
The working process took 2 months and also entailed discussions with my colleague. After that, the company successfully implemented the system.
The corporate color system supports 3 teams:
Product Team
Data Visualization Team
Marketing Team
As a result of different functions, each team has to have a consistent yet flexible palette appropriate for their use cases – for UI design, for data representation, or for brand identity.
The color system functions as a connection between teams and establishes a unified foundation for color application. The system must fulfill accessibility standards to enhance usability for users with different needs.
LCH makes the color system especially effective for applications requiring predictable contrast and harmonious palettes.
Compared to the traditional RGB or HSL color space where the color shift can be rather unpredictable, LCH preserves stable color relations due to its perceptual uniformity. Furthermore, LCH offers more flexibility by providing independent adjustment of:
Lightness (L) – The brightness of the color.
Chroma (C) – The intensity or saturation of the color.
Hue (H) – The color itself, such as red, green, or blue.
One of LCH’s biggest strengths is its ability to maintain lightness values consistent across different hues.
This is demonstrated in the visual below. When I make lightness values fixed, contrast ratios remain unchanged. And thus, I can easily swap colors, while they stay readable and accessible, and the design stays cohesive:
Lightness -92
Chroma - 12
Hue - 152
Contrast ratio - 12.06
Lightness -92
Chroma - 12
Hue - 29
Contrast ratio - 12.19
Lightness -92
Chroma - 12
Hue - 65
Contrast ratio - 12.02
For a structured color system, I first define the need for 10 core colors, including brand and semantic ones. Some of them, however, existed in the previous system, but they were not well organized. I define the following list:
Orange (brand)
Purple (brand)
Teal (brand)
Grey (neutral)
Red (semantic - error)
Green (semantic - success)
Yellow (semantic warning)
Blue (semantic - info)
Additional yellow
Additional green
The main weakness of the old color system was its insufficient shades and tints variety which failed to support various use cases. I assign 11 variations for each color.
Although there is some flexibility in semantic colors, brand colors need to be integrated more deliberately. Due to the LCH limitations, the original brand colors (highlighted on top in the visual below) shift slightly. And, as it becomes clear, they are placed at different LCH levels, which makes it hard to keep the system consistent.
Also, some shades, especially at the 600 and 500 levels, lack sufficient contrast when paired with white text. Thus, the brand colors cannot be used in their original form.
For minimum accessibility compliance (normal text ratio of 4.5:1), I choose the 700 level as the primary color to meet this standard. This means the white text will be readable when placed on top.
Using yellow is an issue as it turns brown instead of yellow. This happens because of LCH’s chroma limitations which means that chroma cannot be adjusted much within the given lightness and hue.
Although I have tried to make it closer to a true yellow, it still looks a bit brownish. However, the yellow is used by the Data Visualization team which relies on lighter tints of the color, so this issue is not noticeable.
I use the Atmos tool to make the process of choosing the correct shades within the LCH space easier.
Color structuring has certain main principles:
Lightness (L) is kept the same for each column to guarantee consistent contrast ratios across all colors.
Chroma (C) needs the most tweaking as it is highly subjective and requires very delicate tuning for each color.
Hue (H) remains consistent within each row.
All lightness and chroma adjustments are documented so that any future additions or tweaks would be logical. To achieve this, I use a formula with increments of 4. A part of this process is shown in the following visual:
When the initial palette structure had been done I needed to involve all three teams to validate usability and make final refinements.
I adapted the palette through several iterations to balance the diverse requirements for different use cases. We determined the necessity to create two lighter tints – for light backgrounds and state indicators. We made minor adjustments to chroma values for green shades to better align with the Marketing Team’s requirements.
Thanks to the structured documentation, it was easy to implement these refinements. With the final adjustments in place, we performed extensive testing to affirm the effectiveness of the palette.
Different teams can use the shades that are most relevant to their needs. The Data Visualization Team primarily works with light tints but the Marketing Team uses dark shades more often.
To support teams better I assisted in creating a data visualization design system. The colors were grouped into 5 functional palettes which corresponded to different types of data visualizations.
I contributed to the Product team’s design system, system by creating reusable tokens and organizing colors into 4 hierarchical levels, and defining their functions.
This organization-wide system changes how the teams use color. The system consists of 10 core colors with 13 variations each to support different use cases.
One of the biggest problems it solved is inconsistency. Previously, the Marketing, Product, and Data Visualization teams had different interpretations of color, which caused misalignment and inefficiencies. Now, with a common color language, the system offers coherence and clarity across all applications. It helps each team to use the variations it finds the most relevant.
I also addressed major accessibility gaps and gained significant improvements:
Before:
44%
of colors meet the minimum 4.5:1 contrast ratio
After:
100%
of colors are fully WCAG AA compliant
LCH ensures perceptual uniformity, thus, contrast ratios are aligned across the entire palette and maintain accessibility consistent throughout its variations.
The system provided a scalable framework and improvements to accessibility. With systematic documentation and a formulaic approach, it is possible to refine or extend the palette without affecting the overall system.
The new color system has made color no longer a problem, but rather a well-defined and reliable resource for all teams.
This project was engaging and challenging for me, as it combines the color creativity with the difficulty of real-world application.
The LCH color space proved its effectiveness. It is a good choice for applications requiring predictable contrast and harmonious palettes. However, one limitation becomes clear – LCH is not ideal for achieving a pure yellow, as it tends to shift toward brown.
The power of cross-team collaboration is another important lesson learned. Creating a color scheme means finding common ground among teams, filling gaps, and making sure the colors meet the needs of each team.
This project was a great chance to develop as a designer and a leader. I had the opportunity to lead discussions and to achieve consensus with different stakeholders.
