Palette

Deep Sea Coral

Explore the vibrant and intense colors hidden within the mysterious coral gardens of the deep sea.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Sea Coral 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 Deep Sea Coral.

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

Data visualization

#000080#1E90FF#4682B4#DC143C#FF6347

Palette guide

How to use Deep Sea Coral

Overview

The Deep Sea Coral palette (version 3) explores the vibrant and intense colors hidden within the mysterious coral gardens of the deep sea. It begins with a profound navy #000080, complemented by the bright royal blue #1E90FF and a muted steel blue #4682B4, establishing a classic oceanic base. The drama truly unfolds with the fiery accents: a striking crimson #DC143C and a bold coral orange #FF6347. This palette is designed for projects that demand high impact, dynamic contrast, and a memorable visual story, perfect for evoking energy and excitement.

Best used for

Adventure game interfaces
Dramatic movie posters
Sports team branding
E-commerce promotions
High-energy event design
Bold digital art

Suggested color roles

primary

#000080 (A deep, powerful navy, ideal for foundational backgrounds or main content areas.)

secondary

#1E90FF (A bright, dynamic royal blue, suitable for headings, important links, or secondary UI elements.)

accent

#DC143C (The intense crimson, perfect for calls to action, alerts, or conveying urgency and excitement.)

background

#000080 (Provides a rich, deep backdrop that allows the vibrant blues and reds to truly pop.)

text

#FF6347 (Striking for headings or short, impactful text. For body text on dark backgrounds, a light grey or white (e.g., #F0F0F0) is recommended for optimal readability.)

Accessibility notes

#DC143C and #FF6347 provide strong contrast against #000080 and #4682B4, making them suitable for interactive elements and headings.
Always use a light, high-contrast color (e.g., white or light grey) for body text on #000080 to ensure WCAG compliance.
Exercise caution when using #4682B4 for text on #000080 due to potentially insufficient contrast.
The vibrant red/orange accents should be tested for color blindness considerations when used for critical information.

Recommended combinations

Abyssal Drama

Deep navy with contrasting royal blue and crimson for high-impact design.

#000080 · #1E90FF · #DC143C

Coral Flare

Muted blue base with vibrant coral and royal blue for dynamic highlights.

#4682B4 · #FF6347 · #1E90FF

Energetic Depths

Powerful dark base with two strong, warm accents for urgency and excitement.

#000080 · #FF6347 · #DC143C

CSS variables

:root {
  --deep-sea-coral-3-1: #000080;
  --deep-sea-coral-3-2: #1E90FF;
  --deep-sea-coral-3-3: #4682B4;
  --deep-sea-coral-3-4: #DC143C;
  --deep-sea-coral-3-5: #FF6347;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-coral-3": {
        1: "#000080",
        2: "#1E90FF",
        3: "#4682B4",
        4: "#DC143C",
        5: "#FF6347",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#1E90FF

Color 3#4682B4

Color 4#DC143C

Color 5#FF6347

Accessibility

Contrast checker

4.9:1AA

3.9:1AA18

3.2:1AA18

5.4:1AA

4.9:1AA

1.3:1Fail

1.5:1Fail

1.1:1Fail