Palette

Coastal Sunset Blaze

Captures the fiery descent of the sun into a cool ocean horizon.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Sunset Blaze 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 Coastal Sunset Blaze.

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

Data visualization

#F95738#FF9B42#E6C229#283747#5C778F

Palette guide

How to use Coastal Sunset Blaze

Overview

The Coastal Sunset Blaze palette is a vibrant and dramatic collection, capturing the fiery descent of the sun into a cool ocean horizon. Bold oranges like #F95738 and #FF9B42, alongside the glowing #E6C229, create an energetic, warm core. These are powerfully contrasted by the deep, anchoring blues of #283747 and #5C778F, reminiscent of twilight waters. This palette is ideal for designers seeking to evoke passion, energy, and a touch of dramatic beauty. It's especially suited for projects that demand attention and convey a sense of adventure, excitement, and natural spectacle, perfect for lively, dynamic branding.

Best used for

Adventure travel and tourism branding
Youth-focused activewear and sports brands
Event and festival marketing materials
Vibrant digital art and illustration
Modern app interfaces with bold calls-to-action
Summer fashion and swimwear collections

Suggested color roles

primary

Utilize #F95738 as a dominant, energetic primary color for main sections or branding elements.

secondary

Employ #FF9B42 for secondary content blocks, navigation, or interactive elements, adding warmth and vibrancy.

accent

Introduce #E6C229 as a bright, glowing accent for highlights, icons, or key call-to-action buttons.

background

Choose #283747 for a deep, dramatic background, or #5C778F for a slightly lighter, cool base.

text

Use #283747 for body text and headings for excellent readability against lighter, warmer palette colors, or crisp white.

Accessibility notes

The dark #283747 provides excellent contrast for text on #F95738, #FF9B42, and #E6C229.
Ensure sufficient contrast when using #E6C229 for text on any background, as it is very bright.
Avoid using #F95738 for text on #FF9B42 backgrounds; opt for a darker or lighter contrasting color.
Consider using white text on #283747 or #5C778F for maximum readability and a striking effect.

Recommended combinations

Fiery Sunset

Create a bold, contrasting design with a vibrant primary, a deep background, and a warm secondary accent.

#F95738 · #283747 · #FF9B42

Twilight Glow

Ideal for dramatic interfaces with a cool blue background, a glowing accent, and strong dark text.

#5C778F · #E6C229 · #283747

Blazing Horizon

Use for energetic call-to-actions, with a bright orange primary, a fiery secondary, and a cool blue accent.

#FF9B42 · #F95738 · #5C778F

CSS variables

:root {
  --coastal-sunset-blaze-1: #F95738;
  --coastal-sunset-blaze-2: #FF9B42;
  --coastal-sunset-blaze-3: #E6C229;
  --coastal-sunset-blaze-4: #283747;
  --coastal-sunset-blaze-5: #5C778F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-sunset-blaze": {
        1: "#F95738",
        2: "#FF9B42",
        3: "#E6C229",
        4: "#283747",
        5: "#5C778F",
      }
    }
  }
}

Hex values

Color 1#F95738

Color 2#FF9B42

Color 3#E6C229

Color 4#283747

Color 5#5C778F

Accessibility

Contrast checker

1.6:1Fail

1.9:1Fail

3.7:1AA18

1.4:1Fail

1.6:1Fail

1.2:1Fail

5.8:1AA

2.2:1Fail

1.9:1Fail

1.2:1Fail

7:1AAA

2.7:1Fail

3.7:1AA18

5.8:1AA

7:1AAA

2.6:1Fail

1.4:1Fail

2.2:1Fail

2.7:1Fail

2.6:1Fail

Similar palettes

More like Coastal Sunset Blaze

View all vibrant

Coral Reef Sundown

Crimson Horizon

Crimson Horizon Blaze

Crimson Horizon Vista

Horizon Sunset Sail

Aqua Sunken Eden