Palette

Old Nautical Charts

Faded and worn hues evoke the ancient parchment and aged ink of antique sea charts.

neutralretro5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Old Nautical Charts 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 Old Nautical Charts.

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

Data visualization

#F4EEDC#DCCB9D#B8A06B#8C754A#5D4D2E

Palette guide

How to use Old Nautical Charts

Overview

The "Old Nautical Charts" palette is a collection of warm, earthy, and muted tones that evoke the vintage charm of aged parchment and antique sea maps. Ranging from the light, creamy #F4EEDC to the deep, rich brown of #5D4D2E, this palette includes golden-browns like #DCCB9D and #B8A06B, alongside a strong mid-tone brown #8C754A. It's perfectly suited for designers and developers aiming to infuse projects with a sense of history, adventure, and subtle sophistication. The colors are reminiscent of faded ink on weathered paper, offering a cohesive and gently aged aesthetic for various applications.

Best used for

Vintage brand identity
Historical themed websites
Rustic home decor accents
Themed event invitations
Antique shop branding
Packaging for artisanal goods

Suggested color roles

primary

Use #8C754A as a strong, grounding color for headings, navigational elements, or key graphical features, reflecting aged ink.

secondary

Apply #B8A06B for supporting content blocks, subheadings, or as a background for interactive elements, providing a mellow warmth.

accent

Utilize #DCCB9D as a subtle highlight for borders, decorative flourishes, or hover states, mimicking the faded gold of old maps.

background

Employ #F4EEDC as the primary background color, creating a light, parchment-like canvas that feels authentic and inviting.

text

For main body text, use #5D4D2E or a deep charcoal to ensure excellent contrast and readability against the lighter background tones.

Accessibility notes

Ensure #5D4D2E text has high contrast against #F4EEDC for optimal readability.
Check that #8C754A text on #DCCB9D provides sufficient contrast for larger font sizes.
Avoid using #DCCB9D on #B8A06B for small text or critical information due to potential low contrast.
Verify contrast ratios for all interactive elements to meet accessibility guidelines.

Recommended combinations

Parchment & Ink

The classic combination for a document feel: light background, mid-tone text, and deep accents.

#F4EEDC · #8C754A · #5D4D2E

Aged Gold

Creates a rich, warm section with a golden base, faded highlight, and deep, grounding text or details.

#B8A06B · #DCCB9D · #5D4D2E

Vintage Map

Excellent for layered designs, with a light paper base, a prominent feature color, and a darker color for details or outlines.

#F4EEDC · #B8A06B · #8C754A

CSS variables

:root {
  --old-nautical-charts-1: #F4EEDC;
  --old-nautical-charts-2: #DCCB9D;
  --old-nautical-charts-3: #B8A06B;
  --old-nautical-charts-4: #8C754A;
  --old-nautical-charts-5: #5D4D2E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "old-nautical-charts": {
        1: "#F4EEDC",
        2: "#DCCB9D",
        3: "#B8A06B",
        4: "#8C754A",
        5: "#5D4D2E",
      }
    }
  }
}

Hex values

Color 1#F4EEDC

Color 2#DCCB9D

Color 3#B8A06B

Color 4#8C754A

Color 5#5D4D2E

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.8:1AA18

7.1:1AAA

1.4:1Fail

1.6:1Fail

2.7:1Fail

5.1:1AA

2.2:1Fail

1.6:1Fail

1.7:1Fail

3.2:1AA18

3.8:1AA18

2.7:1Fail

1.7:1Fail

1.9:1Fail

7.1:1AAA

5.1:1AA

3.2:1AA18

1.9:1Fail

Similar palettes

More like Old Nautical Charts

View all neutral

Aged Parchment

Aged Parchment Script

Aged Parchment Whisper

Antique Maps Sepia

Archival Sepia Tones

Medieval Tapestry Weave