Classic navy color palette for a book store

Create a classic navy color palette for a book store. This page gives you a ready-to-use color system, export code, and a live gradient preview — no design tools required.

classic navy color palette for a book store UI preview
classic navy color palette for a book store UI preview

Color palette

#def8fc
Background 1
background
#f0fcfe
Surface 1
surface
#111827
Text Primary 1
text-primary
#6d7d87
Text Secondary 1
text-secondary
#22D3EE
Primary 1
primary
#A855F7
Secondary 1
secondary
#A855F7
Accent 1
accent

Classic navy color palette for a book store explained

The classic navy color palette for a book store pairs #22D3EE as its primary hue with #A855F7 as the accent. The palette is balanced for classic navy aesthetics while keeping text readable against the surface color.

Every swatch is derived from the same two anchor colors, so the color palette stays harmonious across backgrounds, borders, buttons, and hover states. Copy the CSS below or open it in your favorite tool and apply it immediately.

Use the preview image as a starting point for your own mockups. It shows the exact #22D3EE → #A855F7 gradient applied to a phone screen, a primary button, and a wave pattern so you can see how the classic navy look plays out in a real interface.

Export code

/* CSS Custom Properties */
:root {
  --background: #def8fc;
  --surface: #f0fcfe;
  --text-primary: #111827;
  --text-secondary: #6d7d87;
  --primary: #22D3EE;
  --secondary: #A855F7;
  --accent: #A855F7;
}

/* Tailwind CSS config (extend.colors) */
module.exports = {
  theme: {
    extend: {
      colors: {
        'background': '#def8fc',
        'surface': '#f0fcfe',
        'text-primary': '#111827',
        'text-secondary': '#6d7d87',
        'primary': '#22D3EE',
        'secondary': '#A855F7',
        'accent': '#A855F7',
      }
    }
  }
};

Related color palettes