How to Build a Scientific Color System for Enterprise Mobile Banking Apps

Introduction

The project adds an enterprise OA function to a corporate mobile banking app, aiming for a brand upgrade and improved user experience while adhering to existing design standards.

Principles of a Color Specification

Rational : Choose colors based on logical criteria rather than personal preference.

Extensible : The base colors should be expandable to meet diverse scenario needs.

Harmonious : Colors must work together as a cohesive whole.

Process for Defining Product Color Standards

Traditional workflow: summarize product traits, align with industry and brand culture, extract keywords, create mood boards, select hues, and define color series. This approach respects brand identity but lacks theoretical and data‑driven support.

We studied major design systems, identified commonalities, and applied a more scientific method to the North Agricultural Commercial Bank project.

3.1 Determining the Primary Brand Color

The primary color is used most frequently (buttons, text, highlights). We kept the brand’s red hue (H = 358) and adjusted saturation from 89→75 and brightness from 78→90 to make it lighter and more energetic.

3.2 Generating Auxiliary Colors with Color‑Wheel Theory

Using the primary red (#E6393E, H = 358, S = 75, B = 90) as a base, we kept S and B constant and varied hue by ±15° increments to create a 24‑color wheel. Selected complementary, analogous, and split‑complementary hues (orange, blue‑purple, blue, green) to enrich the palette while maintaining a unified visual tone.

3.3 Matching Brightness and Saturation

Auxiliary colors are adjusted to share the same brightness and saturation as the primary color for visual consistency.

3.4 Fine‑Tuning Perceived Lightness

Because different hues appear lighter or darker at equal HSB values, we overlay a black layer in hue mode to compare grayscale lightness and tweak saturation or brightness by up to 5 points where needed.

3.5 WCAG Contrast Verification

All colors meet the WCAG 4.5:1 contrast ratio for normal text. The primary red’s contrast falls in the 3.2–4.2 range, which is acceptable for many app contexts.

3.6 Building the Color Palette

Two methods are offered: (1) same‑hue palette by adjusting brightness only; (2) micro‑hue variation (≤30°) that changes hue slightly while gradually shifting saturation and brightness, providing a balanced, layered look.

3.7 Implementation

Design side : Identify pitfalls such as using red for primary actions that may clash with destructive‑action conventions; consider dual‑button schemes for confirm/cancel.

Development side : Define Design Tokens (e.g., a/1/primary_nor: #E6393E, a/2/auxRed_nor: #FF4E3A) so that future skinning only requires updating token values.

Tools and References

Recommended palette generators: Ant Design Color Tool, Arco Design Palette, and WCAG contrast checker.

Conclusion

Applying a systematic, theory‑backed color framework transforms subjective choices into a repeatable process, improving design efficiency, consistency, and accessibility for enterprise mobile banking products.