Palette

Fiery Sunset Lagoon

A dramatic gradient of fiery oranges and soft pinks, mirroring the vibrant spectacle of a sunset over a calm lagoon.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fiery Sunset Lagoon 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 Fiery Sunset Lagoon.

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

Data visualization

#E64C3C#F36C52#FD9078#FEC1A5#FEF2E0

Palette guide

How to use Fiery Sunset Lagoon

Overview

The Fiery Sunset Lagoon palette offers a beautiful gradient from vivid red-orange to soft, creamy yellow, capturing the serene yet energetic spectacle of a sunset over water. With hues like #E64C3C, #FD9078, and the delicate #FEF2E0, this palette is ideal for designers seeking warmth, elegance, and a touch of natural beauty. Its harmonious progression allows for sophisticated visual storytelling, perfect for digital and print media. Developers can leverage these hex codes to create inviting user interfaces, calming yet vibrant brand experiences, or stunning background visuals that evoke tranquility and warmth, appealing to a broad audience.

Best used for

spa and wellness branding
coastal resort websites
wedding invitations
beauty product packaging
interior design mood boards
travel agency promotions

Suggested color roles

primary

#E64C3C - A vibrant red-orange, excellent for main headings, calls to action, or key graphical elements that need to stand out with warmth.

secondary

#F36C52 - A softer orange-red, suitable for subheadings, navigation, or as a strong accent color, providing a gentle flow.

accent

#FD9078 - Use this coral-like shade for subtle highlights, interactive states, or small, impactful details that require a soft, inviting touch.

background

#FEF2E0 - A delicate, near-white cream that serves as a serene and elegant base, allowing the warmer hues to pop beautifully.

text

For text on lighter backgrounds like #FEF2E0, use a dark charcoal or black. On darker shades like #E64C3C, white or a very light cream is recommended for readability.

Accessibility notes

Ensure sufficient contrast between text and background colors, especially for #FD9078 and #FEC1A5 when used for text.
The lighter colors, particularly #FEF2E0, will require very dark text (e.g., black) to meet WCAG AA contrast standards.
Avoid using adjacent light colors (e.g., #FEC1A5 on #FEF2E0) for critical text to prevent readability issues.
Always test contrast ratios for WCAG AA compliance, especially for body text and interactive elements.

Recommended combinations

Lagoon Serenity

Creates a calming yet vibrant visual, perfect for backgrounds or illustrations where a transition from light to deep warmth is desired.

#FEF2E0 · #FEC1A5 · #E64C3C

Sunset Glow

Ideal for creating smooth, fiery gradients in headers or banners, mimicking the sun's descent with rich, warm tones.

#E64C3C · #F36C52 · #FD9078

Elegant Contrast

Utilize the light cream as a background with the vibrant reds for prominent text or calls to action, creating an elegant, readable design.

#FEF2E0 · #E64C3C · #F36C52

CSS variables

:root {
  --fiery-sunset-lagoon-1: #E64C3C;
  --fiery-sunset-lagoon-2: #F36C52;
  --fiery-sunset-lagoon-3: #FD9078;
  --fiery-sunset-lagoon-4: #FEC1A5;
  --fiery-sunset-lagoon-5: #FEF2E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-sunset-lagoon": {
        1: "#E64C3C",
        2: "#F36C52",
        3: "#FD9078",
        4: "#FEC1A5",
        5: "#FEF2E0",
      }
    }
  }
}

Hex values

Color 1#E64C3C

Color 2#F36C52

Color 3#FD9078

Color 4#FEC1A5

Color 5#FEF2E0

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.4:1Fail

3.5:1AA18

1.3:1Fail

1.9:1Fail

2.7:1Fail

1.7:1Fail

1.3:1Fail

1.4:1Fail

2:1Fail

2.4:1Fail

1.9:1Fail

1.4:1Fail

3.5:1AA18

2.7:1Fail

2:1Fail

1.4:1Fail

Similar palettes

More like Fiery Sunset Lagoon

Fiery Sunset Lagoon

See it in context.

Ready when you are.

Built with Fiery Sunset Lagoon.

How to use Fiery Sunset Lagoon

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Lagoon Serenity

Sunset Glow

Elegant Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Fiery Sunset Lagoon