Back to palettes

Palette

Sunken City Ruins

A somber collection of blues and grays, representing the forgotten structures submerged in the deep, quiet sea.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F6D7A#628B9F#8BA0B3#AABCC6#3A535D

Palette guide

How to use Sunken City Ruins

Overview

The Sunken City Ruins palette offers a deeply evocative collection of cool blues and grays, perfect for projects requiring a sense of mystery, depth, and quiet contemplation. With shades like the profound #4F6D7A and the muted yet clear #628B9F, this palette brings the serene atmosphere of forgotten structures beneath the sea to your designs. The darker, grounding #3A535D anchors the lighter tones of #8BA0B3 and #AABCC6, which evoke glimpses of light filtering through water. Designers and developers can leverage this palette to create sophisticated, immersive experiences, whether in digital interfaces or environmental branding, establishing a timeless and intriguing visual narrative.

Best used for

  • Mystery-themed game environments and concept art
  • Sophisticated corporate branding with a calm, trustworthy aura
  • UI/UX for data visualization or historical archives
  • Documentary film titles and underwater photography portfolios
  • Interior design for tranquil, contemplative spaces
  • Elegant website designs for luxury services or educational platforms

Suggested color roles

primary

#4F6D7A (Deep Slate Blue) - Use as a foundational color for large sections, headers, or primary interactive elements, conveying stability and depth.

secondary

#628B9F (Muted Ocean Blue) - Ideal for supporting content blocks, secondary navigation, or as a dominant background to #4F6D7A, providing a harmonious contrast.

accent

#AABCC6 (Light Gray-Blue) - Best used for subtle highlights, active states, borders, or small illustrative elements that need to stand out without being jarring.

background

#8BA0B3 (Soft Gray-Blue) - Provides a gentle, expansive backdrop for content, ensuring readability while maintaining the palette's serene mood.

text

#3A535D (Dark Teal-Gray) - Excellent for primary body text on lighter backgrounds like #8BA0B3 or #AABCC6. For darker backgrounds, use a clean white or near-white for optimal legibility.

Accessibility notes

  • Ensure sufficient contrast when pairing #3A535D text with lighter background colors like #8BA0B3 or #AABCC6 to meet WCAG AA standards.
  • Avoid using #AABCC6 as text on #8BA0B3 as their low contrast will significantly impair readability for most users.
  • For interactive elements, use distinct color changes between states (e.g., #4F6D7A for default, #628B9F for hover) to provide clear visual feedback.
  • When placing text on #4F6D7A or #3A535D, always opt for white or a very light gray to ensure high contrast and legibility.

Recommended combinations

Deep Sea Contrast

Effective for UI elements where #3A535D serves as dark text or icons on a #AABCC6 background, with #628B9F for borders or secondary information.

#3A535D · #AABCC6 · #628B9F

Muted Ocean Depth

Perfect for creating layered backgrounds or complex data visualizations, where #4F6D7A grounds the design, #8BA0B3 provides a soft canvas, and #628B9F adds subtle dimension.

#4F6D7A · #8BA0B3 · #628B9F

Faded Relic

Ideal for body text (#3A535D) on a light background (#AABCC6), with a strong header or call-to-action in #4F6D7A to draw attention.

#AABCC6 · #3A535D · #4F6D7A

CSS variables

:root {
  --sunken-city-ruins-1: #4F6D7A;
  --sunken-city-ruins-2: #628B9F;
  --sunken-city-ruins-3: #8BA0B3;
  --sunken-city-ruins-4: #AABCC6;
  --sunken-city-ruins-5: #3A535D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunken-city-ruins": {
        1: "#4F6D7A",
        2: "#628B9F",
        3: "#8BA0B3",
        4: "#AABCC6",
        5: "#3A535D",
      }
    }
  }
}

Related searches

mysterious blue grey color palettedeep ocean color schemecool historical design colorsmuted architectural palettesomber blue gray web design

Palette colors

Hex values

Color 1#4F6D7A
·
Color 2#628B9F
·
Color 3#8BA0B3
·
Color 4#AABCC6
·
Color 5#3A535D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.8:1Fail
1.5:1Fail
2
1.5:1Fail
1.4:1Fail
1.9:1Fail
2.2:1Fail
3
2:1Fail
1.4:1Fail
1.4:1Fail
3:1AA18
4
2.8:1Fail
1.9:1Fail
1.4:1Fail
4.2:1AA18
5
1.5:1Fail
2.2:1Fail
3:1AA18
4.2:1AA18

Similar palettes

More like Sunken City Ruins

View all cool
Abyssal Bioluminescence
Abyssal Current Glide
Bioluminescent Abyss
Coastal Tempest Gloom
Deep Ocean Bloom
Deep Sea Shimmer