Back to palettes

Palette

Coral Reef Twilight

Explores the vibrant ecosystem of a coral reef as the last rays of sun dip below the ocean's surface.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Reef Twilight 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 Coral Reef Twilight.

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

Data visualization

#00008B#483D8B#FF6347#FF7F50#B22222

Palette guide

How to use Coral Reef Twilight

Overview

The Coral Reef Twilight palette explores the vibrant ecosystem of a coral reef as the last rays of sun dip below the ocean's surface. It combines deep, mysterious blues like Dark Blue #00008B and Dark Slate Blue #483D8B with fiery, energetic reds and oranges such as Tomato #FF6347, Coral #FF7F50, and Firebrick #B22222. This striking contrast evokes the dramatic shift from daylight to dusk underwater, making it perfect for designs that require a bold, adventurous, and slightly mysterious feel, suitable for gaming, dramatic branding, or artistic projects.

Best used for

  • Dramatic game interfaces
  • Adventure or thriller book covers
  • Bold website designs with a strong focal point
  • Theatrical event posters
  • Dark mode UI themes
  • Branding for luxury or exclusive products

Suggested color roles

primary

Use Dark Blue #00008B for foundational elements, providing a deep, stable, and mysterious base.

secondary

Tomato #FF6347 can be used for calls-to-action or key highlights to create a powerful contrast.

accent

Coral #FF7F50 provides a slightly softer, yet still energetic, accent for details.

background

Dark Blue #00008B or Dark Slate Blue #483D8B for a rich, immersive background.

text

White or a light cream for primary text, ensuring excellent readability against the dark background.

Accessibility notes

  • #FF6347, #FF7F50, and #B22222 provide excellent contrast with dark blue or black backgrounds.
  • Ensure sufficient contrast for any text placed on #483D8B, especially if it's not white.
  • Avoid using #00008B or #483D8B for text on dark backgrounds without careful contrast checks.
  • White text on #00008B or #483D8B is generally highly accessible.

Recommended combinations

Dramatic Contrast

Ideal for high-impact branding, hero sections, or elements needing strong visual tension.

#00008B · #FF6347 · #B22222

Twilight Glow

Excellent for creating depth and a sense of transition, suitable for backgrounds or overlays.

#483D8B · #FF7F50 · #00008B

Fiery Depths

Use for energetic accents, warnings, or graphic details that demand attention.

#B22222 · #FF6347 · #483D8B

CSS variables

:root {
  --coral-reef-twilight-2-1: #00008B;
  --coral-reef-twilight-2-2: #483D8B;
  --coral-reef-twilight-2-3: #FF6347;
  --coral-reef-twilight-2-4: #FF7F50;
  --coral-reef-twilight-2-5: #B22222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-twilight-2": {
        1: "#00008B",
        2: "#483D8B",
        3: "#FF6347",
        4: "#FF7F50",
        5: "#B22222",
      }
    }
  }
}

Related searches

dark blue orange palettedramatic coral colorstwilight marine designenergetic deep sea schemebold red blue palette

Palette colors

Hex values

Color 1#00008B
·
Color 2#483D8B
·
Color 3#FF6347
·
Color 4#FF7F50
·
Color 5#B22222
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
5.2:1AA
6.1:1AA
2.3:1Fail
2
1.7:1Fail
3.1:1AA18
3.6:1AA18
1.4:1Fail
3
5.2:1AA
3.1:1AA18
1.2:1Fail
2.3:1Fail
4
6.1:1AA
3.6:1AA18
1.2:1Fail
2.7:1Fail
5
2.3:1Fail
1.4:1Fail
2.3:1Fail
2.7:1Fail

Similar palettes

More like Coral Reef Twilight

View all vibrant
Submarine Floral Burst
Coral Garden Bloom
Coral Reef Discovery
Coral Reef Jewel
Coral Reef Mosaic
Coral Reef Twilight