Colors

Kyoto's colors work in three layers. You can stay on the first layer and still change the look of the whole store.

The color palette: 20 colors that everything else is built from.
Color schemes: 12 ready-made combinations of background, text, buttons and inputs. Each section, and many blocks, chooses one.
Craft color fields: pale grounds that sit behind product photos, collection tiles and cards.

All color settings are in Theme settings > Colors.

The color palette

Change a palette color and every color scheme, field and accent that uses it follows. The default palette:

Default	Role
White `#FFFFFF`	Page background (scheme 1)
Washi `#FAF7F2`	A warm off-white: the second background (scheme 2) and the washi field
Ink `#1D1A17`	Primary buttons
Text `#1D1A17`	Body text and headings
Secondary text `#5A544D`	Captions, dates, labels
Lines `#E7E1D8`	Rules and borders on the white and washi backgrounds
Indigo `#1F3A6B`	The indigo band (scheme 4)
Cream `#F6EEDB`	Cream field (scheme 5)
Matcha `#E3ECD9`	Matcha field (scheme 6)
Blush `#F8DED6`	Blush field (scheme 7)
Vermilion `#C8372A`	The vermilion band (scheme 3), the cart count, the New badge and other small marks
Cobalt `#DCE5F6`	Cobalt field (scheme 8)
Iron grey `#E9E6E1`	Iron grey field (scheme 9)
Aqua `#DCEFEF`	Aqua field (scheme 10)
Gold `#F4EBCF`	Gold field (scheme 11)
Rose `#F6DCD8`	Rose field (scheme 12)
Strong cobalt `#2747A8`	Accent for large numbers, dots and lines
Strong gold `#8C6A1F`	Accent
Strong matcha `#4B7236`	Accent
Teal `#1F6F75`	Accent

The names above describe the default colors. In the theme editor the palette shows the colors themselves; find each one by its default value.

Readable by design. When a palette color becomes a background, Kyoto picks the text color with the stronger contrast (your text color or white) and adjusts secondary text until it is readable. The accent colors are meant for large type, numbers and marks, not for small body text.

Your own changes win. If you change a color inside a scheme yourself, that color keeps your value and no longer follows the palette.

Color schemes

Scheme	Background	Used for
Scheme 1	White	The page and most sections
Scheme 2	Washi	Quiet bands, the announcement bar, testimonials
Scheme 3	Vermilion, white text	The closing band and other bold moments
Scheme 4	Indigo, white text	Dark bands
Scheme 5 to 12	Cream, matcha, blush, cobalt, iron grey, aqua, gold, rose	Sections that should sit on a pale craft color, such as the product shelf

Each scheme sets: background, background gradient, text, heading, secondary text, accent (links), border, the primary and secondary button colors (background, text, border) and the input colors. You can add more schemes with Add scheme; a scheme you add keeps its own colors and does not follow the palette.

Two global choices sit above the schemes:

Page color scheme: the scheme of the page behind all sections.
Drawer and pop-up color scheme: colors of drawers, the search panel and other pop-ups.

To color one section, select the section and choose its Color scheme under Layout.

Status colors

Setting	Default	Where it shows
Sale price color	`#B3261E`	Sale prices (when Color sale prices is on in Badges and prices)
Success color	`#1E6B45`	Success messages
Error color	`#B3261E`	Form errors
Warning color	`#8A5300`	Warning messages
Rating color	`#A8660B`	Stars from a reviews app

Keep these dark enough to read on your backgrounds; text in these colors should reach a contrast of 4.5:1.

Craft color fields

A craft color field is a pale ground behind a product photo. Photos taken on a white background blend into the field (the white takes the field's color) while the product keeps its real shadow, so a page of products looks like a set of colored stages. Scene photos can be shown as they are.

Fields appear in these places:

Where	Setting	How the color is chosen
Product page, Color field stage gallery	Media stage block: Default field color, Color words and fields	Per color variant: a word in the option value (for example `indigo: #DCE5F6`), the option's swatch color or the variant metafield custom.field_colour; otherwise the product metafield or this block's default. See Product page.
Collection page grid	Grid look block: Photos on pale color fields, Field colors (Palette colors in turn, Single), Field color	The product metafield custom.field_colour wins; otherwise the palette fields in turn, or one color.
Collection banner, Color field with a shelf	Field color	This setting, else the collection metafield custom.field_colour, else blush.
Product shelf section	Shelf piece block: Color field	The block setting, else the product metafield custom.field_colour, else the palette fields in turn.
Collection list, Color fields and Round windows layouts	Collection block: Color field	The block setting, else the section's scheme gives the craft colors in turn.
Stacked cards	Card block: Card color (background), Dot color	The block settings.
Gift guide, budget tiles	Budget tile block: Field color	The block setting.
Timeline items	Timeline item block: Image ground color	The block setting.
Testimonials	Testimonial block: Product panel color	The block setting.

To give a product, a variant or a collection its own field everywhere, create the custom.field_colour metafield (type Color). See Metafields.

Tips for field photos

Shoot on a plain white or very light background with soft light from one side, so the shadow stays visible.
Keep the same distance and framing for every product, so the products look the same size on the fields.
For a product that stands freely on a field (product shelf, collection banner shelf, interlocking hero), use a cut-out .png with a transparent background. See Cut-out images.