Back to palettes

Palette

Shadowed Coral Realm

Explores the hidden beauty of a coral reef veiled in the deep shadows of the ocean's twilight zone.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shadowed Coral Realm 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 Shadowed Coral Realm.

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

Data visualization

#0D1C2E#3A0C4A#6A1D5B#FF6F61#0F4C5C

Palette guide

How to use Shadowed Coral Realm

Overview

The Shadowed Coral Realm palette dives into the mysterious beauty of deep ocean hues, blending enigmatic darks with a vibrant coral pop. It features a profound deep navy #0D1C2E, transitioning into intriguing purplish-blacks like #3A0C4A and #6A1D5B, alongside a rich teal #0F4C5C. The palette is dramatically punctuated by the lively, warm #FF6F61, offering a striking contrast. Designers and developers can leverage this collection to create captivating, almost otherworldly digital experiences. It's perfect for projects requiring a sense of depth, luxury, or a dramatic flair, where the vibrant accent can truly stand out against the shadowy, aquatic backdrop.

Best used for

  • Luxury brand experiences
  • High-end fashion or jewelry websites
  • Sci-fi or fantasy game interfaces
  • Underwater exploration themes
  • Dramatic storytelling platforms
  • Event promotion with a bold aesthetic

Suggested color roles

primary

#0D1C2E serves as the foundational dark, ideal for main backgrounds or large sections, setting a mysterious tone.

secondary

Use #0F4C5C for complementary panels or information blocks, adding a touch of deep aquatic color.

accent

#FF6F61 is the star accent, perfect for calls to action, key data points, or interactive elements that demand attention.

background

#0D1C2E or #3A0C4A provides a deep, immersive canvas.

text

On dark backgrounds, a light, clean white or a very pale gray ensures readability. For contrast on the lighter teal, use #0D1C2E.

Accessibility notes

  • The vibrant #FF6F61 needs careful contrast checks when used as text on any dark background.
  • Ensure #FF6F61 on #0D1C2E or #0F4C5C meets WCAG AA for important elements.
  • Avoid using #3A0C4A or #6A1D5B for primary text on similar dark backgrounds.
  • Consider a very light text color (e.g., white) for all text on the darker shades to maximize readability.

Recommended combinations

Deep Sea Glow

For dramatic interfaces where the coral glow highlights key actions against deep ocean blues.

#0D1C2E · #0F4C5C · #FF6F61

Twilight Mystery

Creates a luxurious, enigmatic feel with subtle purple undertones and a bright, alluring accent.

#3A0C4A · #6A1D5B · #FF6F61

Coral Bloom

A strong dark base with a vibrant accent and a deeper purple for depth, ideal for hero sections.

#0D1C2E · #6A1D5B · #FF6F61

CSS variables

:root {
  --shadowed-coral-realm-1: #0D1C2E;
  --shadowed-coral-realm-2: #3A0C4A;
  --shadowed-coral-realm-3: #6A1D5B;
  --shadowed-coral-realm-4: #FF6F61;
  --shadowed-coral-realm-5: #0F4C5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-coral-realm": {
        1: "#0D1C2E",
        2: "#3A0C4A",
        3: "#6A1D5B",
        4: "#FF6F61",
        5: "#0F4C5C",
      }
    }
  }
}

Related searches

deep ocean color schemedark coral palettemysterious ui colorsluxury dark themedramatic web design palette

Palette colors

Hex values

Color 1#0D1C2E
·
Color 2#3A0C4A
·
Color 3#6A1D5B
·
Color 4#FF6F61
·
Color 5#0F4C5C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.6:1Fail
6.3:1AA
1.8:1Fail
2
1.1:1Fail
1.5:1Fail
5.8:1AA
1.7:1Fail
3
1.6:1Fail
1.5:1Fail
4:1AA18
1.1:1Fail
4
6.3:1AA
5.8:1AA
4:1AA18
3.5:1AA18
5
1.8:1Fail
1.7:1Fail
1.1:1Fail
3.5:1AA18

Similar palettes

More like Shadowed Coral Realm

View all dark