Palette

Vintage Ceramic Blue

Classic blues and teals with an aged finish, reminiscent of antique ceramic pottery and gentle waves.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vintage Ceramic Blue reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Vintage Ceramic Blue.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#3D6B7F#6A9DB2#AED1E5#2B4C5A#8FBCCD

Palette guide

How to use Vintage Ceramic Blue

Overview

The "Vintage Ceramic Blue" palette offers a serene and sophisticated collection of blues and teals, perfectly reminiscent of antique pottery and tranquil waters. Ranging from the deep, grounding #2B4C5A and #3D6B7F to the calming mid-tones of #6A9DB2 and #8FBCCD, and culminating in the airy #AED1E5, this palette exudes a timeless elegance. Designers can leverage its cool, collected nature for branding that aims for sophistication, heritage, or tranquility. Developers will find these harmonious hex codes ideal for creating calming user interfaces, structuring content with subtle depth, and delivering a refined, inviting digital experience that feels both classic and contemporary.

Best used for

Luxury home goods or decor brands
Spa, wellness, or meditation apps
Museum or art gallery websites
Nautical or coastal-themed designs
Classic menswear or lifestyle brands
Corporate reports seeking a calm, authoritative tone

Suggested color roles

primary

A deep, muted blue-green (#3D6B7F) that provides a sophisticated and stable anchor, ideal for main headings or key brand elements.

secondary

A softer, serene blue (#6A9DB2) that complements the primary, suitable for secondary information, backgrounds, or larger UI components.

accent

A very deep, almost charcoal blue-teal (#2B4C5A) that adds gravitas and depth, perfect for subtle accents, borders, or important icons.

background

A very light, airy blue (#AED1E5) that creates a clean, calming canvas, allowing the deeper blues to gracefully emerge.

text

This deep blue-teal (#2B4C5A) offers excellent readability against #AED1E5 and other lighter shades, providing a refined alternative to black. White text works well on #3D6B7F and #6A9DB2.

Accessibility notes

#AED1E5 is very light; use dark text like #2B4C5A for optimal contrast and readability.
#8FBCCD may also require dark text for small sizes on light backgrounds.
#3D6B7F, #6A9DB2, and #2B4C5A work well with white text for headings or larger elements.
Always verify contrast ratios for text and interactive elements to ensure WCAG AA compliance, particularly for body text.

Recommended combinations

Serene Depth

Ideal for creating deep, sophisticated backgrounds, layered graphics, or sections requiring a sense of calm authority.

#2B4C5A · #3D6B7F · #6A9DB2

Airy Elegance

Effective for clean, open layouts, subtle background patterns, or designs that need a light, refreshing feel.

#AED1E5 · #8FBCCD · #6A9DB2

Classic Contrast

Use for clear hierarchies, prominent calls to action against a light background, or a refined brand signature.

#3D6B7F · #AED1E5 · #2B4C5A

CSS variables

:root {
  --vintage-ceramic-blue-1: #3D6B7F;
  --vintage-ceramic-blue-2: #6A9DB2;
  --vintage-ceramic-blue-3: #AED1E5;
  --vintage-ceramic-blue-4: #2B4C5A;
  --vintage-ceramic-blue-5: #8FBCCD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-ceramic-blue": {
        1: "#3D6B7F",
        2: "#6A9DB2",
        3: "#AED1E5",
        4: "#2B4C5A",
        5: "#8FBCCD",
      }
    }
  }
}

Hex values

Color 1#3D6B7F

Color 2#6A9DB2

Color 3#AED1E5

Color 4#2B4C5A

Color 5#8FBCCD

Accessibility

Contrast checker

2:1Fail

3.6:1AA18

1.6:1Fail

2.8:1Fail

2:1Fail

1.8:1Fail

3.1:1AA18

1.4:1Fail