Back to palettes

Palette

Coral Reef Sanctuary

Bright oranges and teals depicting a lively underwater world full of vibrant coral formations.

vibrantnatural5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6347#FF8C00#FFD700#40E0D0#20B2AA

Palette guide

How to use Coral Reef Sanctuary

Overview

The Coral Reef Sanctuary palette offers a vibrant and energetic blend of warm oranges and cool teals, perfect for evoking lively underwater scenes. Featuring dynamic shades like the bright Tomato #FF6347 and the sunny DarkOrange #FF8C00, balanced by the refreshing Turquoise #40E0D0 and DarkCyan #20B2AA, this palette is ideal for projects needing a natural yet striking appeal. The inclusion of Gold #FFD700 adds a touch of sunlit shimmer, making it versatile for digital interfaces, branding, or creative illustrations. Designers can leverage these hues to create engaging visuals that pop, capturing the essence of a thriving marine ecosystem.

Best used for

  • Eco-conscious brand identities
  • Children's book illustrations
  • Tropical resort marketing materials
  • Educational apps about marine life
  • Summer event posters and web design
  • Nature documentary graphics

Suggested color roles

primary

Use Tomato #FF6347 for calls-to-action or main headings to command attention.

secondary

DarkOrange #FF8C00 works well for sub-headers or key informational blocks, providing warmth.

accent

Turquoise #40E0D0 can highlight interactive elements or important details, offering a cool contrast.

background

Consider a very light off-white or a subtle gradient using #20B2AA for a calming base.

text

DarkCyan #20B2AA provides good readability on lighter backgrounds, or use charcoal for primary text.

Accessibility notes

  • #FF6347 and #FF8C00 may require careful pairing with text colors for sufficient contrast.
  • #40E0D0 on a white background might not meet WCAG AA for small text; use a darker text.
  • Ensure #20B2AA provides enough contrast against any background color it's placed on.
  • Gold #FFD700 is generally not suitable for body text due to low contrast.

Recommended combinations

Lively Contrast

Ideal for creating high-impact visual elements or vibrant hero sections.

#FF6347 · #20B2AA · #FFD700

Warm Gradient

Excellent for backgrounds, banners, or decorative patterns that convey energy.

#FF8C00 · #FF6347 · #FFD700

Aquatic Harmony

Perfect for subtle branding, UI elements, or illustrations with a serene, watery feel.

#40E0D0 · #20B2AA · #FF8C00

CSS variables

:root {
  --coral-reef-sanctuary-2-1: #FF6347;
  --coral-reef-sanctuary-2-2: #FF8C00;
  --coral-reef-sanctuary-2-3: #FFD700;
  --coral-reef-sanctuary-2-4: #40E0D0;
  --coral-reef-sanctuary-2-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-sanctuary-2": {
        1: "#FF6347",
        2: "#FF8C00",
        3: "#FFD700",
        4: "#40E0D0",
        5: "#20B2AA",
      }
    }
  }
}

Related searches

vibrant coral paletteorange teal color schememarine life colorsbright underwater palettetropical website colors

Palette colors

Hex values

Color 1#FF6347
·
Color 2#FF8C00
·
Color 3#FFD700
·
Color 4#40E0D0
·
Color 5#20B2AA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.1:1Fail
1.8:1Fail
1.1:1Fail
2
1.3:1Fail
1.7:1Fail
1.4:1Fail
1.1:1Fail
3
2.1:1Fail
1.7:1Fail
1.2:1Fail
1.9:1Fail
4
1.8:1Fail
1.4:1Fail
1.2:1Fail
1.6:1Fail
5
1.1:1Fail
1.1:1Fail
1.9:1Fail
1.6:1Fail

Similar palettes

More like Coral Reef Sanctuary

View all vibrant
Coral Lagoon Whisper
Golden Field
Tropical Forest Glade
Wild Orchid Trail
Aegean Azure Sun
Arid Cactus Blossom