Back to palettes

Palette

Blueberry Field Haze

Soft blues and greys blend like ripe blueberries under a cool, misty summer sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Blueberry Field Haze 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 Blueberry Field Haze.

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

Data visualization

#3D4A6E#606D8A#8D9ABF#BCCBE0#E4ECF4

Palette guide

How to use Blueberry Field Haze

Overview

The Blueberry Field Haze palette offers a serene and sophisticated collection of cool blues and muted greys, perfect for creating tranquil digital or physical spaces. Anchored by the deep, contemplative #3D4A6E, it gracefully transitions through the balanced mid-tone #606D8A and the airy #8D9ABF. Lighter shades like #BCCBE0 and the near-white #E4ECF4 complete this gradient, providing versatility for various design elements. This palette is ideal for projects requiring a sense of calm, professionalism, or understated elegance. Developers will find these hex codes easy to implement for UI elements, backgrounds, or branding that aims for a soft, inviting aesthetic without being overly vibrant.

Best used for

  • Wellness and meditation apps
  • Corporate and professional websites
  • Spa and beauty branding
  • Editorial and magazine layouts
  • Home decor and interior design concepts
  • Gentle product packaging

Suggested color roles

primary

Use #3D4A6E as a foundational color for headers, main navigation, or strong brand elements, providing depth and stability.

secondary

Employ #606D8A for secondary sections, subheadings, or as a supporting background color to maintain a cohesive, calm feel.

accent

Apply #8D9ABF sparingly for subtle highlights, interactive elements like buttons, or small graphic details to add gentle visual interest.

background

Utilize #E4ECF4 for primary backgrounds to ensure a clean, airy canvas, allowing other colors to gently emerge without stark contrast.

text

For dark text on light backgrounds, use #3D4A6E for headings and a dark charcoal or near-black for body text. On darker backgrounds, #E4ECF4 offers excellent readability.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when pairing lighter shades like #BCCBE0 with #E4ECF4 for body copy.
  • When using #3D4A6E for text, ensure its background offers at least a AA contrast ratio (e.g., #E4ECF4).
  • For interactive elements, aim for a contrast ratio of 3:1 against adjacent colors to meet WCAG 2.1 guidelines.
  • Consider using clear visual cues beyond color alone for critical information, especially with similar cool tones for users with color vision deficiencies.

Recommended combinations

Deep Calm

Ideal for professional website footers, dark mode UI elements, or elegant branding where depth is desired.

#3D4A6E · #E4ECF4 · #606D8A

Misty Gradient

Perfect for subtle background gradients, soft illustrations, or light UI components that require a gentle transition.

#BCCBE0 · #8D9ABF · #E4ECF4

Subtle Harmony

Excellent for body text on a light background with a strong heading, or for balanced visual hierarchy in dashboards.

#606D8A · #E4ECF4 · #3D4A6E

CSS variables

:root {
  --blueberry-field-haze-1: #3D4A6E;
  --blueberry-field-haze-2: #606D8A;
  --blueberry-field-haze-3: #8D9ABF;
  --blueberry-field-haze-4: #BCCBE0;
  --blueberry-field-haze-5: #E4ECF4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "blueberry-field-haze": {
        1: "#3D4A6E",
        2: "#606D8A",
        3: "#8D9ABF",
        4: "#BCCBE0",
        5: "#E4ECF4",
      }
    }
  }
}

Related searches

calm blue grey palettecool tone color schemeserene ui colorsblueberry field aestheticsoft muted blues

Palette colors

Hex values

Color 1#3D4A6E
·
Color 2#606D8A
·
Color 3#8D9ABF
·
Color 4#BCCBE0
·
Color 5#E4ECF4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.1:1AA18
5.3:1AA
7.3:1AAA
2
1.7:1Fail
1.9:1Fail
3.1:1AA18
4.3:1AA18
3
3.1:1AA18
1.9:1Fail
1.7:1Fail
2.3:1Fail
4
5.3:1AA
3.1:1AA18
1.7:1Fail
1.4:1Fail
5
7.3:1AAA
4.3:1AA18
2.3:1Fail
1.4:1Fail

Similar palettes

More like Blueberry Field Haze

View all cool
Aegean Coastline Calm
Aegean Horizon
Aegean Isle Horizon
Aegean Sea Serene
Agate Grotto
Alpine Frost Serenity