Palette

Sunken City Relic

The muted, desaturated tones of a forgotten city, lost beneath the ocean waves, slowly reclaimed by time.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunken City Relic 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 Sunken City Relic.

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

Data visualization

#233742#47687C#7899AD#ADC2D0#DDE6EC

Palette guide

How to use Sunken City Relic

Overview

The "Sunken City Relic" palette evokes a sense of ancient mystery and serene depth, drawing inspiration from forgotten underwater worlds. Its cool, desaturated blues and grays, ranging from the deep #233742 to the ethereal #DDE6EC, offer a sophisticated and calming visual experience. This guide provides practical application strategies for designers and developers looking to harness its unique mood. The mid-tones like #47687C and #7899AD bridge the darker and lighter shades, creating a harmonious gradient perfect for layered interfaces or atmospheric branding. Ideal for conveying stability, history, and a touch of melancholy, this palette excels in digital and print media where subtlety and depth are paramount.

Best used for

Luxury brand identity
Historical or archaeological website designs
Serene meditation or wellness applications
High-end architectural visualizations
Environmental or marine conservation organizations
Sophisticated UI/UX for professional services

Suggested color roles

primary

Utilize #233742 as the foundational brand color or for deep, immersive backgrounds in headers and footers, establishing a sense of gravitas and depth.

secondary

Employ #47687C for prominent UI elements, section dividers, or secondary calls-to-action, providing a strong yet harmonious contrast against lighter shades.

accent

Apply #7899AD sparingly for interactive elements, hover states, or subtle highlights that need to draw attention without overpowering the overall tranquil mood.

background

Design main content areas and large canvases with #DDE6EC, offering a clean, airy, and calming base that allows darker elements to stand out gracefully.

text

For primary body text, use a dark charcoal or black for optimal readability against #DDE6EC. For headings or lighter text on #233742, consider #ADC2D0 or #DDE6EC for elegant contrast.

Accessibility notes

Ensure sufficient contrast between #233742 and #DDE6EC for large text and UI elements; aim for AA or AAA standards.
Avoid using #ADC2D0 for small body text on #DDE6EC, as the contrast may be insufficient for readability, especially for users with visual impairments.
When pairing #47687C with #7899AD, verify contrast ratios, particularly for interactive components or critical information.
Provide clear focus states for interactive elements using a distinct color or outline, ensuring visibility against similar background tones like #DDE6EC.

Recommended combinations

Deep Ocean Contrast

Ideal for high-contrast sections, dark mode themes, or impactful headings against light content backgrounds.

#233742 · #DDE6EC · #47687C

Subtle Aquatic Blend

Perfect for smooth gradients, layered cards, or background patterns that require a sophisticated, flowing transition.

#47687C · #7899AD · #ADC2D0

Relic Highlight

Use for a strong base with a light secondary and a subtle, engaging accent for buttons or icons, creating refined visual hierarchy.

#233742 · #ADC2D0 · #7899AD

CSS variables

:root {
  --sunken-city-relic-1: #233742;
  --sunken-city-relic-2: #47687C;
  --sunken-city-relic-3: #7899AD;
  --sunken-city-relic-4: #ADC2D0;
  --sunken-city-relic-5: #DDE6EC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunken-city-relic": {
        1: "#233742",
        2: "#47687C",
        3: "#7899AD",
        4: "#ADC2D0",
        5: "#DDE6EC",
      }
    }
  }
}

Hex values

Color 1#233742

Color 2#47687C

Color 3#7899AD

Color 4#ADC2D0

Color 5#DDE6EC

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

6.7:1AA

9.8:1AAA

2.1:1Fail

2:1Fail

3.2:1AA18

4.7:1AA

4.1:1AA18

2:1Fail

1.6:1Fail

2.4:1Fail

6.7:1AA

3.2:1AA18

1.6:1Fail

1.5:1Fail

9.8:1AAA

4.7:1AA

2.4:1Fail

1.5:1Fail

Similar palettes

More like Sunken City Relic

View all cool

Sunken City Ruins

Abyssal Bioluminescence

Abyssal Current Glide

Arctic Ice Cavern

Bioluminescent Abyss

Coastal Tempest Gloom