Palette

Spiced Ginger Warmth

Rich, inviting browns and oranges evoking the comforting, aromatic warmth of spiced ginger on a chilly day.

warmcalm5 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

#6B3F0F#9B5F1F#CB7F2F#EBBF4F#FFDF7F

Palette guide

How to use Spiced Ginger Warmth

Overview

The Spiced Ginger Warmth palette offers a rich, inviting spectrum from deep browns to luminous golden yellows, perfect for conveying comfort and aromatic warmth. Starting with the deep #6B3F0F, it gracefully transitions through #9B5F1F and #CB7F2F, culminating in the radiant #EBBF4F and #FFDF7F. This progression makes it ideal for designs that aim to evoke a sense of tradition, coziness, and natural elegance. Designers and developers can utilize these hues to create sophisticated yet approachable interfaces, branding, and content that resonates with a calm, comforting mood.

Best used for

Rustic and artisanal branding
Bakery and coffee shop websites
Holiday and seasonal design projects
Natural product packaging
Storytelling and editorial layouts
Cozy app themes and user interfaces

Suggested color roles

primary

Use #CB7F2F as a welcoming primary color, balancing warmth with approachability for main content areas or headers.

secondary

Employ #9B5F1F for supporting elements, subheadings, or as a background accent to add depth without being too dominant.

accent

Introduce #FFDF7F as a bright, golden accent for highlights, interactive elements, or iconography to add a touch of luminosity.

background

Utilize #6B3F0F for deep, grounding backgrounds or sections where a strong, earthy presence is desired.

text

For dark backgrounds, #FFDF7F or a near-white offers excellent readability. On lighter backgrounds, #6B3F0F serves as a highly legible and grounding text color.

Accessibility notes

Ensure sufficient contrast when placing #FFDF7F text on #EBBF4F or #CB7F2F backgrounds.
Always use a dark color like #6B3F0F for body text on lighter shades like #EBBF4F or #FFDF7F.
Verify that interactive elements maintain adequate contrast against their backgrounds for usability.
Avoid using light text on mid-tones such as #CB7F2F without careful contrast checking.

Recommended combinations

Golden Spice

Perfect for creating a radiant glow or highlights that demand attention, evoking warmth and sweetness.

#EBBF4F · #FFDF7F · #6B3F0F

Earthy Depth

Forms a strong, grounding base, excellent for footers, navigation, or deep textual content.

#6B3F0F · #9B5F1F · #CB7F2F

Warm Gradient

Ideal for smooth transitions in backgrounds, banners, or decorative elements, adding visual interest.

#9B5F1F · #CB7F2F · #EBBF4F

CSS variables

:root {
  --spiced-ginger-warmth-4-1: #6B3F0F;
  --spiced-ginger-warmth-4-2: #9B5F1F;
  --spiced-ginger-warmth-4-3: #CB7F2F;
  --spiced-ginger-warmth-4-4: #EBBF4F;
  --spiced-ginger-warmth-4-5: #FFDF7F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-ginger-warmth-4": {
        1: "#6B3F0F",
        2: "#9B5F1F",
        3: "#CB7F2F",
        4: "#EBBF4F",
        5: "#FFDF7F",
      }
    }
  }
}

Hex values

Color 1#6B3F0F

Color 2#9B5F1F

Color 3#CB7F2F

Color 4#EBBF4F

Color 5#FFDF7F

Accessibility

Contrast checker

1.7:1Fail

2.8:1Fail

5.2:1AA

6.9:1AA

1.7:1Fail

1.6:1Fail

3:1Fail

4:1AA18

2.8:1Fail

1.6:1Fail

1.8:1Fail

2.4:1Fail