Palette

Black Tea Ceremony

Rich, deep browns and soft greys capture the comforting warmth and elegant simplicity of a tea ceremony.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Black Tea Ceremony 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 Black Tea Ceremony.

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

Data visualization

#2E1B1B#4B3131#694C4C#8C6D6D#C8B5B5

Palette guide

How to use Black Tea Ceremony

Overview

The Black Tea Ceremony palette captures the comforting warmth and elegant simplicity of a traditional tea ceremony. Featuring rich, deep browns like #2E1B1B, #4B3131, and #694C4C, complemented by softer, muted tones such as #8C6D6D and #C8B5B5, it evokes a sense of cozy sophistication. This palette is an excellent choice for designers aiming to create inviting, refined, and serene visuals. Its earthy yet elegant composition makes it ideal for projects that emphasize warmth, tradition, and a minimalist approach to comfort, much like a perfectly brewed cup of black tea.

Best used for

Coffee shop and cafe branding
Cozy blog themes and lifestyle websites
Luxury home decor and interior design
Traditional craft and artisan product websites
Sophisticated food and beverage packaging
Warm minimalist design projects

Suggested color roles

primary

Use #2E1B1B as the deepest, richest foundation for backgrounds or main structural elements, conveying warmth and depth.

secondary

Employ #4B3131 for main content blocks or panels, offering a mid-tone brown that maintains the palette's cozy feel.

accent

Apply #C8B5B5 for soft, comforting highlights, delicate typography, or subtle decorative elements, adding an elegant touch.

background

Choose #2E1B1B for a cozy, dark ambiance or #C8B5B5 for a lighter, airy, and sophisticated base.

text

For optimal readability on dark backgrounds, use #C8B5B5. On lighter backgrounds, #2E1B1B or a dark charcoal is recommended.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter browns like #C8B5B5 on darker tones like #2E1B1B.
Check readability of #694C4C on #8C6D6D; ensure adequate luminance contrast for clarity.
Avoid low-contrast combinations for body text; prioritize legibility with clear distinctions.
Use larger font sizes for lighter brown text on mid-tone backgrounds to improve readability.

Recommended combinations

Steeped Warmth

Creates a rich brown gradient, ideal for immersive backgrounds or elegant texture simulations.

#2E1B1B · #4B3131 · #694C4C

Gentle Brew

Offers a soft, inviting feel for content areas or subtle branding elements, reminiscent of a warm drink.

#C8B5B5 · #8C6D6D · #694C4C

Elegant Contrast

Provides a sophisticated pairing for branding elements or elegant typography.

#2E1B1B · #C8B5B5 · #4B3131

CSS variables

:root {
  --black-tea-ceremony-1: #2E1B1B;
  --black-tea-ceremony-2: #4B3131;
  --black-tea-ceremony-3: #694C4C;
  --black-tea-ceremony-4: #8C6D6D;
  --black-tea-ceremony-5: #C8B5B5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "black-tea-ceremony": {
        1: "#2E1B1B",
        2: "#4B3131",
        3: "#694C4C",
        4: "#8C6D6D",
        5: "#C8B5B5",
      }
    }
  }
}

Hex values

Color 1#2E1B1B

Color 2#4B3131

Color 3#694C4C

Color 4#8C6D6D

Color 5#C8B5B5

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.5:1AA18

8.3:1AAA

1.4:1Fail

1.5:1Fail

2.5:1Fail

6:1AA

2.1:1Fail

1.5:1Fail

1.7:1Fail

3.9:1AA18