Most attempts at a Japanese-style website fail on one thing before anything else gets a chance: saturation. The colors are too bright and too clean, closer to what a design tool hands you by default than to anything you'd actually see printed or dyed. Japanese web palettes turn saturation down and warmth up, every time, and that single adjustment does more for the final look than any brush-stroke font or torii-gate icon ever will. It's the same mechanism that makes default-generated pages look the same: nobody turned the defaults down.
Three principles before you pick colors
Pure black, #000000, does not show up in traditional Japanese print. Sumi ink dries to a warm near-black with a trace of brown or green in it, never a flat, true black. When you set a text color, start from something like #262320 or #2B2926 instead of #000000. The shift reads as warmth even to a visitor who couldn't tell you why the page feels softer.
Pure white, #FFFFFF, has the opposite problem: it reads as a screen, not a material. Washi paper carries a warm, slightly grey or beige cast, and Japanese sites lean on that same warmth for backgrounds, usually somewhere in the #F2F1EA to #F5F1EA range. The page ends up feeling closer to something printed than something rendered.
The third principle is restraint with color itself. Pick one accent, a muted gold or an indigo, and let it carry the weight of standing out. Everything else on the page stays close to neutral, and the moment a second loud color shows up, the first one stops reading as intentional and starts reading as decoration. These three rules are part of a longer set I wrote up in Japanese web design: 7 principles; color is where most pages win or lose them. If you've seen this described as a wabi sabi color palette, the restraint is what that label is pointing at: muted, warm, and comfortable with imperfection.
The 7 palettes
The first three below are exact values, pulled from real projects I've designed. The last four are built from named traditional Japanese colors instead, matcha and vermilion among them, which don't have one official hex value. Different sources give slightly different readings for the same color name, so treat those four as practical approximations, not certified matches.
Palette 1: Warm paper and ink
ink: #262320
secondary: #E6DCC8
accent: #C2A35E
This is a palette I use in my own work, on a fermented-skincare brand where the whole story was about slow, careful process. The sand tone gives me a second neutral, useful for separating cards or sections from the base background without introducing a new color, and the gold stays muted enough to read as considered, not loud. Reach for this one on beauty or wellness brands built around a slow, ingredient-led story.
Palette 2: Morning mist tea
ink: #2B2926
accent: #8A6350
I built this one for a Japanese tea brand, where the whole point was quiet rather than energetic. There's no secondary tone here on purpose. Background and ink carry the whole page, and the roasted clay accent only shows up on links and small details, the way a single ceramic cup might sit on an otherwise bare table.
Palette 3: Indigo depth
night indigo: #12172E
indigo: #1F3A5F
pale indigo mist: #C9DCE4
accent: #B04A4C
This palette came out of designing an indigo dye workshop site, built to hold a real range from light to dark: paper at one end, night indigo at the other, a pale indigo mist for the lighter in-between moments, and one seal-red accent for the single thing that needs to stand out, a price or a call to action. It works less like a flat palette and more like a gradient you're allowed to stop anywhere on. Use it for craft or textile brands, or anywhere depth and process are the actual story.
Palette 4: Matcha and cream
ink: #3E4632
accent: #8A9A5B
Matcha, warm cream, and a dark tea-leaf ink read as tea ceremony without a single leaf icon anywhere on the page. Keep the green pulled well below what looks fresh or grassy, closer to ground and whisked than to new growth. Good for tea and food brands that want green without produce-aisle brightness.
Palette 5: Vermilion and sumi
ink: #1E1C1A
accent: #EB6238
Shu vermilion is the red used on shrine gates and hanko stamps, and it only works at this intensity in small doses. Keep it to a stamp mark, a single button, or one line of price text. Sumi ink and off-white carry the rest of the page, which makes this the palette for anything that wants to feel a little ceremonial, a shop opening or a limited release.
Palette 6: Sakura and grey
secondary: #A79D96
ink: #2E2B29
Sakura and grey is the softest palette on this list. The pale pink does almost no work on its own, just enough to feel warm rather than clinical, while warm grey and charcoal carry the actual contrast. It reads as modern more than traditional, closer to a beauty or lifestyle brand than a craft one, good for softness without tipping into anything twee.
Palette 7: Night and gold
ink: #EDE6D6
accent: #C9A24B
Night and gold flips the paper-and-ink formula: the background carries the dark, ink-like tone, and a warm paper color does the work of text instead of background. Gold is the only genuinely bright thing on the page, and because everything around it is so dark, a little goes a long way. This is the palette for a premium or dark-mode version of a site, somewhere the brand already reads as established and doesn't need to prove it with brightness.
How to apply a palette to a Framer template
Framer makes swapping a palette simple once you know which three things to touch, and in what order.
- Change the background style. Open your project's shared styles and update the base background color before you touch anything else. Every section built on that style updates at once, so you get an honest read on whether the palette works before you've spent any time on text or buttons.
- Swap the ink. Update your text color style, headlines and body both, to the palette's ink value. At this point the page should already look coherent: warm background, warm dark text, and zero accent color anywhere yet.
- Place the accent last, and only in a few spots: links, prices, and one call-to-action button. Resist the pull to use it anywhere bigger than that. A whole section painted in your accent color stops reading as an accent and starts reading as a background you forgot to finish, which is the fastest way to make a restrained palette look like a mistake instead of a choice.
If you want a working example rather than a set of instructions, I keep a free Japanese-style starter template, MOTO Mini, built around a palette close to the first one above; what's inside it and why it's free is its own article. The full multi-page version, MOTO, and a second template built for a tea brand close to palette 2, ASAGIRI, are both on the Framer marketplace if you want to see a complete site instead of a single starting page.
FAQ
What colors are used in Japanese web design?
Most Japanese-style sites are built from three tone families: a warm paper background instead of pure white, a warm near-black ink instead of pure black, and one muted accent pulled from a natural or traditional source such as indigo or clay. Saturation stays low across the whole page, including in the accent. The mix I reach for most often in my own work is a warm sand or cream background, a soft charcoal-brown ink, and a single accent that never appears twice as strongly in the same spot.
Should I use pure black in a Japanese-style design?
No. Pure black, #000000, does not occur in traditional Japanese print or dye, where sumi ink and natural pigments always carry some warmth or undertone. On screen, pure black also reads harder and less inviting than a warm near-black like #262320 or #2B2926. Swap your text color for one of those and the page softens without losing any contrast.
What accent colors feel Japanese?
The accents that read as Japanese tend to come from named traditional colors rather than generic brand colors: indigo (ai-iro) from dye workshops, and vermilion (shu-iro) from shrine gates and hanko stamps. What makes them work is restraint rather than the specific hue. Pick one, keep it muted instead of saturated, and use it sparingly against a neutral paper-and-ink base.
Pick one palette from this list, use the code block as-is for a first draft, and adjust once you see it against your own photography and copy. The values matter less than the discipline behind them: warm ink, warm paper, one color you trust enough to use just once per screen.