Smart Color Coordination System

🔬 Module 1: Image Pre-"Processing—"Teaching the Computer to Perceive Colour"

Imagine you and a computer are looking at the same painting. You see "a warm orange-red," but the computer only sees three numbers—say, (255, 87, 34). That's RGB. The problem is that RGB was designed for screen display and doesn't reflect the way human eyes actually perceive color.

Here's an example: brightening a shade of blue by a certain amount versus brightening a shade of yellow by the exact same numerical value will produce completely different magnitudes of perceived change. The RGB numbers shift by the same amount, but the difference you feel is not the same.

What this module does is translate the image from RGB into another color language called Lab. The Lab color space was specifically designed to mimic human visual perception—in this space, however much the numbers change, the color difference perceived by the human eye changes proportionally, one-to-one.

🎯 In a nutshell: Translate the computer's colour language from "machine language" into "human perception language," so that all subsequent calculations are actually meaningful.

​

🎯 Module 2: Dominant Colour Extraction via Clustering—"Sorting Colours into Groups"

A single artwork may contain hundreds of thousands, or even millions, of pixels, each with its own color. But these colors are not randomly distributed—they naturally cluster into groups. For instance, the background might be a vast expanse of blue sky, the subject might feature warm brown skin tones, and there might be scattered accents of vivid red flowers.

This module works like an intelligent sorting agent.

The workflow goes like this:

1. All pixels are "thrown into a three-dimensional space" according to their color—pixels with similar colors naturally gravitate toward each other, forming clusters of "color clouds."

2. The algorithm automatically locates the center point of each color cloud; this center point represents one dominant color.

3. The algorithm also records how large each color cloud is (i.e., what proportion of the total image area it occupies).

It's like sorting a pile of colorful jelly beans—you don't need to count them one by one. You simply say: "Red is the most common, making up about 40%; blue is next at 30%…" The result is the image's dominant color palette.

🎯 In a nutshell: From millions of colours, identify the 5–8 "most representative" key colours of the artwork, and record how much area each one occupies.

​

🎨 Module 3: Colour Harmony Model—"Judging Whether Colours Look Good Together"

Once the dominant colors have been extracted, they can't simply be used directly—because not just any combination of colors will look good together. The task of this module is to use validated principles of color aesthetics to evaluate and guide the color pairing process.

There are two core logics at work here:

① The Geometric Relationships of the Colour Wheel (Harmony Rules)

Arrange all colors around a circle (the color wheel), and the angular relationships between them determine whether a combination is harmonious. Centuries of human experience in painting and design have distilled several golden rules, such as:

• Two colors directly opposite each other (complementary colors) create the greatest visual tension—e.g., blue paired with orange.

• Adjacent colors placed together feel the softest and most gentle—e.g., blue paired with blue-green.

• Three colors spaced at equal intervals feel the most balanced—e.g., red, yellow, and blue.

The system automatically checks the positions of the extracted dominant colors on the color wheel to see whether they conform to these classical principles.

② Emotional Mapping

Colors carry emotion. Warm reds feel exciting; cool blues feel calm; highly saturated colors feel energetic; dark, muted colors feel oppressive. Based on the design goal—whether you want a "vibrant, energetic poster" or a "sophisticated, elegant poster"—this module checks whether the color combination conveys the right emotional message.

🎯 In a nutshell: Like an experienced designer, score every colour pairing using the principles of colour aesthetics — evaluating both whether the colour relationships are harmonious and whether the overall mood aligns with the intended emotion.

​

⚙️ Module 4: Contrast Constraints & Optimization—"Finding the Optimal Balance Between Beautiful and Functional"

The first three modules tell us which colors look good and which colors best represent the original artwork. But a poster has one non-negotiable requirement—text must be clearly legible.

If the background color and the text color of a poster are too similar, no matter how beautiful the colors may be on their own, readers won't be able to make out the content. And that defeats the entire purpose of a poster.

This module does two things:

① Setting a "Floor" (Constraint Conditions)

A hard requirement is enforced: there must be a sufficient difference in brightness between the foreground color (e.g., headline text) and the background color. This standard is drawn from accessibility design guidelines (i.e., standards that ensure even people with impaired vision can read the content clearly). Any color scheme that fails to meet this requirement is immediately eliminated—no matter how beautiful it looks.

② Finding the "Optimal Solution" Within Those Constraints (The Optimisation Process)

This is like a competitive selection process. The system simultaneously generates many candidate color schemes and sets them against each other in competition—whichever scheme scores highest on harmony, stays most faithful to the original artwork's colors, and best matches the target emotional tone has a greater chance of being retained. These schemes then continuously "breed and evolve" into even better ones until the overall best-performing winner is selected.

🎯 In a nutshell: First, use hard rules to eliminate schemes that are "beautiful but impractical"; then, from the remaining candidates, find the optimal colour scheme — one that is beautiful, functional, and faithful to the original artwork — through repeated rounds of competition and elimination.

​

🔄 The Relay Relationship Between the Four Modules

text

Module 1 → Translate colours into "perception language" Module 2 → Distil key dominant colours from millions of pixels Module 3: Evaluate whether these dominant colours are aesthetically harmonious and emotionally effective Module 4 → Apply practical constraints and optimise to produce the final scheme

Each module has its own distinct role. The output of each module is precisely the input of the next—each link in the chain feeding seamlessly into the one that follows. Only through this end-to-end relay can the system produce a poster color scheme that is simultaneously rooted in the original artwork, compliant with aesthetic principles, and practically usable.

​

Complete Feature Overview

• 📤 Image Upload — Supports click-to-select or drag-and-drop; compatible with JPG / PNG / WEBP

• 🔍 Dominant Colour Extraction—Full K-Means clustering algorithm with automatic optimisation of k = 3–7 (elbow method)

• 🎨 Colour Scheme Generation—Automatically generates both light and dark versions, with brightness-based role assignment for background, headline, body text, and accent colours

• 📊 Four-Dimensional Scoring—Contrast (40 pts) + Harmony (35 pts) + Saturation (15 pts) + Diversity (10 pts)

• 🏆 Top 3 Schemes—Including colour swatch previews, HEX values, WCAG accessibility ratings, score bar charts, and mini poster mock-ups

• 📋 One-Click CSS Variable Copy—Ready for direct use in your design projects