🎨

New Primary Color – Building Systematic Color Palette

Kentico Software

Design system color palette redesign using HSLuv color model – creating systematic, accessible colors with consistent lightness and contrast across all hues.

New Primary Color – Building Systematic Color Palette

🎯 Overview

Built systematic color palette using HSLuv color model where lightness and contrast are shared across all hues, ensuring accessibility and visual consistency throughout the design system. The new palette is based on lightness principles, ensuring good contrast is achieved automatically, addressing the imbalance present in the previous color system.

🎨 Color System Design

Developed balanced color palette based on systematic principles.

HSLuv color model ensures perceptually uniform lightness
Reduced saturation by half for more subtle, professional appearance
Selected luminance values to pass WCAG accessibility requirements
Applied systematic approach to primary button and text colors

Changed saturation visualization — Changed saturation - reducing by half

Color check with WCAG requirements — Choosing saturation for the color. Choosing luminance for the primary button and text color to pass WCAG requirements.

✨ Implementation

Applied the new color system across the UI, updating primary color along with related colors like background and success states.

New primary color applied in UI — Applying selected color in the UI – some other colors changed too (background, success color, etc.)

Back to Kentico Software Projects