Back to palettes

Palette

Spring Sky Bloom

Delicate and airy colors mirroring a gentle spring sky adorned with soft blooming clouds.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spring Sky Bloom 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 Spring Sky Bloom.

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

Data visualization

#D6EDF9#A6D3EE#EAD9EE#FCECD4#BFDAEF

Palette guide

How to use Spring Sky Bloom

Overview

The Spring Sky Bloom palette offers a delicate and airy collection of pastel shades, perfect for creating a sense of calm and gentle sophistication. Featuring soft blues like #D6EDF9 and #A6D3EE, a subtle lavender-pink #EAD9EE, a creamy yellow #FCECD4, and a deeper sky blue #BFDAEF, this palette evokes the tranquil beauty of a spring day. Designers and developers can leverage these hues to build inviting user interfaces, serene branding, or charming illustrative content where a light, fresh aesthetic is desired. Its gentle nature makes it versatile for applications requiring a soft touch.

Best used for

  • Baby and children's product branding
  • Wellness, spa, or mindfulness websites
  • Spring-themed event invitations and decor
  • Feminine fashion or beauty brand identities
  • Light mode UI themes for mobile apps
  • Soft, illustrative digital art or greeting cards

Suggested color roles

primary

Use #A6D3EE for main headings, primary navigation elements, and key interactive components to establish a clear yet soft presence.

secondary

Employ #EAD9EE for secondary calls to action, subheadings, or complementary content blocks to add warmth and a subtle floral touch.

accent

Apply #FCECD4 sparingly for subtle highlights, small decorative elements, or to draw attention to specific icons, bringing a touch of gentle sunlight.

background

Utilize #D6EDF9 as the primary background color for pages and large content areas to ensure an airy, light foundation.

text

For optimal readability, use a dark charcoal or near-black text color (e.g., #333333) against these light pastels, or #BFDAEF for less critical text elements on very light backgrounds.

Accessibility notes

  • Most colors within this palette have low contrast with each other; rely on dark text (e.g., black or #333333) for legibility against all palette colors.
  • Ensure interactive elements like buttons and links have sufficient visual contrast and clear focus states, as the palette's softness can obscure boundaries.
  • Avoid using light-colored text on light backgrounds from this palette; always test contrast ratios, especially for critical information.
  • Consider using #BFDAEF for text on #D6EDF9 backgrounds for better readability than lighter options, but verify WCAG AA compliance for body text.

Recommended combinations

Sky & Cloud

Ideal for foundational UI elements, where #D6EDF9 serves as background, #A6D3EE for main components, and #BFDAEF for subtle accents or text.

#D6EDF9 · #A6D3EE · #BFDAEF

Bloom & Sun

Perfect for soft branding, decorative sections, or gentle gradients that evoke a subtle, warm spring feeling.

#EAD9EE · #FCECD4 · #D6EDF9

Serene Trio

A balanced combination for illustrative backgrounds, subtle infographics, or creating a harmonious visual theme across diverse elements.

#A6D3EE · #EAD9EE · #FCECD4

CSS variables

:root {
  --spring-sky-bloom-1: #D6EDF9;
  --spring-sky-bloom-2: #A6D3EE;
  --spring-sky-bloom-3: #EAD9EE;
  --spring-sky-bloom-4: #FCECD4;
  --spring-sky-bloom-5: #BFDAEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spring-sky-bloom": {
        1: "#D6EDF9",
        2: "#A6D3EE",
        3: "#EAD9EE",
        4: "#FCECD4",
        5: "#BFDAEF",
      }
    }
  }
}

Related searches

pastel color schemessoft spring paletteairy design colorscalm UI color guidelight blue pink yellow palette

Palette colors

Hex values

Color 1#D6EDF9
·
Color 2#A6D3EE
·
Color 3#EAD9EE
·
Color 4#FCECD4
·
Color 5#BFDAEF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.1:1Fail
1:1Fail
1.2:1Fail
2
1.3:1Fail
1.2:1Fail
1.4:1Fail
1.1:1Fail
3
1.1:1Fail
1.2:1Fail
1.2:1Fail
1.1:1Fail
4
1:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
1.2:1Fail
1.1:1Fail
1.1:1Fail
1.2:1Fail

Similar palettes

More like Spring Sky Bloom

View all pastel
Pastel Cloud Dream
Sky Whispers Gentle
Azure Dream Canvas
Cloud Blossom Breeze
Cloud Mist Whisper
Cloud Puff Dream