Intelligent Color Extraction Service: Architecture, Algorithms, and Applications

Color is both a visual perception and a carrier of information. In diversified product scenarios, a scientific visual strategy is needed to build a personalized page color system that avoids monotony, homogenization, and flat information hierarchy, thereby enhancing surprise, coordination, and immersion.

Intelligent color extraction provides solutions across design, strategy, and service dimensions, addressing these challenges.

Background: As product and design concepts evolve, elements such as diversity, youthfulness, and individuality are increasingly applied. Traditional pages often use a single color scheme, which cannot reflect the unique theme of each forum (e.g., Baidu Tieba) and is infeasible to configure manually for millions of forums.

Solution: The intelligent color extraction service analyzes the color composition of each forum’s avatar, automatically generating background, top‑bar, font, and button colors, supporting day/night/dark modes to achieve a “thousand forums, thousand looks” effect.

The service offers an end‑to‑end page color solution, integrating algorithm strategy, architecture, and product方案 in a unified output.

Capability Overview: The article introduces the overall architecture, algorithm strategy, service integration, and visual effects of the intelligent color extraction service.

Strategy Modes: Two modes are supported – template color matching and natural color extraction.

Natural Color Extraction: Based on simple visual strategies such as brightness or saturation ranges, this mode computes display colors that are rich, natural, and strongly correlated with the source image.

Template Color Matching: Calculates hue based on the scene, maps it to a business‑standard color palette, and customizes colors to better match product tone, though the resulting colors are relatively uniform.

Application Scenarios: The service provides more than ten color types (background, button, shadow, overlay, font, etc.) that enhance the overall page atmosphere.

Overall Architecture: The system is divided into perception layer, application layer, service layer, visual algorithm layer, and supporting components.

Perception Layer: Offers design rules and solutions for color selection and rendering.

Application Layer: Initially applied to Tieba app’s homepage, it has been extended to multiple product lines (Shoubei, Pinzhu, etc.) across NA, H5, PC, and mini‑programs.

Service Layer: Includes C‑end service integration (offline/online), B‑end effect experiments, and service governance.

Visual Strategy Layer: Core of the service, providing natural extraction and template extraction. It encompasses strategy control, preprocessing, core algorithms, rule customization, and outputs over ten colors needed for page rendering.

Algorithm Strategy: Combines image algorithms with visual strategies.

1. Image Algorithm: After ROI extraction and cropping, the pipeline performs color quantization, region saliency, and color saliency analysis. Octree quantization was selected for its efficiency and memory usage.

2. Color Quantization: Merges similar colors to obtain the main color components and their proportion in the image.

3. Region Saliency: Simulates human visual attention to identify important regions and assign normalized saliency scores to pixels.

4. Color Saliency: Divides colors into five levels (white, light, color, deep, black) based on hue, saturation, and brightness, providing a scoring basis.

These features are combined to produce candidate theme colors with weighted scores.

Visual Strategy: Selects the most representative theme color from candidates and adjusts hue, brightness, and saturation to meet page display standards.

Key Rules: Reasonable hue selection, accurate brightness control, and proper mapping across multiple modes.

Hue Division: Colors are grouped into 24 hue families; the theme hue is chosen based on count, area, and saliency within each group.

Brightness Control: Generates a brightness curve for each hue and applies inverse mapping to adjust colors.

Extension Colors & Mode Mapping: From the theme color, auxiliary colors such as font and gradient colors are derived, with corresponding mappings for day, night, and dark modes.

Usage: Beyond the initial Tieba app deployment, the service is used in over 20 scenarios (Shoubei, Dazhao, Business, etc.) covering header, background, font, button rendering, and more.

Author: Seventeen, Senior Software Engineer at Baidu Tieba.

Promotional Note: A giveaway of 20 “City Silhouette Color‑Changing Mugs” is announced, with participation instructions and a lottery mechanism.