Wall Color Studio

Wall Color Studio

Data-driven paint choices that respect light, use, and taste.

Pick wall colors that still work when the light changes.

This single-file app demonstrates a constraint-first workflow: start from real room variables, generate palettes, preview in 3D, and follow a sampling plan.

Touch-first, vertical layout

No popups / alerts

Phaser Light Lab + Three.js 3D Preview

Bilingual (EN / 繁中)

Three principles (that you can test)

These are not “rules”; they are constraints you can accept, bend, or override—then see the consequences.

Case gallery (tap to load)

Start from real scenarios, then generalize. Each case is a different constraint profile.

2D Light Lab (Phaser)

Paint color is relative: it changes with light temperature and intensity. Drag the controls and watch the wall shift.

Paint sample

This is a simplified perception demo (use real swatches for final decisions).

Use this lighting

3D Room Painter (Three.js)

Preview wall + trim + accent under different lighting and finishes. Touch-drag to orbit.

Finish

Finish changes roughness (matte looks softer; satin looks brighter).

Lighting

Warm light can mute blues; cool light can flatten warm neutrals.

Camera

Tip: if rotating feels hard, start your finger inside the black preview area.

Capstone: Color Plan Builder

Set constraints → generate 3 options → compare trade-offs → export a practical plan.

Room type

Room type is a constraint (function); mood is your goal.

Room size (area)

22 m²

Smaller/darker rooms usually need higher lightness to avoid feeling cramped.

Daylight level

Think: window size + obstructions + time you use the room.

Window orientation

North light is cooler and often dimmer; south light is brighter and warmer.

Primary bulb temperature

This matters at night—often when you actually live in the space.

Existing materials

Relativity: the wall is judged next to floors, cabinets, and textiles.

Mood goal

Mood can override function—if you accept the trade-offs.

Style intensity

Quiet = safer undertones; Bold = higher saturation and stronger accents.

Personal colorfulness preference

45 / 100

This answers “what if I like strong colors even in calm rooms?”

Practicality priority (stain/maintenance)

60 / 100

Higher = avoid extreme whites and extreme darks, prefer mid-tones.

Resale priority

35 / 100

Higher resale priority usually means lower saturation and safer undertones.

Symbolic sensitivity (culture/context)

40 / 100

Color psychology is not universal. Increase this to avoid “iconic” extremes; then add your own context in real life.

Recommendations

Tap an option to preview in 3D. Metrics are heuristics—confirm with swatches.

How the engine reasons (transparent heuristics)

Sampling plan (do this before buying gallons)

Stress test output

Single-file demo · Three.js r134 + Phaser 3.90 · Blogger-safe prefixes · No popups