Palette

Ginger Blossom Spice

A warm, fragrant blend of ginger-orange and soft petal pink, sweet and comforting.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ginger Blossom Spice 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 Ginger Blossom Spice.

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

Data visualization

#E67A33#FF9966#FFCC99#B35C2B#80411F

Palette guide

How to use Ginger Blossom Spice

Overview

The 'Ginger Blossom Spice' palette is a warm, fragrant blend of ginger-orange and soft petal pink, designed to be sweet and comforting. This inviting collection features vibrant oranges like #E67A33 and #FF9966, complemented by the delicate #FFCC99 and grounded by deep #80411F. It's a versatile palette for designers aiming to evoke feelings of warmth, natural beauty, and a touch of zest. Ideal for projects that require an approachable yet sophisticated feel, it brings a harmonious balance of energetic spice and gentle floral notes, perfect for captivating audiences with its comforting glow.

Best used for

Spice and gourmet food packaging
Natural beauty product branding
Cozy cafe and bakery websites
Autumnal and seasonal event invitations
Food photography and recipe blogs
Children's book illustrations

Suggested color roles

primary

Use #E67A33 for vibrant calls to action or key interactive elements, drawing immediate attention.

secondary

Apply #FF9966 for supportive sections, subheadings, or illustrations, offering a softer, approachable warmth.

accent

Introduce #80411F for deep, grounding contrast in important text, icons, or subtle borders.

background

Utilize #FFCC99 as a light, airy base, reminiscent of soft petals or a gentle, spiced cream.

text

Choose #80411F for body text or a rich dark brown to ensure excellent readability on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for text, using #80411F on #FFCC99 for optimal readability.
Be cautious when pairing #FF9966 with #FFCC99 for small text, as contrast might be insufficient.
Verify that interactive elements have clear visual states, especially within the orange range.
Consider providing alternative text styles for users with color vision deficiencies, such as bolding.

Recommended combinations

Vibrant Spice

Excellent for energetic headings, buttons, or visual elements that need to pop.

#E67A33 · #FF9966 · #B35C2B

Soft & Deep

Ideal for creating a harmonious background with deep, readable text or accents.

#FFCC99 · #B35C2B · #80411F

Blossom Warmth

Suitable for layered illustrations or gradients that convey a gentle, inviting glow.

#FF9966 · #FFCC99 · #E67A33

CSS variables

:root {
  --ginger-blossom-spice-1: #E67A33;
  --ginger-blossom-spice-2: #FF9966;
  --ginger-blossom-spice-3: #FFCC99;
  --ginger-blossom-spice-4: #B35C2B;
  --ginger-blossom-spice-5: #80411F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ginger-blossom-spice": {
        1: "#E67A33",
        2: "#FF9966",
        3: "#FFCC99",
        4: "#B35C2B",
        5: "#80411F",
      }
    }
  }
}

Hex values

Color 1#E67A33

Color 2#FF9966

Color 3#FFCC99

Color 4#B35C2B

Color 5#80411F

Accessibility

Contrast checker

1.4:1Fail

2:1Fail

1.6:1Fail

2.7:1Fail

1.4:1Fail

2.2:1Fail

3.7:1AA18

2:1Fail

1.4:1Fail

3.2:1AA18

5.3:1AA

1.6:1Fail

2.2:1Fail

3.2:1AA18

1.7:1Fail

2.7:1Fail

3.7:1AA18

5.3:1AA

1.7:1Fail

Similar palettes

More like Ginger Blossom Spice

Ginger Blossom Spice

See it in context.

Ready when you are.

Built with Ginger Blossom Spice.

How to use Ginger Blossom Spice

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Vibrant Spice

Soft & Deep

Blossom Warmth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ginger Blossom Spice