Palette

Dawn Serenity

Delicately soft and airy, capturing the peaceful hues of the sky just as the sun begins to rise.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dawn Serenity 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 Dawn Serenity.

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

Data visualization

#FFCCBC#FFECB3#FFFDE7#CFD8DC#B0BEC5

Palette guide

How to use Dawn Serenity

Overview

The Dawn Serenity palette offers a delicately soft and airy collection, capturing the peaceful hues of the sky at sunrise. This pastel arrangement, featuring the gentle orange of #FFCCBC, the warm yellow of #FFECB3, and the near-white #FFFDE7, is perfect for designs that aim to evoke calmness and lightness. Designers and developers will find these colors, including the cool gray #CFD8DC and the slightly deeper #B0BEC5, ideal for creating welcoming user interfaces, comforting brand identities, or elegant digital art. Its harmonious blend of warm and cool pastels makes it highly versatile for projects requiring a soft, optimistic, and serene aesthetic.

Best used for

Baby product branding or websites
Wellness and self-care apps
Gentle e-commerce sites (e.g., handmade goods)
Photography and lifestyle blogs
Wedding invitations and event branding
Interior design concepts for light-filled spaces

Suggested color roles

primary

#CFD8DC - A soft, neutral gray-blue that can serve as a calming primary background or a foundational color for a clean, airy design.

secondary

#FFCCBC - This gentle peach tone is excellent for secondary calls to action, decorative elements, or as a warm contrast to the cooler grays.

accent

#FFECB3 - A light, sunny yellow that provides a subtle, optimistic accent, perfect for highlights, small icons, or to draw gentle attention.

background

#FFFDE7 - A very light, almost off-white cream color, ideal for pristine backgrounds that ensure maximum readability for darker text and a bright, open feel.

text

#B0BEC5 - A slightly darker, muted blue-gray suitable for secondary text or softer body copy. For primary text, use a dark charcoal or black for optimal contrast on #FFFDE7.

Accessibility notes

Many combinations within this pastel palette will have low contrast; always test text and interactive elements for WCAG AA compliance.
Avoid placing #FFECB3 text on #FFFDE7 backgrounds, as contrast will be insufficient.
Use #B0BEC5 or a darker custom color for body text on #FFFDE7 to ensure readability.
For call-to-action buttons, consider using #B0BEC5 with white text or a darker custom color for sufficient contrast.

Recommended combinations

Soft Morning

#FFFDE7 as background, #CFD8DC for main elements, #FFCCBC for gentle accents.

#FFFDE7 · #CFD8DC · #FFCCBC

Warm Glow

Use #FFCCBC as a base, #FFECB3 for highlights, and #B0BEC5 for grounding text.

#FFCCBC · #FFECB3 · #B0BEC5

Sky Hues

Great for creating subtle depth in backgrounds, with #B0BEC5 providing a soft contrast.

#CFD8DC · #B0BEC5 · #FFFDE7

CSS variables

:root {
  --dawn-serenity-1: #FFCCBC;
  --dawn-serenity-2: #FFECB3;
  --dawn-serenity-3: #FFFDE7;
  --dawn-serenity-4: #CFD8DC;
  --dawn-serenity-5: #B0BEC5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dawn-serenity": {
        1: "#FFCCBC",
        2: "#FFECB3",
        3: "#FFFDE7",
        4: "#CFD8DC",
        5: "#B0BEC5",
      }
    }
  }
}

Hex values

Color 1#FFCCBC

Color 2#FFECB3

Color 3#FFFDE7

Color 4#CFD8DC

Color 5#B0BEC5

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.6:1Fail

1.4:1Fail

1.1:1Fail

1.4:1Fail

1.9:1Fail

1:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

1.6:1Fail

1.9:1Fail

1.3:1Fail

Similar palettes

More like Dawn Serenity

Dawn Serenity

See it in context.

Ready when you are.

Built with Dawn Serenity.

How to use Dawn Serenity

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Morning

Warm Glow

Sky Hues

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Dawn Serenity