Gallery stone

White walls, grey stone floors and charcoal labels: a neutral frame that steps aside so photographs and products carry all the colour.

calm
serious

The colours

6 colours, each with a role, then the palette at work on a small page.

Limewashbackground#f4f4f2
Gallery wallsurface#ffffff
Charcoaltext#1c1c1b
Stone greymuted#5b5b58
Graphiteaccent#3a3a37
Plinth edgeborder#d6d6d2

Text on background: 15.49:1 — passes AA

Spring open days

A garden worth the walk

Paths, ponds and a glasshouse full of ferns, open every weekend from April to June.

Plan a visit

New

The late tulip border

Two hundred bulbs, planted by volunteers last autumn.

A made-up page in this palette. Every text colour reaches at least 4.5:1 on its background; the heading, at 28px, may use a 3:1 pair.

Copy the idea

Take the palette with you as a brief for a person, as instructions for an AI assistant, or as design tokens: the colours, their roles and the pairs that are safe for text.

# Gallery stone — palette recipe

## The idea

- White walls, grey stone floors and charcoal labels: a neutral frame that steps aside so photographs and products carry all the colour.
- Mood: calm, serious

## Use it for

- Photography and art portfolios
- Shops where the products are colourful
- Architecture and interior studios

## Avoid it when

- There are few images to bring colour
- The page needs a strong, recognisable colour of its own

## Colours

- Limewash (background): #f4f4f2
- Gallery wall (surface): #ffffff
- Charcoal (text): #1c1c1b
- Stone grey (muted): #5b5b58
- Graphite (accent): #3a3a37
- Plinth edge (border): #d6d6d2

## Accessible pairs

- Charcoal on Gallery wall — 17.1:1 (AA)
- Gallery wall on Charcoal — 17.1:1 (AA)
- Charcoal on Limewash — 15.5:1 (AA)
- Limewash on Charcoal — 15.5:1 (AA)
- Charcoal on Plinth edge — 11.7:1 (AA)
- Plinth edge on Charcoal — 11.7:1 (AA)
- Gallery wall on Graphite — 11.4:1 (AA)
- Graphite on Gallery wall — 11.4:1 (AA)
- Graphite on Limewash — 10.4:1 (AA)
- Limewash on Graphite — 10.4:1 (AA)
- Graphite on Plinth edge — 7.8:1 (AA)
- Plinth edge on Graphite — 7.8:1 (AA)
- Gallery wall on Stone grey — 6.8:1 (AA)
- Stone grey on Gallery wall — 6.8:1 (AA)
- Limewash on Stone grey — 6.2:1 (AA)
- Stone grey on Limewash — 6.2:1 (AA)
- Plinth edge on Stone grey — 4.7:1 (AA)
- Stone grey on Plinth edge — 4.7:1 (AA)

## Principles

- Limewash and gallery wall together cover about 90% of the page; images supply the colour
- Charcoal for all headings and body text, stone grey for captions and secondary details
- Graphite is the accent: solid buttons and active states, under 5% of the page
- Add no extra hue; if one is needed, borrow it from the main image
- Use plinth edge for hairline rules and image frames

Design with the "Gallery stone" palette.

The idea: White walls, grey stone floors and charcoal labels: a neutral frame that steps aside so photographs and products carry all the colour.
The mood: calm, serious.

It suits:
- Photography and art portfolios
- Shops where the products are colourful
- Architecture and interior studios
It is a poor fit when:
- There are few images to bring colour
- The page needs a strong, recognisable colour of its own

Use these colours, each in its role:
- Limewash (background): #f4f4f2
- Gallery wall (surface): #ffffff
- Charcoal (text): #1c1c1b
- Stone grey (muted): #5b5b58
- Graphite (accent): #3a3a37
- Plinth edge (border): #d6d6d2

Set text only in these colour pairs (text on background); use the ones marked (AA large) only for text at least 24px, or 18.66px bold:
- Charcoal on Gallery wall — 17.1:1 (AA)
- Gallery wall on Charcoal — 17.1:1 (AA)
- Charcoal on Limewash — 15.5:1 (AA)
- Limewash on Charcoal — 15.5:1 (AA)
- Charcoal on Plinth edge — 11.7:1 (AA)
- Plinth edge on Charcoal — 11.7:1 (AA)
- Gallery wall on Graphite — 11.4:1 (AA)
- Graphite on Gallery wall — 11.4:1 (AA)
- Graphite on Limewash — 10.4:1 (AA)
- Limewash on Graphite — 10.4:1 (AA)
- Graphite on Plinth edge — 7.8:1 (AA)
- Plinth edge on Graphite — 7.8:1 (AA)
- Gallery wall on Stone grey — 6.8:1 (AA)
- Stone grey on Gallery wall — 6.8:1 (AA)
- Limewash on Stone grey — 6.2:1 (AA)
- Stone grey on Limewash — 6.2:1 (AA)
- Plinth edge on Stone grey — 4.7:1 (AA)
- Stone grey on Plinth edge — 4.7:1 (AA)

Follow these principles:
- Limewash and gallery wall together cover about 90% of the page; images supply the colour
- Charcoal for all headings and body text, stone grey for captions and secondary details
- Graphite is the accent: solid buttons and active states, under 5% of the page
- Add no extra hue; if one is needed, borrow it from the main image
- Use plinth edge for hairline rules and image frames

Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #f4f4f2;
  --color-surface: #ffffff;
  --color-text: #1c1c1b;
  --color-muted: #5b5b58;
  --color-accent: #3a3a37;
  --color-border: #d6d6d2;
}

Download brief (.md)

Accessible pairs

Every pair of colours that is readable as text, strongest first. AA pairs (4.5:1 or more) work at any size; AA large pairs (3:1 or more) only for text of 24px, or 18.66px bold.

Text on background	Contrast	Level
Charcoal on Gallery wall	17.1:1	AA
Gallery wall on Charcoal	17.1:1	AA
Charcoal on Limewash	15.5:1	AA
Limewash on Charcoal	15.5:1	AA
Charcoal on Plinth edge	11.7:1	AA
Plinth edge on Charcoal	11.7:1	AA
Gallery wall on Graphite	11.4:1	AA
Graphite on Gallery wall	11.4:1	AA
Graphite on Limewash	10.4:1	AA
Limewash on Graphite	10.4:1	AA
Graphite on Plinth edge	7.8:1	AA
Plinth edge on Graphite	7.8:1	AA
Gallery wall on Stone grey	6.8:1	AA
Stone grey on Gallery wall	6.8:1	AA
Limewash on Stone grey	6.2:1	AA
Stone grey on Limewash	6.2:1	AA
Plinth edge on Stone grey	4.7:1	AA
Stone grey on Plinth edge	4.7:1	AA

Where it fits

Use it for

Photography and art portfolios
Shops where the products are colourful
Architecture and interior studios

Avoid it when

There are few images to bring colour
The page needs a strong, recognisable colour of its own

Principles

How much of each colour to use, and where.

Limewash and gallery wall together cover about 90% of the page; images supply the colour
Charcoal for all headings and body text, stone grey for captions and secondary details
Graphite is the accent: solid buttons and active states, under 5% of the page
Add no extra hue; if one is needed, borrow it from the main image
Use plinth edge for hairline rules and image frames