Back to palettes

Palette

Zen Tea Ceremony

Subtly sophisticated darks and grays capture the quiet reverence of a moonlit, traditional tea ritual.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#202A2E#3F4A50#606A70#808A90#A0A9AE

Palette guide

How to use Zen Tea Ceremony

Overview

The Zen Tea Ceremony palette exudes sophisticated tranquility with its deep, dark grays and cool blue undertones, perfect for creating elegant and subtle designs. Featuring a profound near-black #202A2E, a rich charcoal #3F4A50, and progressively lighter grays like #808A90 and #A0A9AE, this palette offers depth and refinement. Designers can leverage its monochromatic harmony for a sense of calm and luxury, while developers will find it excellent for dark mode interfaces or high-contrast, minimalist applications. It's an ideal choice for projects where a sophisticated, understated mood is desired.

Best used for

  • Luxury brand websites (dark mode)
  • High-end technology interfaces
  • Art and photography portfolios
  • Sophisticated corporate presentations
  • Evening event branding
  • Minimalist app themes

Suggested color roles

primary

#202A2E provides a strong, elegant primary for backgrounds, main headings, or prominent sections, establishing depth.

secondary

#3F4A50 is ideal for secondary navigation, card backgrounds, or subtle dividers, offering a smooth transition from the primary.

accent

#A0A9AE can serve as a subtle accent, especially for interactive states, hover effects, or small icons that need to stand out gently.

background

While often a primary, #202A2E or #3F4A50 can be a deep background. For lighter content, #A0A9AE can be used as a background for darker text.

text

For light text on dark backgrounds, #A0A9AE or a pure white offers excellent contrast. For darker text on light elements, a charcoal like #3F4A50 is effective.

Accessibility notes

  • Ensure light text (e.g., #A0A9AE or white) has sufficient contrast against #202A2E or #3F4A50 backgrounds.
  • Avoid using shades too close in value (e.g., #606A70 text on #808A90 background) for critical information.
  • Use #202A2E for large headings only if text is light. For body text, ensure a strong contrast with a lighter background.
  • Prioritize clear contrast for interactive elements, using #A0A9AE on darker shades.

Recommended combinations

Deep Serenity

A striking dark background with light text/accents and a supporting dark UI element.

#202A2E · #A0A9AE · #3F4A50

Subtle Layers

Excellent for creating depth in UI elements like cards, panels, or subtle gradients.

#3F4A50 · #606A70 · #808A90

Elegant Focus

A mid-tone background with deep text and a lighter accent for emphasis.

#808A90 · #202A2E · #A0A9AE

CSS variables

:root {
  --zen-tea-ceremony-1: #202A2E;
  --zen-tea-ceremony-2: #3F4A50;
  --zen-tea-ceremony-3: #606A70;
  --zen-tea-ceremony-4: #808A90;
  --zen-tea-ceremony-5: #A0A9AE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-tea-ceremony": {
        1: "#202A2E",
        2: "#3F4A50",
        3: "#606A70",
        4: "#808A90",
        5: "#A0A9AE",
      }
    }
  }
}

Related searches

dark mode color palettesophisticated gray schememinimalist dark uielegant charcoal colorsserene deep neutral palette

Palette colors

Hex values

Color 1#202A2E
·
Color 2#3F4A50
·
Color 3#606A70
·
Color 4#808A90
·
Color 5#A0A9AE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.2:1AA18
6.1:1AA
2
1.6:1Fail
1.6:1Fail
2.6:1Fail
3.8:1AA18
3
2.6:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
4.2:1AA18
2.6:1Fail
1.6:1Fail
1.5:1Fail
5
6.1:1AA
3.8:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Zen Tea Ceremony

View all dark