Tool / Architecture Color Palette Generator

Architecture Color Palette Generator

photo uploadsix spatial rolesCSS variablesChinese color matches

Use the upload tool to turn one building photograph into a practical architecture color palette with named Chinese color matches, measured dominant tones, and CSS variables for design documentation.

Color Study / Upload

Start with one architectural photograph.

sample / Salk Institute courtyard6 specimens measured

CSS variables

--aca-facade: #F9E9CD;
--aca-base: #5D655F;
--aca-shadow: #134857;
--aca-accent: #B13A26;
--aca-interior: #F9E9CD;
--aca-landscape: #57C3A0;

#D8C2A1

米色

Facade

Rice Beige

Use Rice Beige for the visible envelope: plaster, rammed earth, warm interior walls.

Share: 28%
Match: 75%
ΔE: 14.7

#6C766F

烟灰

Base

Smoke Grey

Anchor the massing with Smoke Grey; keep this tone on plinths, paving, or lower walls.

Share: 21%
Match: 88%
ΔE: 7.1

#263C43

苍蓝

Shadow

Distant Blue

Reserve Distant Blue for recesses, mullions, stair cores, and shaded cuts.

Share: 17%
Match: 88%
ΔE: 7.2

#B6422E

朱砂

Accent

Cinnabar

Apply Cinnabar sparingly on doors, signage, thresholds, or cultural markers.

Share: 13%
Match: 94%
ΔE: 3.8

#EEE6D5

米色

Interior

Rice Beige

Translate Rice Beige into plaster, fabric, tile, or joinery for human-scale warmth.

Share: 12%
Match: 88%
ΔE: 6.9

#91A56B

石绿

Landscape

Mineral Green

Let Mineral Green guide planting, courtyard ground, water reflection, or exterior furniture.

Share: 9%
Match: 48%
ΔE: 30.3

01 / Input

Start with a real building photograph.

The tool is built for architecture photography rather than generic image sampling, so the output is organized by spatial role instead of decorative swatches.

Use daylight facade photos for material decisions.
Use blue-hour photos for glass, shadow, and lighting studies.
Crop out unrelated sky or street clutter when the building surface should dominate.

02 / Output

Read each color as an architectural role.

Each dominant tone is mapped to facade, base, shadow, accent, interior, or landscape guidance so a palette can become a design note.

Facade tones describe the main exterior surface.
Shadow tones keep massing and depth legible.
Accent tones mark entries, edges, and lighting moments.

03 / Export

Copy variables into design systems.

The generated CSS variables give teams a quick handoff format for mockups, documentation, and visual comparison.

Use variables in concept boards and prototypes.
Keep the original photograph beside the palette for context.
Compare multiple buildings by reusing the same role names.

Process

Use the page as a working checklist.

01Upload one photograph

Choose a JPG, PNG, WebP, or GIF under 10MB that clearly shows the building surface.

02Review dominant roles

Check the measured share, matched color name, and guidance for each architecture color role.

03Copy CSS variables

Use the exported variables as a compact handoff for design studies and front-end prototypes.

Architecture Color Palette Generator

Upload a building photograph and translate dominant tones into facade, shadow, material, interior, and landscape roles.

Facade Color Palettes Guide

Plan exterior colors by material, climate, shadow depth, glazing, and landscape context.

Architecture 3D Models

Browse curated building model references with source, license, and format notes.

FAQ

Quick answers for architecture palette decisions.

What is an architecture color palette?

An architecture color palette is a set of building-specific colors organized by spatial use, such as facade, shadow, base, accent, interior, and landscape.

Can I generate a palette from any building photo?

Yes. Clear facade or interior photographs work best because the extracted colors reflect material surfaces and light conditions more accurately.

Why does the tool match Chinese traditional colors?

The matches give each measured tone a culturally grounded name and reference point, making the palette easier to discuss and document.