Palette

Orchard Nectar Bloom

A sweet, warm embrace of sun-kissed oranges and soft creams, like golden nectar dripping from orchard blossoms.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Orchard Nectar 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 Orchard Nectar Bloom.

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

Data visualization

#FFF7E7#FFDD9B#FFBE67#E89343#C26E2C

Palette guide

How to use Orchard Nectar Bloom

Overview

The Orchard Nectar Bloom palette offers a sweet, warm embrace of sun-kissed oranges and soft creams, like golden nectar dripping from orchard blossoms. Ranging from the nearly white #FFF7E7 to the deep, grounding #C26E2C (deep orange-brown), this palette includes inviting hues like #FFBE67 (light orange) and #E89343 (medium orange). Designers and developers will find this natural collection perfect for creating gentle, inviting, and wholesome digital or print experiences. It's an excellent choice for projects that aim to convey warmth, natural goodness, and a touch of golden elegance, ensuring a soft yet impactful visual presence.

Best used for

Natural beauty and cosmetic branding
Organic food and beverage packaging
Wedding invitations and floral designs
Wellness and spa-related websites
Children's book illustrations
Gentle, inviting e-commerce platforms

Suggested color roles

primary

Utilize #FFBE67 (light orange) as a soft, inviting primary color for headings, main graphics, or key interactive elements.

secondary

Apply #E89343 (medium orange) for supporting content, subheadings, or to add a richer, more vibrant warmth.

accent

Reserve #C26E2C (deep orange-brown) for strong contrasts, important calls to action, or deep, grounding accents.

background

Use #FFF7E7 (near-white cream) as a soft, clean, and highly readable background, providing a gentle canvas.

text

For optimal legibility, use #C26E2C (deep orange-brown) for body text and headings on lighter backgrounds.

Accessibility notes

Ensure high contrast between #C26E2C (deep orange-brown) text and #FFF7E7 (near-white cream) backgrounds.
Be cautious when using mid-tones like #FFDD9B or #FFBE67 for small text; pair them with a much darker color.
Always test text color against its background to meet WCAG contrast guidelines.
Avoid using #FFBE67 on #FFDD9B for critical information as contrast might be insufficient.

Recommended combinations

Nectar Contrast

Excellent for clear text on a light background, complemented by a rich, warm accent for emphasis.

#FFF7E7 · #C26E2C · #E89343

Golden Gradient

Ideal for creating smooth, inviting visual transitions in hero sections, banners, or decorative backgrounds.

#FFDD9B · #FFBE67 · #E89343

Bloom Layers

Use for layered card designs, subtle background patterns, or to define distinct sections with gentle warmth.

#FFF7E7 · #FFBE67 · #C26E2C

CSS variables

:root {
  --orchard-nectar-bloom-1: #FFF7E7;
  --orchard-nectar-bloom-2: #FFDD9B;
  --orchard-nectar-bloom-3: #FFBE67;
  --orchard-nectar-bloom-4: #E89343;
  --orchard-nectar-bloom-5: #C26E2C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "orchard-nectar-bloom": {
        1: "#FFF7E7",
        2: "#FFDD9B",
        3: "#FFBE67",
        4: "#E89343",
        5: "#C26E2C",
      }
    }
  }
}

Hex values

Color 1#FFF7E7

Color 2#FFDD9B

Color 3#FFBE67

Color 4#E89343

Color 5#C26E2C

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

2.3:1Fail

3.5:1AA18

1.2:1Fail

1.3:1Fail

1.8:1Fail

2.9:1Fail

1.5:1Fail

1.3:1Fail

1.5:1Fail

2.3:1Fail

1.8:1Fail

1.5:1Fail

1.6:1Fail

3.5:1AA18

2.9:1Fail

2.3:1Fail

1.6:1Fail

Similar palettes

More like Orchard Nectar Bloom

Orchard Nectar Bloom

See it in context.

Ready when you are.

Built with Orchard Nectar Bloom.

How to use Orchard Nectar Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Nectar Contrast

Golden Gradient

Bloom Layers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Orchard Nectar Bloom