Colour Palettes for Cafés and Restaurants

Restaurants and cafés need a colour system that still works when the menu changes from morning pastries to evening service. This edit moves from Flat White’s quiet neutrals and Croissant Counter’s café blue to Espresso Bar’s citrus orange, Neapolitan Pizza’s energetic red and the dark warmth of Sunday Pub Lunch. Use it to assign surfaces, type, navigation and appetising accents with intentional restraint rather than turning every menu item into a signal.

Choose the atmosphere before the accent

Begin with the service mood, then select one food-led accent. Flat White uses steamed-milk #E8D5B7, espresso #3C1A00 and café wood #8B6F4E for a calm daytime base. For a lighter bakery or brunch concept, Croissant Counter introduces restrained café blue #5E7E88 beside linen #F5E7D0; use the blue for booking links, opening hours and small navigation details, not every button. Espresso Bar’s #D96A2B citrus peel is the livelier orange case: reserve it for ‘order now’, dietary filters or a seasonal special against cup-cream #EEE1CD. This gives a welcoming neutral field, a recognisable operational colour and one appetite cue without a busy menu.

Give menus and booking flows a readable hierarchy

Treat pale food tones as surfaces and the darkest palette colour as copy, rather than assuming every colourful pairing is readable. In Espresso Bar, night-counter #201A18 on cup-cream #EEE1CD measures 13.32:1, exceeding WCAG AA’s 4.5:1 normal-text criterion: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html. A practical token set is: --surface: #EEE1CD; --ink: #201A18; --action: #D96A2B;. Use surface and ink for menu names, prices and booking forms; keep action for buttons, selected tabs and notices. Neapolitan Pizza follows the same pattern with pizza-dough #F3D8A8 as the page field and oven-char #2B2622 for text, letting pomodoro #C83B2E and basil #376B45 describe categories or dish markers rather than body copy.

Make evening dining deliberate, not merely dark

Dark service needs a light reading colour and a controlled highlight. Sunday Pub Lunch pairs fireplace-dark #2C1810 with gravy-cream #F5E6D3, a 13.77:1 text-to-background ratio, for a pub, wine bar or dinner reservation experience. Use `bg-[#2C1810] text-[#F5E6D3]` for the hero, evening menu or confirmation panel; use bitter-amber #D4760A for availability and one primary action, while beer-garden #2E4A2E can support section dividers. For a more compact restaurant identity, Ramen Counter combines steam-paper #F2E7D5, charcoal-broth #221D1A and chilli-oil #D94A2B. The neutral page keeps dish photography open; the dark tone anchors prices and headings; the chilli signal should flag heat, offers or the final checkout step.

Palettes to explore

Flat White: #3C1A00, #E8D5B7, #C49A6C, #8B6F4E, #FEFCF7
Espresso Bar: #EEE1CD, #4A3025, #B9824C, #D96A2B, #201A18
Vienna Café: #F0E2CF, #795039, #7D8765, #C99A4B, #302925
Neapolitan Pizza: #F3D8A8, #C83B2E, #376B45, #E89A38, #2B2622
Ramen Counter: #F2E7D5, #70472C, #315B4C, #D94A2B, #221D1A
Korean BBQ: #F1E6D5, #B6372E, #496B4A, #E0A437, #292725
Croissant Counter: #F5E7D0, #C99349, #5E7E88, #B94748, #3A302A
Sunday Pub Lunch: #5C3317, #D4760A, #F5E6D3, #2E4A2E, #2C1810

Practical guides

Try the free colour tools