Can my menu be a PDF?

It can, but an HTML menu is easier to read, resize and translate. If you must use a PDF, apply the same text and background pairs.

Why a cream background?

It adds warmth and reduces glare. The text and muted text colours are solved against it and the card surface, so the contrast figures already include the tint.

Is olive usable as text?

The darker moss tone listed in the table is. Mid olive on cream usually fails 4.5:1, so use it as a fill behind dark text only.

What about a dark restaurant theme?

The dark theme suits bars and evening venues. It is verified separately and exported with the light theme.

OKLCH Studio · Accessible palettes · Industries

Accessible color palette for restaurants (WCAG 2.2 verified)

Updated 2026-10-19

A restaurant website is mostly a menu, an address, opening hours and a booking button, and most visitors look at it on a phone while deciding where to eat. They may be standing in the street in bright light. The pages that matter are short, so every colour decision is visible, and getting contrast wrong shows at once.

Menus raise their own problems. Prices in light grey, dietary tags in tiny pastel pills and handwritten-style fonts over textured backgrounds are common and low-contrast. This palette keeps the warmth restaurants want, but sets text at AAA and verifies a labelled pill for each status, so tags such as vegan or contains nuts remain readable.

Allergen information is the one area with real safety consequences. It should be in the strongest text colour and never rely on colour alone. WCAG 2.2 AA is the usual baseline for accessibility policies; this page is not legal advice.

How to build a palette like this by hand is explained in the accessible colour palette guide; this page is the finished, verified result.

The palette: light and dark

Hex values are the sRGB result after gamut mapping. The oklch() values are those of the final hex, so converting either gives the same colour.

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Light theme

Background
#FEF7F0
oklch(0.980 0.012 67.7)
Sample text
Surface
#FFFDF6
oklch(0.994 0.009 93.6)
Sample text
Text
#1F1A13
oklch(0.221 0.015 76.1)
Sample text
Muted text
#5F564D
oklch(0.459 0.019 67.3)
Sample text
Primary
#964A2F
oklch(0.499 0.110 39.9)
Sample text
Primary foreground
#FEFBF8
oklch(0.990 0.005 67.8)
Sample text
Accent
#627127
oklch(0.520 0.100 119.8)
Sample text
Border
#978D84
oklch(0.649 0.018 64.5)
Sample text
Focus ring
#863C21
oklch(0.449 0.109 39.9)
Sample text
Success
#008259
oklch(0.536 0.117 162.5)
Sample text
Success fill
#008457
oklch(0.5415 0.1211 160.71)
Sample text
Success fill label
#FEFBF8
oklch(0.990 0.005 67.8)
Sample text
Warning
#A16400
oklch(0.557 0.122 68.7)
Sample text
Warning fill
#FFBA44
oklch(0.8335 0.1508 76.88)
Sample text
Warning fill label
#110F0D
oklch(0.170 0.005 67.5)
Sample text
Error
#A21A1B
oklch(0.4603 0.1706 26.95)
Sample text
Error fill
#C8322E
oklch(0.551 0.187 27.1)
Sample text
Error fill label
#FEFBF8
oklch(0.990 0.005 67.8)
Sample text
Info
#2274AF
oklch(0.540 0.120 245.0)
Sample text
Info fill
#1377B9
oklch(0.5501 0.1324 245.13)
Sample text
Info fill label
#FEFBF8
oklch(0.990 0.005 67.8)
Sample text

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Dark theme

Background
#1A1510
oklch(0.200 0.013 67.0)
Sample text
Surface
#24201A
oklch(0.246 0.013 78.0)
Sample text
Text
#F5EDE4
oklch(0.950 0.015 70.9)
Sample text
Muted text
#C5BCB2
oklch(0.800 0.017 70.5)
Sample text
Primary
#FBA587
oklch(0.800 0.111 40.0)
Sample text
Primary foreground
#0F0D0B
oklch(0.161 0.005 67.4)
Sample text
Accent
#BCCE83
oklch(0.820 0.100 119.7)
Sample text
Border
#736A61
oklch(0.530 0.018 67.4)
Sample text
Focus ring
#FBA587
oklch(0.800 0.111 40.0)
Sample text
Success
#6CE5B5
oklch(0.839 0.130 164.9)
Sample text
Success fill
#3BCD9A
oklch(0.759 0.143 165.0)
Sample text
Success fill label
#110F0D
oklch(0.170 0.005 67.5)
Sample text
Warning
#FFBC56
oklch(0.839 0.140 75.1)
Sample text
Warning fill
#E9A11D
oklch(0.7605 0.1539 75.30)
Sample text
Warning fill label
#110F0D
oklch(0.170 0.005 67.5)
Sample text
Error
#F66D62
oklch(0.700 0.171 27.0)
Sample text
Error fill
#FF7A6D
oklch(0.732 0.165 27.5)
Sample text
Error fill label
#110F0D
oklch(0.170 0.005 67.5)
Sample text
Info
#71BFFF
oklch(0.780 0.120 245.0)
Sample text
Info fill
#61B9FF
oklch(0.760 0.132 244.8)
Sample text
Info fill label
#110F0D
oklch(0.170 0.005 67.5)
Sample text

Contrast table: every verified pair

Pass or fail uses the raw WCAG 2.x ratio; the ratio shown is floored to two decimals so a near miss is never rounded up. APCA Lc is signed: positive is dark on light, negative is light on dark. Each row opens the pair in the checker.

Light theme: 25 pairs
Pair	WCAG ratio	Target	Normal AA / AAA	Large AA / AAA	APCA Lc	APCA tier	Check
Text on background#1f1a13 on #fef7f0	16.27:1	AAA 7:1	Pass / Pass	Pass / Pass	+100.0	Lc 75: body text	Open in checker
Text on surface#1f1a13 on #fffdf6	16.97:1	AAA 7:1	Pass / Pass	Pass / Pass	+102.9	Lc 75: body text	Open in checker
Muted text on background#5f564d on #fef7f0	6.76:1	AA 4.5:1	Pass / Fail	Pass / Pass	+80.8	Lc 75: body text	Open in checker
Muted text on surface#5f564d on #fffdf6	7.05:1	AA 4.5:1	Pass / Pass	Pass / Pass	+83.7	Lc 75: body text	Open in checker
Primary as link text on background#964a2f on #fef7f0	5.96:1	AA 4.5:1	Pass / Fail	Pass / Pass	+76.9	Lc 75: body text	Open in checker
Primary as link text on surface#964a2f on #fffdf6	6.21:1	AA 4.5:1	Pass / Fail	Pass / Pass	+79.8	Lc 75: body text	Open in checker
Button label on primary#fefbf8 on #964a2f	6.13:1	AA 4.5:1	Pass / Fail	Pass / Pass	−83.8	Lc 75: body text	Open in checker
Accent text on background#627127 on #fef7f0	5.05:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.5	Lc 60: larger content text	Open in checker
Accent text on surface#627127 on #fffdf6	5.27:1	AA 4.5:1	Pass / Fail	Pass / Pass	+75.4	Lc 75: body text	Open in checker
Border on background#978d84 on #fef7f0	3.06:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+55.7	Lc 45: headlines and large text	Open in checker
Border on surface#978d84 on #fffdf6	3.19:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+58.6	Lc 45: headlines and large text	Open in checker
Focus ring on background#863c21 on #fef7f0	7.37:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+82.5	Lc 75: body text	Open in checker
Focus ring on surface#863c21 on #fffdf6	7.69:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+85.4	Lc 75: body text	Open in checker
Success text on background#008259 on #fef7f0	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.8	Lc 60: larger content text	Open in checker
Success text on surface#008259 on #fffdf6	4.75:1	AA 4.5:1	Pass / Fail	Pass / Pass	+71.7	Lc 60: larger content text	Open in checker
Success badge label on fill#fefbf8 on #008457	4.58:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.3	Lc 75: body text	Open in checker
Warning text on background#a16400 on #fef7f0	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	+69.0	Lc 60: larger content text	Open in checker
Warning text on surface#a16400 on #fffdf6	4.75:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.0	Lc 60: larger content text	Open in checker
Warning badge label on fill#110f0d on #ffba44	11.25:1	AA 4.5:1	Pass / Pass	Pass / Pass	+73.2	Lc 60: larger content text	Open in checker
Error text on background#a21a1b on #fef7f0	7.32:1	AA 4.5:1	Pass / Pass	Pass / Pass	+81.1	Lc 75: body text	Open in checker
Error text on surface#a21a1b on #fffdf6	7.64:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.0	Lc 75: body text	Open in checker
Error badge label on fill#fefbf8 on #c8322e	5.15:1	AA 4.5:1	Pass / Fail	Pass / Pass	−78.0	Lc 75: body text	Open in checker
Info text on background#2274af on #fef7f0	4.72:1	AA 4.5:1	Pass / Fail	Pass / Pass	+70.1	Lc 60: larger content text	Open in checker
Info text on surface#2274af on #fffdf6	4.93:1	AA 4.5:1	Pass / Fail	Pass / Pass	+73.1	Lc 60: larger content text	Open in checker
Info badge label on fill#fefbf8 on #1377b9	4.66:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.9	Lc 75: body text	Open in checker

Dark theme: 25 pairs
Pair	WCAG ratio	Target	Normal AA / AAA	Large AA / AAA	APCA Lc	APCA tier	Check
Text on background#f5ede4 on #1a1510	15.63:1	AAA 7:1	Pass / Pass	Pass / Pass	−95.9	Lc 75: body text	Open in checker
Text on surface#f5ede4 on #24201a	13.97:1	AAA 7:1	Pass / Pass	Pass / Pass	−94.6	Lc 75: body text	Open in checker
Muted text on background#c5bcb2 on #1a1510	9.67:1	AA 4.5:1	Pass / Pass	Pass / Pass	−66.1	Lc 60: larger content text	Open in checker
Muted text on surface#c5bcb2 on #24201a	8.64:1	AA 4.5:1	Pass / Pass	Pass / Pass	−64.8	Lc 60: larger content text	Open in checker
Primary as link text on background#fba587 on #1a1510	9.35:1	AA 4.5:1	Pass / Pass	Pass / Pass	−64.5	Lc 60: larger content text	Open in checker
Primary as link text on surface#fba587 on #24201a	8.35:1	AA 4.5:1	Pass / Pass	Pass / Pass	−63.3	Lc 60: larger content text	Open in checker
Button label on primary#0f0d0b on #fba587	10.00:1	AA 4.5:1	Pass / Pass	Pass / Pass	+66.5	Lc 60: larger content text	Open in checker
Accent text on background#bcce83 on #1a1510	10.61:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.3	Lc 60: larger content text	Open in checker
Accent text on surface#bcce83 on #24201a	9.48:1	AA 4.5:1	Pass / Pass	Pass / Pass	−70.0	Lc 60: larger content text	Open in checker
Border on background#736a61 on #1a1510	3.42:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−24.5	Below Lc 30	Open in checker
Border on surface#736a61 on #24201a	3.05:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−23.2	Below Lc 30	Open in checker
Focus ring on background#fba587 on #1a1510	9.35:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−64.5	Lc 60: larger content text	Open in checker
Focus ring on surface#fba587 on #24201a	8.35:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−63.3	Lc 60: larger content text	Open in checker
Success text on background#6ce5b5 on #1a1510	11.66:1	AA 4.5:1	Pass / Pass	Pass / Pass	−77.0	Lc 75: body text	Open in checker
Success text on surface#6ce5b5 on #24201a	10.42:1	AA 4.5:1	Pass / Pass	Pass / Pass	−75.7	Lc 75: body text	Open in checker
Success badge label on fill#110f0d on #3bcd9a	9.45:1	AA 4.5:1	Pass / Pass	Pass / Pass	+64.5	Lc 60: larger content text	Open in checker
Warning text on background#ffbc56 on #1a1510	10.85:1	AA 4.5:1	Pass / Pass	Pass / Pass	−72.7	Lc 60: larger content text	Open in checker
Warning text on surface#ffbc56 on #24201a	9.70:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.4	Lc 60: larger content text	Open in checker
Warning badge label on fill#110f0d on #e9a11d	8.72:1	AA 4.5:1	Pass / Pass	Pass / Pass	+60.6	Lc 60: larger content text	Open in checker
Error text on background#f66d62 on #1a1510	6.28:1	AA 4.5:1	Pass / Fail	Pass / Pass	−46.5	Lc 45: headlines and large text	Open in checker
Error text on surface#f66d62 on #24201a	5.61:1	AA 4.5:1	Pass / Fail	Pass / Pass	−45.2	Lc 45: headlines and large text	Open in checker
Error badge label on fill#110f0d on #ff7a6d	7.52:1	AA 4.5:1	Pass / Pass	Pass / Pass	+54.2	Lc 45: headlines and large text	Open in checker
Info text on background#71bfff on #1a1510	9.14:1	AA 4.5:1	Pass / Pass	Pass / Pass	−63.4	Lc 60: larger content text	Open in checker
Info text on surface#71bfff on #24201a	8.17:1	AA 4.5:1	Pass / Pass	Pass / Pass	−62.1	Lc 60: larger content text	Open in checker
Info badge label on fill#110f0d on #61b9ff	9.00:1	AA 4.5:1	Pass / Pass	Pass / Pass	+62.0	Lc 60: larger content text	Open in checker

Status colours and colour blindness

The four status fills were simulated for protanopia, deuteranopia and tritanopia (Machado et al., 2009). Success against error, the pair most often confused, must stay at least 6 ΔE-OK ×100 apart under every simulation. The other pairs are shown for information, so keep an icon and a word on every status.

Light theme, status fills
Pair	Normal vision	Protanopia	Deuteranopia	Tritanopia	Held to 6
success / warning	34.5	26.3	39.2	31.9	Shown only
success / error	28.5	16.2	6.4	33.0	Yes
success / info	17.1	16.2	15.3	3.2	Shown only
warning / error	31.8	42.0	37.4	22.6	Shown only
warning / info	40.0	34.2	44.5	31.2	Shown only
error / info	30.3	24.1	21.6	33.0	Shown only

Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia

Dark theme, status fills
Pair	Normal vision	Protanopia	Deuteranopia	Tritanopia	Held to 6
success / warning	20.9	11.8	15.5	27.5	Shown only
success / error	28.8	15.3	6.4	31.3	Yes
success / info	17.7	15.2	14.3	3.8	Shown only
warning / error	13.3	13.2	10.5	5.5	Shown only
warning / info	28.5	26.0	28.7	26.2	Shown only
error / info	28.3	21.8	20.8	29.7	Shown only

Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia

Why these colours

The primary is terracotta at OKLCH hue 40 and chroma 0.11, a baked-clay orange that reads as food and hospitality. For AA with white button labels it is a deep brick. The accent is olive at hue 120, the natural companion of terracotta in Mediterranean design, used for dietary tags and highlights.

The page background is a warm cream, not white, and the text colour is a warm near-black. Those tints are small, but they keep the page from looking clinical. The olive is a good example of the solver at work: a mid olive fails on cream, so the verified text version is a darker moss, while the brighter olive only appears as a fill in the dark theme.

The generator solved 50 pairs (25 light, 25 dark), and all of them meet their target on the raw WCAG ratio. The tightest is warning text on background in the light theme at 4.55:1 against a target of 4.5:1. After gamut mapping to sRGB the light primary keeps 100% of the requested chroma; hue was held throughout.

How to use it

Set prices and allergen notes in the full text colour, with allergens written out in words, not coloured dots.
Use the booking button in the primary colour and make sure the focus ring is visible on a phone with a keyboard or switch.
Show dietary tags as pills with text and an icon on the verified badge fill and label pairs.
Avoid text over food photography; put the menu in HTML on the surface colour, not in an image.
Make opening hours available as real text, and mark Closed with a word rather than a grey tint.

Export

Generated from the verified values above, never typed by hand. Light and dark are both included.

CSS custom properties (hex, then oklch())

/* sRGB hex first: every browser. */
:root {
  --color-background: #fef7f0;
  --color-surface: #fffdf6;
  --color-text: #1f1a13;
  --color-text-muted: #5f564d;
  --color-primary: #964a2f;
  --color-primary-foreground: #fefbf8;
  --color-accent: #627127;
  --color-border: #978d84;
  --color-focus-ring: #863c21;
  --color-success: #008259;
  --color-success-solid: #008457;
  --color-success-solid-foreground: #fefbf8;
  --color-warning: #a16400;
  --color-warning-solid: #ffba44;
  --color-warning-solid-foreground: #110f0d;
  --color-error: #a21a1b;
  --color-error-solid: #c8322e;
  --color-error-solid-foreground: #fefbf8;
  --color-info: #2274af;
  --color-info-solid: #1377b9;
  --color-info-solid-foreground: #fefbf8;
}
.dark {
  --color-background: #1a1510;
  --color-surface: #24201a;
  --color-text: #f5ede4;
  --color-text-muted: #c5bcb2;
  --color-primary: #fba587;
  --color-primary-foreground: #0f0d0b;
  --color-accent: #bcce83;
  --color-border: #736a61;
  --color-focus-ring: #fba587;
  --color-success: #6ce5b5;
  --color-success-solid: #3bcd9a;
  --color-success-solid-foreground: #110f0d;
  --color-warning: #ffbc56;
  --color-warning-solid: #e9a11d;
  --color-warning-solid-foreground: #110f0d;
  --color-error: #f66d62;
  --color-error-solid: #ff7a6d;
  --color-error-solid-foreground: #110f0d;
  --color-info: #71bfff;
  --color-info-solid: #61b9ff;
  --color-info-solid-foreground: #110f0d;
}

/* oklch() where supported: the same colours, unclipped values of the hex above. */
@supports (color: oklch(0 0 0)) {
  :root {
    --color-background: oklch(0.980 0.012 67.7);
    --color-surface: oklch(0.994 0.009 93.6);
    --color-text: oklch(0.221 0.015 76.1);
    --color-text-muted: oklch(0.459 0.019 67.3);
    --color-primary: oklch(0.499 0.110 39.9);
    --color-primary-foreground: oklch(0.990 0.005 67.8);
    --color-accent: oklch(0.520 0.100 119.8);
    --color-border: oklch(0.649 0.018 64.5);
    --color-focus-ring: oklch(0.449 0.109 39.9);
    --color-success: oklch(0.536 0.117 162.5);
    --color-success-solid: oklch(0.5415 0.1211 160.71);
    --color-success-solid-foreground: oklch(0.990 0.005 67.8);
    --color-warning: oklch(0.557 0.122 68.7);
    --color-warning-solid: oklch(0.8335 0.1508 76.88);
    --color-warning-solid-foreground: oklch(0.170 0.005 67.5);
    --color-error: oklch(0.4603 0.1706 26.95);
    --color-error-solid: oklch(0.551 0.187 27.1);
    --color-error-solid-foreground: oklch(0.990 0.005 67.8);
    --color-info: oklch(0.540 0.120 245.0);
    --color-info-solid: oklch(0.5501 0.1324 245.13);
    --color-info-solid-foreground: oklch(0.990 0.005 67.8);
  }
  .dark {
    --color-background: oklch(0.200 0.013 67.0);
    --color-surface: oklch(0.246 0.013 78.0);
    --color-text: oklch(0.950 0.015 70.9);
    --color-text-muted: oklch(0.800 0.017 70.5);
    --color-primary: oklch(0.800 0.111 40.0);
    --color-primary-foreground: oklch(0.161 0.005 67.4);
    --color-accent: oklch(0.820 0.100 119.7);
    --color-border: oklch(0.530 0.018 67.4);
    --color-focus-ring: oklch(0.800 0.111 40.0);
    --color-success: oklch(0.839 0.130 164.9);
    --color-success-solid: oklch(0.759 0.143 165.0);
    --color-success-solid-foreground: oklch(0.170 0.005 67.5);
    --color-warning: oklch(0.839 0.140 75.1);
    --color-warning-solid: oklch(0.7605 0.1539 75.30);
    --color-warning-solid-foreground: oklch(0.170 0.005 67.5);
    --color-error: oklch(0.700 0.171 27.0);
    --color-error-solid: oklch(0.732 0.165 27.5);
    --color-error-solid-foreground: oklch(0.170 0.005 67.5);
    --color-info: oklch(0.780 0.120 245.0);
    --color-info-solid: oklch(0.760 0.132 244.8);
    --color-info-solid-foreground: oklch(0.170 0.005 67.5);
  }
}

Tailwind CSS v4 @theme

@theme {
  /* light */
  --color-background: oklch(0.980 0.012 67.7); /* #fef7f0 */
  --color-surface: oklch(0.994 0.009 93.6); /* #fffdf6 */
  --color-text: oklch(0.221 0.015 76.1); /* #1f1a13 */
  --color-text-muted: oklch(0.459 0.019 67.3); /* #5f564d */
  --color-primary: oklch(0.499 0.110 39.9); /* #964a2f */
  --color-primary-foreground: oklch(0.990 0.005 67.8); /* #fefbf8 */
  --color-accent: oklch(0.520 0.100 119.8); /* #627127 */
  --color-border: oklch(0.649 0.018 64.5); /* #978d84 */
  --color-focus-ring: oklch(0.449 0.109 39.9); /* #863c21 */
  --color-success: oklch(0.536 0.117 162.5); /* #008259 */
  --color-success-solid: oklch(0.5415 0.1211 160.71); /* #008457 */
  --color-success-solid-foreground: oklch(0.990 0.005 67.8); /* #fefbf8 */
  --color-warning: oklch(0.557 0.122 68.7); /* #a16400 */
  --color-warning-solid: oklch(0.8335 0.1508 76.88); /* #ffba44 */
  --color-warning-solid-foreground: oklch(0.170 0.005 67.5); /* #110f0d */
  --color-error: oklch(0.4603 0.1706 26.95); /* #a21a1b */
  --color-error-solid: oklch(0.551 0.187 27.1); /* #c8322e */
  --color-error-solid-foreground: oklch(0.990 0.005 67.8); /* #fefbf8 */
  --color-info: oklch(0.540 0.120 245.0); /* #2274af */
  --color-info-solid: oklch(0.5501 0.1324 245.13); /* #1377b9 */
  --color-info-solid-foreground: oklch(0.990 0.005 67.8); /* #fefbf8 */
  /* dark: use as dark:bg-background-dark, or remap under a .dark selector */
  --color-background-dark: oklch(0.200 0.013 67.0); /* #1a1510 */
  --color-surface-dark: oklch(0.246 0.013 78.0); /* #24201a */
  --color-text-dark: oklch(0.950 0.015 70.9); /* #f5ede4 */
  --color-text-muted-dark: oklch(0.800 0.017 70.5); /* #c5bcb2 */
  --color-primary-dark: oklch(0.800 0.111 40.0); /* #fba587 */
  --color-primary-foreground-dark: oklch(0.161 0.005 67.4); /* #0f0d0b */
  --color-accent-dark: oklch(0.820 0.100 119.7); /* #bcce83 */
  --color-border-dark: oklch(0.530 0.018 67.4); /* #736a61 */
  --color-focus-ring-dark: oklch(0.800 0.111 40.0); /* #fba587 */
  --color-success-dark: oklch(0.839 0.130 164.9); /* #6ce5b5 */
  --color-success-solid-dark: oklch(0.759 0.143 165.0); /* #3bcd9a */
  --color-success-solid-foreground-dark: oklch(0.170 0.005 67.5); /* #110f0d */
  --color-warning-dark: oklch(0.839 0.140 75.1); /* #ffbc56 */
  --color-warning-solid-dark: oklch(0.7605 0.1539 75.30); /* #e9a11d */
  --color-warning-solid-foreground-dark: oklch(0.170 0.005 67.5); /* #110f0d */
  --color-error-dark: oklch(0.700 0.171 27.0); /* #f66d62 */
  --color-error-solid-dark: oklch(0.732 0.165 27.5); /* #ff7a6d */
  --color-error-solid-foreground-dark: oklch(0.170 0.005 67.5); /* #110f0d */
  --color-info-dark: oklch(0.780 0.120 245.0); /* #71bfff */
  --color-info-solid-dark: oklch(0.760 0.132 244.8); /* #61b9ff */
  --color-info-solid-foreground-dark: oklch(0.170 0.005 67.5); /* #110f0d */
}

shadcn/ui variables (:root and .dark)

:root {
  --background: oklch(0.980 0.012 67.7);
  --foreground: oklch(0.221 0.015 76.1);
  --card: oklch(0.994 0.009 93.6);
  --card-foreground: oklch(0.221 0.015 76.1);
  --popover: oklch(0.994 0.009 93.6);
  --popover-foreground: oklch(0.221 0.015 76.1);
  --primary: oklch(0.499 0.110 39.9);
  --primary-foreground: oklch(0.990 0.005 67.8);
  --secondary: oklch(0.994 0.009 93.6);
  --secondary-foreground: oklch(0.221 0.015 76.1);
  --muted: oklch(0.994 0.009 93.6);
  --muted-foreground: oklch(0.459 0.019 67.3);
  --accent: oklch(0.994 0.009 93.6);
  --accent-foreground: oklch(0.221 0.015 76.1);
  --destructive: oklch(0.551 0.187 27.1);
  --destructive-foreground: oklch(0.990 0.005 67.8);
  --border: oklch(0.649 0.018 64.5);
  --input: oklch(0.649 0.018 64.5);
  --ring: oklch(0.449 0.109 39.9);
  --success: oklch(0.5415 0.1211 160.71);
  --success-foreground: oklch(0.990 0.005 67.8);
  --warning: oklch(0.8335 0.1508 76.88);
  --warning-foreground: oklch(0.170 0.005 67.5);
  --info: oklch(0.5501 0.1324 245.13);
  --info-foreground: oklch(0.990 0.005 67.8);
  --brand-accent: oklch(0.520 0.100 119.8);
}

.dark {
  --background: oklch(0.200 0.013 67.0);
  --foreground: oklch(0.950 0.015 70.9);
  --card: oklch(0.246 0.013 78.0);
  --card-foreground: oklch(0.950 0.015 70.9);
  --popover: oklch(0.246 0.013 78.0);
  --popover-foreground: oklch(0.950 0.015 70.9);
  --primary: oklch(0.800 0.111 40.0);
  --primary-foreground: oklch(0.161 0.005 67.4);
  --secondary: oklch(0.246 0.013 78.0);
  --secondary-foreground: oklch(0.950 0.015 70.9);
  --muted: oklch(0.246 0.013 78.0);
  --muted-foreground: oklch(0.800 0.017 70.5);
  --accent: oklch(0.246 0.013 78.0);
  --accent-foreground: oklch(0.950 0.015 70.9);
  --destructive: oklch(0.732 0.165 27.5);
  --destructive-foreground: oklch(0.170 0.005 67.5);
  --border: oklch(0.530 0.018 67.4);
  --input: oklch(0.530 0.018 67.4);
  --ring: oklch(0.800 0.111 40.0);
  --success: oklch(0.759 0.143 165.0);
  --success-foreground: oklch(0.170 0.005 67.5);
  --warning: oklch(0.7605 0.1539 75.30);
  --warning-foreground: oklch(0.170 0.005 67.5);
  --info: oklch(0.760 0.132 244.8);
  --info-foreground: oklch(0.170 0.005 67.5);
  --brand-accent: oklch(0.820 0.100 119.7);
}

Design tokens (DTCG-style JSON)

{
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.980 0.012 67.7)",
        "$description": "sRGB #fef7f0"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.994 0.009 93.6)",
        "$description": "sRGB #fffdf6"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.221 0.015 76.1)",
        "$description": "sRGB #1f1a13"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.459 0.019 67.3)",
        "$description": "sRGB #5f564d"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.499 0.110 39.9)",
        "$description": "sRGB #964a2f"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.005 67.8)",
        "$description": "sRGB #fefbf8"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.520 0.100 119.8)",
        "$description": "sRGB #627127"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.649 0.018 64.5)",
        "$description": "sRGB #978d84"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.449 0.109 39.9)",
        "$description": "sRGB #863c21"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.536 0.117 162.5)",
        "$description": "sRGB #008259"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.5415 0.1211 160.71)",
        "$description": "sRGB #008457"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.005 67.8)",
        "$description": "sRGB #fefbf8"
      },
      "warning": {
        "$type": "color",
        "$value": "oklch(0.557 0.122 68.7)",
        "$description": "sRGB #a16400"
      },
      "warning-solid": {
        "$type": "color",
        "$value": "oklch(0.8335 0.1508 76.88)",
        "$description": "sRGB #ffba44"
      },
      "warning-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.170 0.005 67.5)",
        "$description": "sRGB #110f0d"
      },
      "error": {
        "$type": "color",
        "$value": "oklch(0.4603 0.1706 26.95)",
        "$description": "sRGB #a21a1b"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.551 0.187 27.1)",
        "$description": "sRGB #c8322e"
      },
      "error-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.005 67.8)",
        "$description": "sRGB #fefbf8"
      },
      "info": {
        "$type": "color",
        "$value": "oklch(0.540 0.120 245.0)",
        "$description": "sRGB #2274af"
      },
      "info-solid": {
        "$type": "color",
        "$value": "oklch(0.5501 0.1324 245.13)",
        "$description": "sRGB #1377b9"
      },
      "info-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.005 67.8)",
        "$description": "sRGB #fefbf8"
      }
    },
    "dark": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.200 0.013 67.0)",
        "$description": "sRGB #1a1510"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.246 0.013 78.0)",
        "$description": "sRGB #24201a"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.950 0.015 70.9)",
        "$description": "sRGB #f5ede4"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.800 0.017 70.5)",
        "$description": "sRGB #c5bcb2"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.800 0.111 40.0)",
        "$description": "sRGB #fba587"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.161 0.005 67.4)",
        "$description": "sRGB #0f0d0b"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.820 0.100 119.7)",
        "$description": "sRGB #bcce83"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.530 0.018 67.4)",
        "$description": "sRGB #736a61"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.800 0.111 40.0)",
        "$description": "sRGB #fba587"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.839 0.130 164.9)",
        "$description": "sRGB #6ce5b5"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.759 0.143 165.0)",
        "$description": "sRGB #3bcd9a"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.170 0.005 67.5)",
        "$description": "sRGB #110f0d"
      },
      "warning": {
        "$type": "color",
        "$value": "oklch(0.839 0.140 75.1)",
        "$description": "sRGB #ffbc56"
      },
      "warning-solid": {
        "$type": "color",
        "$value": "oklch(0.7605 0.1539 75.30)",
        "$description": "sRGB #e9a11d"
      },
      "warning-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.170 0.005 67.5)",
        "$description": "sRGB #110f0d"
      },
      "error": {
        "$type": "color",
        "$value": "oklch(0.700 0.171 27.0)",
        "$description": "sRGB #f66d62"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.732 0.165 27.5)",
        "$description": "sRGB #ff7a6d"
      },
      "error-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.170 0.005 67.5)",
        "$description": "sRGB #110f0d"
      },
      "info": {
        "$type": "color",
        "$value": "oklch(0.780 0.120 245.0)",
        "$description": "sRGB #71bfff"
      },
      "info-solid": {
        "$type": "color",
        "$value": "oklch(0.760 0.132 244.8)",
        "$description": "sRGB #61b9ff"
      },
      "info-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.170 0.005 67.5)",
        "$description": "sRGB #110f0d"
      }
    }
  }
}

Open in the studio

Take the primary colour into the picker, build a tonal scale from it, or check any pair of your own.

Open #964A2F in the OKLCH picker →Build a tonal scale →Check a pair

FAQ

Can my menu be a PDF?: It can, but an HTML menu is easier to read, resize and translate. If you must use a PDF, apply the same text and background pairs.
Why a cream background?: It adds warmth and reduces glare. The text and muted text colours are solved against it and the card surface, so the contrast figures already include the tint.
Is olive usable as text?: The darker moss tone listed in the table is. Mid olive on cream usually fails 4.5:1, so use it as a fill behind dark text only.
What about a dark restaurant theme?: The dark theme suits bars and evening venues. It is verified separately and exported with the light theme.

← All accessible palettes