top of page

Implementing OKLCH Color

  • Writer: Curtis Blair
    Curtis Blair
  • Sep 17
  • 2 min read

Memo Portfolio




Summary

I conducted a UI Color Scheme audit to determine if noted layout irregularities were system-wide or isolated issues. I examined layout consistency, differentiation, and contrast which revealed inconsistency across the application causing user distractions. Bases on the audit findings, I decided to implement the OKLCH color standard to establish a cohesive color palette that also considered brightness levels.


Insight

  • It was interesting seeing how each previous designer approached the problem, started and did good work, but didn’t finish. The project felt like a collaboration with silent partners providing guidance extrapolated from legacy research.

  • Article: Implementing OKLCH Color Standard



Outcome

Focusing on layout cohesion and layer arrangement provide a pathway to start small and build up to complexity. This pathway provided a systematic approach for working in small increments while maintaining progress momentum. By utilizing OKLCH and the Atmos webtools, I was able to visualize color relationships and develop brightness ranges that solved inconsistent color implementation, readability issues, and distracting color notifications and status indicators.



Lessons Learned

  • As Enterprise software expands, each department had their own ideas and desires for the UI appearances, providing challenges for integrate new ideas with legacy design decisions.

  • Font colors are more focused on states: active, inactive, secondary, caption, error, etc. rather than a color scales.

  • UI Theme builders are good resources revealing how many colors are generally used in an application as well as how to organize a color palette.



Design Artifact: Color Tokens


Excerpt: Color Palette & Color Tokens

ree

An excerpt of the color palette and color tokens created for the new UI Color Scheme. The smaller color scale assisted with examining layouts and layer arrangements while exploring shifts in lightness, saturation, and hue to improve contrast for visual hierarchy and readability.



UX Memorandum Portfolio | minimalist case study of insights into user experience research and design


bottom of page