Palette

Spiced Ginger Warmth

Cozy and invigorating, like the fragrant aroma of ginger and cinnamon on a crisp autumn day.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Ginger Warmth 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 Spiced Ginger Warmth.

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

Data visualization

#C65500#E07B00#FFAB40#8C3E00#7A2F00

Palette guide

How to use Spiced Ginger Warmth

Overview

The Spiced Ginger Warmth palette offers an energetic and cozy blend, perfect for evoking the crisp aromas of autumn. Dominated by vibrant oranges and deep, grounding browns, this scheme includes a fiery orange at #C65500, a brighter counterpart at #E07B00, and a lively highlight in #FFAB40. The darker tones like #8C3E00 and #7A2F00 provide essential depth and stability. Designers and developers can leverage this palette to create engaging, inviting interfaces and products that convey comfort and warmth, ideal for seasonal branding or lively digital experiences. Its rich, earthy essence is both comforting and invigorating.

Best used for

Autumn-themed branding and marketing
Food and beverage packaging, especially for spices or baked goods
Cozy interior design mood boards
Event invitations for fall gatherings
Digital illustrations with a warm, energetic feel
Fashion and apparel collections

Suggested color roles

primary

Use #C65500 as a bold, inviting primary color for calls to action or key visual elements, drawing immediate attention.

secondary

Employ #E07B00 to support the primary, offering a slightly brighter, yet equally warm, tone for secondary headings or prominent features.

accent

Introduce #FFAB40 as a lively accent for interactive elements, small details, or highlights that require a vibrant pop.

background

Utilize #8C3E00 for deep, grounding sections or as a rich background for content that needs a strong, stable presence.

text

For dark backgrounds, use #FFAB40 for headings and a near-white for body text. On lighter backgrounds, #7A2F00 provides excellent readability for primary text.

Accessibility notes

Ensure sufficient contrast between #FFAB40 and any background color, especially lighter shades.
Use #7A2F00 or a dark neutral for body text on light backgrounds for optimal readability.
Avoid placing #E07B00 directly on #C65500 for critical text due to potential low contrast.
Test color combinations with accessibility checkers to meet WCAG guidelines for text and interactive elements.

Recommended combinations

Vibrant Duo

Ideal for eye-catching headers or interactive buttons, offering a high-energy contrast.

#C65500 · #FFAB40 · #E07B00

Deep Earth

Provides a solid, grounding base, perfect for footers, sidebars, or deep background elements.

#8C3E00 · #7A2F00 · #E07B00

Autumn Glow

Excellent for gradients or layered elements that require a warm, harmonious transition.

#E07B00 · #FFAB40 · #C65500

CSS variables

:root {
  --spiced-ginger-warmth-3-1: #C65500;
  --spiced-ginger-warmth-3-2: #E07B00;
  --spiced-ginger-warmth-3-3: #FFAB40;
  --spiced-ginger-warmth-3-4: #8C3E00;
  --spiced-ginger-warmth-3-5: #7A2F00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-ginger-warmth-3": {
        1: "#C65500",
        2: "#E07B00",
        3: "#FFAB40",
        4: "#8C3E00",
        5: "#7A2F00",
      }
    }
  }
}

Hex values

Color 1#C65500

Color 2#E07B00

Color 3#FFAB40

Color 4#8C3E00

Color 5#7A2F00

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

1.7:1Fail

2.1:1Fail

1.5:1Fail

1.6:1Fail

2.5:1Fail

3.1:1AA18

2.4:1Fail

1.6:1Fail

4:1AA18

5:1AA

1.7:1Fail

2.5:1Fail

4:1AA18

1.3:1Fail

2.1:1Fail

3.1:1AA18

5:1AA

1.3:1Fail

Similar palettes

More like Spiced Ginger Warmth

View all warm

Amber Harvest Glow

Harvest Festival Delight

Amber Harvest Nectar

Amber Spice Market

Autumn Foliage Ember

Autumn Harvest Lantern