Palette

Slow Cooked Spice

Rich, comforting tones like a simmering, savory stew, hearty and inviting after a long day.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Slow Cooked 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 Slow Cooked Spice.

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

Data visualization

#5D2E2B#8C4F4E#BD7B7A#E0B3B2#F2D8D7

Palette guide

How to use Slow Cooked Spice

Overview

The Slow Cooked Spice palette delivers a rich and inviting range of warm, comforting tones, perfect for projects aiming for a natural, cozy feel. It transitions beautifully from the deep, grounding #5D2E2B, reminiscent of a rich stew, through the earthy #8C4F4E and the rosy #BD7B7A. The palette lightens to the soft #E0B3B2 and culminates in the delicate, near-white #F2D8D7. This collection evokes the warmth of home and culinary delights, making it ideal for brands seeking to convey comfort, tradition, or artisanal quality. Designers can use these shades to create welcoming environments, while developers will find them suitable for interfaces that need a gentle, approachable aesthetic.

Best used for

Food and beverage branding
Home decor and lifestyle blogs
Cozy cafe or restaurant interiors
Artisan craft websites
Wellness and self-care products
Autumnal themed digital content

Suggested color roles

primary

#5D2E2B - A deep, grounding hue perfect for bold branding, headers, or backgrounds that need to convey richness and stability.

secondary

#8C4F4E - Excellent for subheadings, navigation, or larger content blocks, providing warmth without overwhelming.

accent

#BD7B7A - Use for interactive elements, calls-to-action, or decorative details to draw attention with a gentle, inviting touch.

background

#F2D8D7 - A very light, almost off-white background that provides a soft canvas for all other colors and ensures high readability.

text

#5D2E2B - A deep, rich text color that offers excellent contrast on lighter backgrounds like #F2D8D7, ensuring clear readability.

Accessibility notes

Ensure sufficient contrast for text, especially when using #BD7B7A on lighter backgrounds like #E0B3B2.
The darkest shade, #5D2E2B, offers good contrast for light text, such as white or #F2D8D7.
Avoid using #E0B3B2 for small text against #F2D8D7 as contrast will be insufficient.
Check button states and interactive elements to ensure they meet WCAG contrast guidelines.

Recommended combinations

Hearth & Home

Strong primary with a soft background and a warm accent, great for inviting web pages.

#5D2E2B · #F2D8D7 · #BD7B7A

Culinary Comfort

A layered combination for food blogs or recipe interfaces, creating depth and warmth.

#8C4F4E · #E0B3B2 · #5D2E2B

Soft Accent

Light background with dark text and a gentle, rosy accent for calls to action.

#F2D8D7 · #5D2E2B · #BD7B7A

CSS variables

:root {
  --slow-cooked-spice-1: #5D2E2B;
  --slow-cooked-spice-2: #8C4F4E;
  --slow-cooked-spice-3: #BD7B7A;
  --slow-cooked-spice-4: #E0B3B2;
  --slow-cooked-spice-5: #F2D8D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "slow-cooked-spice": {
        1: "#5D2E2B",
        2: "#8C4F4E",
        3: "#BD7B7A",
        4: "#E0B3B2",
        5: "#F2D8D7",
      }
    }
  }
}

Hex values

Color 1#5D2E2B

Color 2#8C4F4E

Color 3#BD7B7A

Color 4#E0B3B2

Color 5#F2D8D7

Accessibility

Contrast checker

1.8:1Fail

3.3:1AA18

6:1AA

8.2:1AAA

1.8:1Fail

1.9:1Fail

3.4:1AA18

4.7:1AA

3.3:1AA18

1.9:1Fail

1.8:1Fail

2.5:1Fail

6:1AA

3.4:1AA18

1.8:1Fail

1.4:1Fail

8.2:1AAA

4.7:1AA

2.5:1Fail

1.4:1Fail

Similar palettes

More like Slow Cooked Spice

Slow Cooked Spice

See it in context.

Ready when you are.

Built with Slow Cooked Spice.

How to use Slow Cooked Spice

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Hearth & Home

Culinary Comfort

Soft Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Slow Cooked Spice