Palette

Spring Bloom Fields

Soft, muted tans and beiges that evoke vast fields ready for spring blooms under a gentle sun.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7EDD9#E2D6BB#CCBF9E#B7A783#A18F67

Palette guide

How to use Spring Bloom Fields

Overview

The Spring Bloom Fields palette evokes the soft, muted tans and beiges of vast fields ready for spring blooms under a gentle sun, offering a serene and natural collection of earthy hues. Featuring a creamy beige #F7EDD9, a soft greige #E2D6BB, a warm tan #CCBF9E, a deeper taupe #B7A783, and a rich earthy brown #A18F67, this palette is grounding and understated. Designers can leverage its lighter tones for airy backgrounds and its deeper shades for subtle contrast and sophistication, creating designs that convey authenticity, tranquility, and a connection to nature, ideal for rustic or minimalist projects.

Best used for

Farm-to-table restaurant branding
Organic food packaging and labels
Rustic wedding invitations and decor
Sustainable fashion or artisan crafts websites
Interior design for natural, minimalist spaces
Photography portfolios (especially landscape/portrait)

Suggested color roles

primary

Utilize #CCBF9E (Warm Tan) for main brand elements, key headlines, or prominent UI components to convey natural warmth and authenticity.

secondary

Employ #E2D6BB (Soft Greige) for supporting calls-to-action, interactive elements, or secondary graphics, offering a lighter, harmonious contrast.

accent

Reserve #A18F67 (Rich Earthy Brown) for subtle highlights, icons, or decorative touches to add depth and a touch of grounded elegance.

background

Use #F7EDD9 (Creamy Beige) as a primary background color to create an airy, clean, and inviting canvas for content, promoting readability.

text

For optimal readability, a dark charcoal or black works best against lighter shades like #F7EDD9 or #E2D6BB. On darker backgrounds such as #A18F67, use white or #F7EDD9 text for clarity.

Accessibility notes

Ensure sufficient contrast when pairing #CCBF9E or #E2D6BB with text; dark charcoal or black is usually best on lighter tones.
Avoid using #F7EDD9 text on #E2D6BB backgrounds for smaller font sizes due to low contrast.
The darkest color, #A18F67, provides excellent contrast for white or #F7EDD9 text, making it suitable for headlines.
Always test color combinations with accessibility checkers to meet WCAG AA compliance, especially for critical information.

Recommended combinations

Field Serenity

Creates a soft, harmonious gradient, perfect for clean website layouts, gentle brand identities, or elegant print materials.

#F7EDD9 · #E2D6BB · #CCBF9E

Earthy Depth

Ideal for grounding elements with a natural progression, suitable for website footers, robust call-to-action buttons, or rustic graphic elements.

#A18F67 · #B7A783 · #CCBF9E

Wheat Bloom

Offers a balanced, natural feel, perfect for blog backgrounds, serene testimonial sections, or elegant packaging for artisanal goods.

#E2D6BB · #F7EDD9 · #B7A783

CSS variables

:root {
  --spring-bloom-fields-1: #F7EDD9;
  --spring-bloom-fields-2: #E2D6BB;
  --spring-bloom-fields-3: #CCBF9E;
  --spring-bloom-fields-4: #B7A783;
  --spring-bloom-fields-5: #A18F67;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spring-bloom-fields": {
        1: "#F7EDD9",
        2: "#E2D6BB",
        3: "#CCBF9E",
        4: "#B7A783",
        5: "#A18F67",
      }
    }
  }
}

Hex values

Color 1#F7EDD9

Color 2#E2D6BB

Color 3#CCBF9E

Color 4#B7A783

Color 5#A18F67

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

2:1Fail

2.7:1Fail

1.2:1Fail

1.3:1Fail

1.6:1Fail

2.2:1Fail

1.6:1Fail

1.3:1Fail

1.7:1Fail

2:1Fail

1.6:1Fail

1.3:1Fail

2.7:1Fail

2.2:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Spring Bloom Fields

Spring Bloom Fields

See it in context.

Ready when you are.

Built with Spring Bloom Fields.

How to use Spring Bloom Fields

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Field Serenity

Earthy Depth

Wheat Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Spring Bloom Fields