3.4 Working with Color in UI Design
Color Selection Process in UI design
Selecting colors for a color palette is often one of the most complex and time-consuming tasks in the design process. While theoretical models and structured frameworks exist, many designers will rely on intuition, personal taste, and experience. The designer must consider additional factors outside color theory, such as color psychology, branding, accessibility, and emotional tone. Even if color theory provides a solid foundation, these additional factors make color selection a nonlinear and context-sensitive process. As Chen et al. (2021) highlight in their investigation of designers across different cultures and disciplines, designers rarely follow standard rules; instead, their approach to color tends to be shaped by personal experience, education, and cultural background.
Chen et al. (2021) propose a three-step model that captures common patterns in color selection:
Topic Definition Designers begin by identifying the central theme, message, or goal of the project.
Concept Association Once the topic is defined, designers generate visual or emotional associations that connect meaning to color. This is known as color association, according to Chen et al. (2021), who also point out that it is frequently bidirectional. Designers may start from a concept and seek appropriate colors, or explore colors and derive associations from them.
Color Selection The final step involves selecting and refining specific colors that align with the previous stages. This includes choosing base hues, adjusting lightness and saturation, creating variants for dark/light modes, and evaluating combinations for harmony and accessibility. This stage is often iterative: designers may loop back to earlier phases based on how the colors perform in layout or testing.
There is a wide range of online tools available to help with color selection, such as pre-built palette generators, curated palettes, or moodboards. Both professional and novice designers can benefit from a tool-assisted color picking process. These tools allow quick experimentation and rapid palette creation without requiring an in-depth understanding of color theory. However, when used without a solid design context, they can also produce inconsistent or visually incoherent results.
Color Palette
The outcome of the color selection process is the creation of a color palette. A color palette is a curated set of colors chosen for consistent use in a design system. It is a strategic tool that supports visual consistency, structural clarity, and the emotional tone of a design. Palettes can be derived from various sources, including nature, art, fashion, and cultural trends, or generated using color theory principles to achieve balance and contrast in the design.
While the color palette defines which colors are available, a color system defines how those colors are used across the interface. A color system builds on the palette by assigning roles (such as primary, secondary, background, accent, or alert) to the colors in a color palette.
By documenting the color palette and integrating it into a color system, designers ensure that color usage remains intentional, consistent, and easy to share across the team. The color palette of a UI is like the designer's paint box. A good color palette in a UI project should contain neutral colors, primary colors, secondary colors, semantic colors and feedback colors (Hughes, 2024).
Neutral colors
Neutral colors in design systems can include white, black, or different shades of grey. Neutral colors are one of the main colors used in UI design. UI elements such as text, form fields, backgrounds and dividers are usually a neutral color. A gray color palette is a good foundation for a color system (see Figure 23).
Primary Colors
Primary color, also known as brand colors or main colors are used across all interactive elements such as button, links, inputs, etc. This color palette is one of your main colors and can define the overall look and feel. You can have more than one primary color but start with one. Designers usually use primary colors across the UI design to showcase the brand's identity and amplify brand awareness. See Figure 24 of a primary color palette.
Secondary Colors
Designers use secondary colors in design systems to accentuate and complement the primary colors (see Figure 25). The main secondary color is often referred to as the accent color. These are useful for grabbing attention or supporting your primary/brand color.
Semantic Colors
Semantic colors serve to communicate a particular purpose. Designers use semantic colors to announce specific messaging, such as warnings or other alerts. Common semantic colors are green and red to communicate success or error (see Figure 26 and Figure 27). A subset of semantic colors are feedback colors. Feedback colors emphasize different semantic states. They're used to provide visual feedback or warnings to users as they navigate the interface.
Kolibri's Color System
In our analysis of Kolibri's color system, we found the following palettes. See Figure 28 for the complete color palette of Kolibri. Kolibri's color system consists of several base color palettes, including mono, blue, purple, and others. These palettes make up the full range of available colors in the system. Each base palette is built from a single hue and includes a gradient of shades, typically organized in increments from 100 (lightest) to 800 (darkest). This follows a numeric color scale, a common convention in design systems, where 500 represents the base color, lower numbers like 100 or 200 indicate lighter tints, and higher numbers like 700 or 800 indicate darker shades.
The color palette follows a monochromatic color harmony and aligns with conventions from popular design systems such as Material Design and Tailwind CSS. For clarity, we will refer to this as the parent palette in the following sections.
While the parent palette provides the foundation, Kolibri defines a functional color palette (see Figure 29). This palette provides reusable variants of base colors for layout & components. Rather than referencing colors by numeric steps like purple-100 or purple-700, the functional palette uses role-based names to clarify usage context. Each palette (e.g., primary, secondary, warning) is assigned four variants: bg, light, accent, and dark. The colors used in the functional palette are selected from the parent palette but follow a distinct naming convention tailored to design roles and usage.
In addition to the functional palette, Kolibri also includes a semantic color palette see Figure 30. These semantic colors are standalone, meaning they are not part of a typical tonal range. This palette provides targeted colors for UI feedback or status indicators. Each color token is also derived from the parent palette.
Last updated