Palette

Spiced Chai Serenity

Warm and inviting, like a cup of spiced chai on a cool afternoon, fostering a sense of peace.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Chai Serenity 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 Chai Serenity.

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

Data visualization

#F8F3EC#C8B6A2#A66D4E#839E88#E69C5A

Palette guide

How to use Spiced Chai Serenity

Overview

The Spiced Chai Serenity palette evokes warmth and comfort, ideal for designs seeking a cozy, inviting atmosphere. Featuring a harmonious blend of earthy tones, it centers around a soft off-white background (#F8F3EC), a grounding chai latte beige (#C8B6A2), and rich, spiced accents. The deep terracotta of #A66D4E adds a touch of rustic elegance, while a calming muted sage #839E88 introduces a natural balance. A vibrant yet warm amber #E69C5A provides a gentle pop, perfect for drawing attention. This palette is excellent for creating user experiences that feel welcoming, natural, and serene across web and print mediums.

Best used for

Home decor websites and blogs
Coffee shop or bakery branding
Wellness and mindfulness apps
Sustainable fashion e-commerce
Autumn-themed digital campaigns
Cozy lifestyle product packaging

Suggested color roles

primary

Use #C8B6A2 as the dominant color for main content blocks, card backgrounds, or primary UI elements. Its earthy neutrality provides a stable and comforting base.

secondary

#A66D4E works well for headers, important subheadings, or as a strong accent on buttons, providing depth and warmth without overwhelming.

accent

#E69C5A is perfect for calls to action, interactive elements, or key visual highlights, offering a gentle, inviting glow that stands out.

background

#F8F3EC serves as an excellent light and airy background color, ensuring readability and a soft, clean canvas for other palette elements.

text

For body text, a dark brown like #A66D4E or a very dark charcoal ensures good contrast against #F8F3EC and #C8B6A2, maintaining the palette's warmth.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #A66D4E for text on #F8F3EC or #C8B6A2.
Verify that #E69C5A, when used for interactive elements, meets contrast requirements against its background for users with color vision deficiencies.
Avoid using #C8B6A2 for small text on #F8F3EC as their proximity in lightness might cause readability issues.
Consider using a darker shade of #839E88 or a complementary dark neutral for text placed on light backgrounds within this palette.

Recommended combinations

Earthy Core

Ideal for foundational layouts, offering a warm and stable base with a rich accent for headers or important information.

#F8F3EC · #C8B6A2 · #A66D4E

Natural Balance

Great for creating a harmonious and slightly more vibrant feel, suitable for feature sections or visual storytelling.

#C8B6A2 · #839E88 · #E69C5A

Spiced Highlight

Excellent for showcasing calls to action or key product highlights, where the warm amber needs to pop against a clean background.

#F8F3EC · #A66D4E · #E69C5A

CSS variables

:root {
  --spiced-chai-serenity-1: #F8F3EC;
  --spiced-chai-serenity-2: #C8B6A2;
  --spiced-chai-serenity-3: #A66D4E;
  --spiced-chai-serenity-4: #839E88;
  --spiced-chai-serenity-5: #E69C5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-chai-serenity": {
        1: "#F8F3EC",
        2: "#C8B6A2",
        3: "#A66D4E",
        4: "#839E88",
        5: "#E69C5A",
      }
    }
  }
}

Hex values

Color 1#F8F3EC

Color 2#C8B6A2

Color 3#A66D4E

Color 4#839E88

Color 5#E69C5A

Accessibility

Contrast checker

1.8:1Fail

3.9:1AA18

2.6:1Fail

2.1:1Fail

1.8:1Fail

2.2:1Fail

1.5:1Fail

1.2:1Fail

3.9:1AA18

2.2:1Fail

1.5:1Fail

1.9:1Fail

2.6:1Fail

1.5:1Fail

1.3:1Fail

2.1:1Fail

1.2:1Fail

1.9:1Fail

1.3:1Fail

Similar palettes

More like Spiced Chai Serenity

Spiced Chai Serenity

See it in context.

Ready when you are.

Built with Spiced Chai Serenity.

How to use Spiced Chai Serenity

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Earthy Core

Natural Balance

Spiced Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Spiced Chai Serenity