British City Colour Palettes

British cities offer more than red brick and grey skies. This edit turns harbour water, sandstone, civic blue, market warmth and rain-dark streets into usable design systems. Choose a palette by the mood your work needs: calm and maritime, heritage-led and tactile, or urban and high-contrast. The selected palettes include a dependable dark text or dark surface alongside expressive accents, so they can support real interfaces as well as posters. Start with one dominant material-like tone, reserve bright colours for actions or highlights, and let the light neutral create breathing room.

Read the city through its materials

The useful contrast between these palettes is structural, not decorative. Portsmouth Harbour puts #1F4E79 naval blue against #E4D7BF dockside rope for a composed travel or cultural layout; use the blue for navigation and the rope tone for the canvas. Glasgow starts from #2C2C2C wet tarmac, then brings in #C4845A sandstone and a controlled #E63946 signal. York and Manchester Rain offer brick-led alternatives: #5C2E0E or #8B3A3A make headings feel archival without relying on pure black. For a brighter coastal route, Brighton's #4ECDC4 and #FF6B6B need the stabilising #2C3E50 Pebble Dark for text.

Use blue, orange and dark tones with a job to do

Make the darkest colour carry reading and navigation, rather than placing small text on a colourful accent. In Leeds, #2D2D2D on #F8F5F0 measures 12.66:1, so it clears the 4.5:1 WCAG AA normal-text threshold. Newcastle's #F0F0F0 on #1C1C1C measures 14.95:1 for a dark mode. Use #1E3A5F Civic Blue for a Leeds primary action, #C9A84C only for compact badges, and retain the cream for content. Belfast's #E74C3C and #F39C12 work best as emphasis beside #1A1A2E text on #ECF0F1. Threshold reference: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Turn a palette into a small interface system

Assign tokens before styling components, so the city reference remains consistent across pages. For Portsmouth Harbour, use :root { --ink: #17334C; --surface: #E4D7BF; --brand: #1F4E79; --action: #B2473E; }. Ink is body text, surface is the page background, brand is links and buttons, and action is reserved for a booking or key conversion. In Tailwind, bg-[#E4D7BF] text-[#17334C] gives the readable default surface; use hover:bg-[#1F4E79] for interaction. Test every new text-and-background combination in the contrast checker, especially when swapping to Glasgow's dark base or Brighton's light base.

Palettes to explore

  • Bristol: #4A4A4A, #E8927C, #7BB5C9, #F2D166, #2D5A3A
  • Glasgow: #C4845A, #2C2C2C, #E63946, #8B9DAF, #F5E6D3
  • Brighton: #4ECDC4, #FF6B6B, #F9F4EF, #FFE66D, #2C3E50
  • York: #5C2E0E, #F5E1C0, #8B1A1A, #C8963E, #2B1810
  • Leeds: #1E3A5F, #C9A84C, #F8F5F0, #6B4E37, #2D2D2D
  • Belfast: #2C3E50, #E74C3C, #F39C12, #ECF0F1, #1A1A2E
  • Manchester Rain: #5C5C5C, #8B3A3A, #2C3E50, #B8B8B8, #F0EDE8
  • Portsmouth Harbour: #1F4E79, #5E9EBB, #E4D7BF, #B2473E, #17334C

Practical guides

Try the free colour tools