Quantitative Color Extraction and Optimization for UI Design

Color is a crucial medium for perception and information, and the expanding variety of product scenarios demands a consistent and efficient color adaptation solution for UI design.

Following the major redesign of the app store and game center (COOLOS2.0), three types of app detail pages were created, but the growing number of co‑operated blockbuster games made manual per‑app color selection unsustainable, prompting the need for a scientific color extraction algorithm.

The proposed quantization scheme extracts the main color from interface images using a color quantization algorithm, then keeps the hue unchanged while constraining saturation and brightness within fixed ranges to produce a palette that reflects both the image atmosphere and UI requirements.

Step 1 – Algorithmic Main‑Color Extraction : The median‑cut algorithm iteratively partitions the RGB color space, selecting the channel with the greatest range, sorting pixels, and splitting them until the desired number of color cubes is reached, after which the average color of each cube yields the dominant hue.

For Android development, the optimized Palette class from the Android SDK provides an implementation of this algorithm, allowing developers to obtain the dominant color of a Bitmap directly.

Analysis of the raw extraction results shows that while the dominant color represents the image, it may not satisfy UI presentation standards, necessitating further intervention based on a color strategy.

Step 2 – Color‑Extraction Optimization : Two main approaches exist—template color matching and natural color extraction. The template method offers high controllability but limited variety, whereas natural extraction adjusts saturation (S) to 60‑70 and brightness (B) to 45‑60 within the HSB model, yielding richer, more natural palettes. The team selected the natural extraction approach for better user experience.

Step 3 – Color Validation : The optimized palettes are evaluated against WCAG contrast guidelines (AA minimum 4.5:1, AAA higher), using tools such as the WebAIM contrast checker, confirming that the final colors meet accessibility standards.

Step 4 – Practical Deployment : The quantized color solution has been applied to the app store and game center detail pages, influencing background rendering, button colors, font colors, image overlays, and gradient schemes, enhancing visual immersion. Future work will extend the approach to additional COOL OS components.