Kitchen Color Palette

Cream cabinets, sage accents and warm neutrals — a fresh food-friendly kitchen palette. Anchors: #FFFDD0, #9CAF88, #E9DCC9.

kitcheninteriorfresh
#FFFDD0
#9CAF88
#E9DCC9
#FFFEEA
#697460
#fffdd0 #9caf88 #e9dcc9 #fffeea #697460
#FFFDD0 #9CAF88 #E9DCC9 #FFFEEA #697460

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

background#FFFEEA
surface#FFFDD0
text#697460
text-muted#9CAF88
primary#9CAF88
secondary#FFFDD0
accent#E9DCC9

CSS variables 

:root {
  --background: #fffeea;
  --surface: #fffdd0;
  --text: #697460;
  --text-muted: #9caf88;
  --primary: #9caf88;
  --secondary: #fffdd0;
  --accent: #e9dcc9;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#FFFDD0#9CAF88#E9DCC9#FFFEEA#697460
#FFFDD0
1.0
2.3
1.3
1.0
4.7
#9CAF88
2.3
1.0
1.8
2.3
2.1
#E9DCC9
1.3
1.8
1.0
1.3
3.6
#FFFEEA
1.0
2.3
1.3
1.0
4.8
#697460
4.7
2.1
3.6
4.8
1.0

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

#FFFDD0
Cream
#9CAF88
Sage Green
#E9DCC9
Warm Beige
#FFFEEA
rgb(255, 254, 234)
#697460
rgb(105, 116, 96)

Similar palettes

Bedroom Color Palette
Living Room Color Palette
Apricot Color Palette

FAQ

How do I use the kitchen color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #FFFDD0, #9CAF88, #E9DCC9, #FFFEEA, #697460.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.