Palette

Reef Glow Dream

Luminous and playful, evoking the dazzling, neon ecosystem of a vibrant coral reef, glowing under water.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Reef Glow Dream 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 Reef Glow Dream.

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

Data visualization

#FF4500#FF6347#FF7F50#FFB6C1#DA70D6

Palette guide

How to use Reef Glow Dream

Overview

The Reef Glow Dream palette is a luminous and playful collection, evoking the dazzling, neon ecosystem of a vibrant coral reef. With intense hues like #FF4500 (orange-red) and #DA70D6 (orchid purple), complemented by the warm #FF6347 (tomato red) and #FF7F50 (coral), it's designed to create energetic and captivating visuals. This palette is ideal for designers and developers aiming for a bold, modern, and youthful aesthetic. The inclusion of #FFB6C1 (light pink) provides a soft contrast, making it versatile for projects that need both high energy and a touch of whimsy. These hex codes ensure a consistent vibrant glow.

Best used for

Youth-oriented fashion and lifestyle brands
Creative and playful mobile app interfaces
Digital art and illustration with a neon aesthetic
Music festival branding and promotional materials
Tropical resort or summer camp websites
E-commerce sites for vibrant, unique products

Suggested color roles

primary

Use #FF4500 as a high-impact primary color for calls-to-action, hero sections, or main graphic elements.

secondary

Employ #FF6347 for secondary content blocks, navigation, or interactive components, maintaining warmth and energy.

accent

Apply #DA70D6 for a striking accent that provides a cool, unexpected contrast and a 'glowing' effect.

background

The lightest shade, #FFB6C1, can provide a soft, playful background, or a very light gray for better text contrast.

text

For text on darker shades, use white or a very light gray. For text on #FFB6C1, a dark charcoal or black is recommended for readability.

Accessibility notes

Ensure sufficient contrast between vibrant colors like #FF4500 and text, especially for smaller font sizes.
Pair the most intense colors (#FF4500, #DA70D6) with pure white text for optimal WCAG AA compliance.
Avoid using #FFB6C1 for primary text on other light shades, as contrast will be poor.
Consider larger font sizes or bolding when using #FF7F50 for text against other mid-tone colors.

Recommended combinations

Neon Burst

Creates a high-energy, modern look for headers or impactful banners, with a vivid contrast.

#FF4500 · #DA70D6 · #FFB6C1

Coral Glow

Ideal for subtle gradients or layered elements that convey warmth and luminosity.

#FF6347 · #FF7F50 · #FF4500

Dreamy Pop

Useful for playful UI cards or informational panels, using a soft base with two vibrant accents.

#FFB6C1 · #DA70D6 · #FF6347

CSS variables

:root {
  --reef-glow-dream-1: #FF4500;
  --reef-glow-dream-2: #FF6347;
  --reef-glow-dream-3: #FF7F50;
  --reef-glow-dream-4: #FFB6C1;
  --reef-glow-dream-5: #DA70D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "reef-glow-dream": {
        1: "#FF4500",
        2: "#FF6347",
        3: "#FF7F50",
        4: "#FFB6C1",
        5: "#DA70D6",
      }
    }
  }
}

Hex values

Color 1#FF4500

Color 2#FF6347

Color 3#FF7F50

Color 4#FFB6C1

Color 5#DA70D6

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

2.1:1Fail

1.2:1Fail

1.8:1Fail

1:1Fail

1.4:1Fail

1.2:1Fail

1.5:1Fail

1.2:1Fail

2.1:1Fail

1.8:1Fail

1.5:1Fail

1.7:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

1.7:1Fail

Similar palettes

More like Reef Glow Dream

Reef Glow Dream

See it in context.

Ready when you are.

Built with Reef Glow Dream.

How to use Reef Glow Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Neon Burst

Coral Glow

Dreamy Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Reef Glow Dream