Sanzo Wada's Colors in Your Code: How I Brought a 1930s Color Dictionary to AI and Web Development

There is a particular kind of beauty that survives time.

Not because someone preserved it intentionally — but because it was so precisely right that people kept coming back. The proportions of the Parthenon. The color palette of a Vermeer interior. The typeface of a 1960s Swiss train schedule. These things carry a quiet authority. They don't explain themselves. They just work.

Sanzo Wada's color combinations are like that.

Who was Sanzo Wada?

Sanzo Wada (1883–1967) was a Japanese artist, teacher, and costume designer. He spent decades studying color — not as an abstract concept, but as a practical tool. He worked in kimono design, textile production, and theater. He was interested in how colors affect perception, mood, and meaning in everyday objects and environments.

In the 1930s, he published A Dictionary of Color Combinations — a collection of 348 curated palettes built from 159 carefully selected colors. Each combination was assembled by hand, each swatch painted precisely. The book wasn't a theory paper or an academic study. It was a reference guide: a craftsman's tool for people who work with color and need reliable, harmonious combinations.

The original edition was published in Japanese, but the book eventually found a second life internationally. Seigensha Art Publishing reprinted it, and over the last few years, it quietly became a cult reference among designers, illustrators, and anyone who takes color seriously.

The Dictionary: Why It Matters

What makes Wada's dictionary different from a random collection of palettes on Dribbble or Coolors?

Intent.

Every combination in the dictionary was composed with purpose. Wada wasn't generating combinations algorithmically. He wasn't running HSL calculations or color-wheel rules. He was painting swatches and looking at them — testing how they feel next to each other, how they behave in different contexts, how they create balance or tension.

The result is a collection that feels timeless. The palettes are not trendy. They don't look like "2024 web design." They don't look like any particular era. They look — correct. In the same way that certain musical intervals sound right regardless of genre, Wada's combinations carry a visual harmony that transcends fashion.

Each color in the dictionary includes not only its visual swatch but detailed technical data: hex, RGB, CMYK, and L*a*b* values. Each combination is either 2, 3, or 4 colors. Some are bold and contrasting. Some are quiet and tonal. Some feel like autumn. Some feel like the interior of a 1950s jazz club. All of them feel considered.

Color as a Material

In my article Art in Everything: From Bruegel to Web Applications, I wrote about creativity being everywhere — in facade renovations, in running shoe design, in writing code. Color is one of the most fundamental materials of that creativity. It is the first thing people perceive. Before they read your headline, before they understand your layout — they feel your colors.

And yet, color is one of the most neglected aspects of web development.

We spend hours optimizing database queries, structuring middleware, writing tests. Then we pick a color palette in five minutes — usually by copying some trending combination from a design tool or just going with Tailwind's default slate and blue. It works. But it doesn't sing.

Wada's dictionary offers something different: a curated, time-tested library of combinations that were assembled by someone who spent a lifetime studying how colors interact. It's like having a sommelier's recommendations instead of grabbing a random bottle from the shelf. The random bottle might be fine. The recommendation will be better.

And the thing is — these palettes are not limited to art or print design. They apply to anything where color matters:

• Web interfaces — landing pages, dashboards, SaaS products
• Brand identity — logos, marketing materials, social media presence
• Data visualization — charts, graphs, maps
• Presentations — slides that don't look like default PowerPoint
• Design systems — building a consistent Tailwind or CSS custom theme

Any surface that carries color can benefit from Wada's eye.

From a Book to the Browser

A few years ago, Matt DesLauriers (@mattdesl) digitized the color data from Wada's dictionary and published it as a JSON dataset on GitHub under an MIT license. That dataset is a beautiful piece of work in itself — 159 colors with full hex/RGB/CMYK/L*a*b* values, and 348 combinations referencing those colors by ID.

When I found this dataset, the idea clicked almost immediately.

I wanted to build something around it. Not a static gallery. Not just another color-swatch website. I wanted to make Wada's palettes actually usable — browsable, searchable, and most importantly, accessible programmatically. If I'm building a website and I want a good three-color palette, I should be able to ask for one and get it back as Tailwind config or CSS variables. If an AI assistant is helping me with a UI, it should be able to pull from Wada's dictionary instead of making up random colors.

That's how espectro.dev was born.

Espectro is a free, non-commercial web project built with Laravel, Livewire, and Tailwind CSS. It serves the full Wada dictionary as:

• A browsable site — explore all 159 colors and 348 combinations with swatches, detail pages, and search
• A public JSON API — no authentication required, rate-limited to 15 requests per minute, returning full color data in structured JSON
• An MCP server — so AI tools like Cursor and Claude can search colors, fetch palettes, and export combinations directly

The site itself is intentionally minimal. Muted tones. Serif headings. Lots of white space. I wanted it to feel like the book — quiet, respectful, focused on the colors themselves.

The Practical Part: Color Palettes for Your Tailwind Config

Here's where it gets useful for everyday development.

Say you're building a dashboard. You need a primary color, a secondary, and an accent. Instead of guessing or scrolling through color pickers, you can hit the API:

curl https://espectro.dev/api/combinations/42

You get back a structured JSON response with 2, 3, or 4 colors — each with hex, RGB, CMYK, and L*a*b*. Or if you want something random for inspiration:

curl https://espectro.dev/api/combinations/random

But the real power comes from the export endpoint (available via MCP). Ask for combination #42 as a Tailwind config and you get:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'theme': {
          'primary': '#ebd999',
          'secondary': '#8b6c42',
          'accent': '#4a3728',
        }
      }
    }
  }
}

Or as CSS variables:

:root {
  --color-primary: #ebd999;
  --color-secondary: #8b6c42;
  --color-accent: #4a3728;
}

Copy, paste, done. Your site now uses a palette that a Japanese color master composed 90 years ago. And it looks better than whatever you would have picked at 11 PM on a Friday.

This works for anything: landing pages, email templates, logo concepts, data dashboards, presentation themes. Wherever you need a cohesive set of colors that actually harmonize.

Making It an MCP Server

Here's the part that excited me the most.

MCP — Model Context Protocol — is a standard that allows AI assistants to use external tools. If you've worked with Cursor or Claude, you've probably seen how they can call functions, search documentation, or interact with databases. MCP makes it possible to expose any service as a set of tools that an AI can invoke.

I built Espectro's MCP server directly into the Laravel application. It exposes six tools:

The MCP endpoint is public at https://espectro.dev/mcp/espectro — the same rate limit applies (15 req/min per IP). Anyone can connect to it from any MCP-compatible client without installing anything.

For Laravel developers specifically, I also published a small connector package — labrodev/laravel-mcp-espectro. You run composer require and php artisan espectro:install, and it creates a .mcp.json in your project root. Cursor picks it up automatically. That's it — no local MCP server, no configuration, no color data to bundle. The package simply points your tools to the hosted endpoint.

How I Actually Use It

I added Espectro as a connector in Claude Desktop. It took about 30 seconds: open settings, add a custom MCP server, paste the URL https://espectro.dev/mcp/espectro, save.

Now, when I'm working on a project and I need a color scheme, I don't leave the conversation. I just say something like:

"I need a warm three-color palette for a bakery website. Check Sanzo Wada combinations and suggest something."

Claude calls search-combinations with size 3, browses the results, and suggests specific combinations from Wada's dictionary — with hex codes, visual descriptions, and even an exported Tailwind config if I ask for it. If I don't like the first suggestion, I can say "something cooler, more muted" and it searches again, this time filtering by different criteria.

It's not generating colors out of thin air. It's pulling from a curated, historically validated source. And that's the difference — instead of AI hallucinating a palette, it's selecting from one of the most thoughtful color collections ever assembled.

I also use it in Cursor when I'm coding. If I'm styling a component and I need an accent color that works with my existing palette, I can ask Cursor to check Wada's dictionary. It calls search-colors, finds matching options, and I pick one without leaving my editor.

This is what I meant in my article about AI and experience — AI amplifies your architecture. If you feed it good sources, you get good results. Wada's dictionary is an exceptionally good source.

A Note on Public Domain and Credits

Sanzo Wada passed away in 1967. Under Japanese copyright law, his works entered the public domain 50 years after his death — in 2017. The color data used in Espectro comes from Matt DesLauriers' open-source digitization (MIT license) of the original published work.

Espectro is a free, non-commercial project. It does not assert any rights over the color data. No cookies, no tracking, no personal data collection on the API or MCP. It exists to make Wada's work accessible and useful in the modern web development context.

If you enjoy working with these colors, I'd encourage you to buy the physical book — it's available on Amazon and it's a beautiful object to have on your desk. There's something irreplaceable about seeing those swatches printed on paper, exactly as Wada intended.

Final Thought

There is a particular kind of beauty that survives time.

Sanzo Wada spent decades learning what that beauty looks like in color. He encoded it into 348 combinations. Now, almost a century later, those combinations can flow from a book through a JSON file through an MCP server into your Tailwind config — and from there, onto someone's screen.

The river is the same. The waters are ever newer.

Espectro is open and free at espectro.dev. Color data credits: mattdesl/dictionary-of-colour-combinations (MIT). Developed by Petro Lashyn.