Back to palettes

Palette

Bluebell Valley

Soft, harmonious blues that capture the delicate beauty of a valley floor covered in bluebell flowers.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bluebell Valley 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 Bluebell Valley.

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

Data visualization

#6669B0#8185C9#9CA4E2#C2CAFC#E3E6FF

Palette guide

How to use Bluebell Valley

Overview

The Bluebell Valley palette features soft, harmonious blues that capture the delicate beauty of a valley floor covered in bluebell flowers. Ranging from deeper #6669B0 to light #E3E6FF, with intermediate shades like #8185C9, #9CA4E2, and #C2CAFC, this palette creates a calm, fresh, and gentle aesthetic. It's an excellent choice for designers aiming to evoke a sense of tranquility, natural beauty, and serene beginnings. The harmonious progression of blue tones makes it ideal for projects that require a soothing, floral, and effortlessly beautiful visual language, reminiscent of a peaceful spring meadow.

Best used for

  • Spring event invitations and decor
  • Gentle nature blogs and websites
  • Baby and nursery designs
  • Serene wellness themes and products
  • Delicate floral branding and stationery
  • Calm digital interfaces and app designs

Suggested color roles

primary

Use #6669B0 as the deepest, grounding blue for main structural elements, symbolizing stability and nature.

secondary

Employ #8185C9 for prominent headings or key visual components, representing the delicate bluebell flowers.

accent

Apply #E3E6FF for light, airy highlights, interactive elements, or decorative touches, adding an ethereal touch.

background

Choose #E3E6FF or #C2CAFC for a light, ethereal canvas, creating an expansive and inviting user experience.

text

Dark blue or charcoal provides excellent readability on light backgrounds. White text works well on #6669B0.

Accessibility notes

  • Crucially, ensure text has sufficient contrast against these light, pastel backgrounds; darker blues or charcoals are essential.
  • Check readability of #9CA4E2 on #C2CAFC if used together; ensure sufficient color difference for clarity.
  • Avoid using light text on light backgrounds; always test contrast ratios for all text sizes.
  • Clearly define interactive elements with distinct color changes or outlines, as subtle differences may be hard to discern.

Recommended combinations

Bluebell Gradient

Creates a soft sky-to-deeper-bloom gradient, ideal for gentle backgrounds or calming UI elements.

#E3E6FF · #C2CAFC · #9CA4E2

Valley Depths

Offers floral layering, perfect for simulating plant textures or providing visual structure.

#6669B0 · #8185C9 · #9CA4E2

Spring Harmony

Provides a calm contrast for content, combining light and deeper blues for an elegant feel.

#E3E6FF · #6669B0 · #8185C9

CSS variables

:root {
  --bluebell-valley-1: #6669B0;
  --bluebell-valley-2: #8185C9;
  --bluebell-valley-3: #9CA4E2;
  --bluebell-valley-4: #C2CAFC;
  --bluebell-valley-5: #E3E6FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bluebell-valley": {
        1: "#6669B0",
        2: "#8185C9",
        3: "#9CA4E2",
        4: "#C2CAFC",
        5: "#E3E6FF",
      }
    }
  }
}

Related searches

soft blue palettebluebell flower colorsspring floral themegentle pastel designserene blue tones

Palette colors

Hex values

Color 1#6669B0
·
Color 2#8185C9
·
Color 3#9CA4E2
·
Color 4#C2CAFC
·
Color 5#E3E6FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.1:1Fail
3.1:1AA18
4:1AA18
2
1.5:1Fail
1.4:1Fail
2.1:1Fail
2.8:1Fail
3
2.1:1Fail
1.4:1Fail
1.5:1Fail
1.9:1Fail
4
3.1:1AA18
2.1:1Fail
1.5:1Fail
1.3:1Fail
5
4:1AA18
2.8:1Fail
1.9:1Fail
1.3:1Fail

Similar palettes

More like Bluebell Valley

View all cool