Patent ID | KR102635963

Color system automation for
consistent ui & resource save

While developing the sports event page, we aimed to enhance fan engagement by incorporating league colors into the UI. To achieve this, we needed a system to manage league colors and ensure they aligned with the app's dark mode theme. With our platform offering 50 diverse leagues and expanding, the manual creation of color palettes for each new league was a cumbersome task prone to oversight.

Here is how it works…

When the sports team inserts the brand color of the league, client side translated the RGB value of the color and translated it in to HSLUV value.

Then adjusted the lightness value according to design guide, generating new color palette for each league to fit with our dark mode app theme.

Specific lightness value is assigned to different components and now the page is systemized to be automatically colored in to league theme.

This is how it looks when the system is applied

I proposed a solution involving the use of HSLuv color values. By dynamically adjusting the lightness through engineering, we could automate the color tones for the dark mode theme without the need for manual adjustments to each color. I sought help from the engineers, and our team kindly supported the automation concept.

Conclusion

With the engineers' support, our team successfully implemented a time and resource-saving system. This achievement was a result of our collaborative teamwork and alignment in working efficiently together. If we were to push this a bit further, we could have pulled the league color from Sports Radar API and made the entire system automatic. Yet the sports team still had to check on the color to make sure the system was using the correct one so the team opted to manually verify the colors to ensure accuracy.

Before releasing this feature, we filed patent on the system idea behind the automatic color system and it is now registered as patent ID KR102635963.