Palette

Twilight Bloom Garden

Soft, muted blues and greys evoke a tranquil garden as dusk settles, where colors soften and shadows deepen.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Bloom Garden 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 Twilight Bloom Garden.

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

Data visualization

#2C363F#4F5D75#708090#C1C8E4#A2B3D8

Palette guide

How to use Twilight Bloom Garden

Overview

The Twilight Bloom Garden palette offers a serene blend of soft, muted blues and greys, reflecting the tranquil atmosphere of a garden at dusk. Anchored by the sophisticated #2C363F (Deep Slate Blue) and supported by #4F5D75 (Muted Blue-Grey), this palette creates a calm and inviting mood. The lighter hues, including the airy #C1C8E4 (Pale Lavender-Blue) and the gentle #A2B3D8 (Soft Periwinkle), evoke softening colors and deepening shadows. Ideal for designers and developers seeking to convey peace, nature, or understated elegance in web design, branding, or digital art, this palette provides a harmonious and soothing visual experience.

Best used for

Serene branding for wellness products
Spa or meditation app interfaces
Residential interior design concepts
Nature-themed websites or blogs
Photography portfolios with a soft aesthetic
Eco-friendly product packaging

Suggested color roles

primary

Utilize #2C363F (Deep Slate Blue) for a grounding and sophisticated base, suitable for main navigation or footers.

secondary

Apply #4F5D75 (Muted Blue-Grey) for supportive content areas, secondary buttons, or background textures.

accent

Introduce #A2B3D8 (Soft Periwinkle) as a delicate highlight for icons, subtle call-to-actions, or decorative elements.

background

Employ #C1C8E4 (Pale Lavender-Blue) for expansive, airy backgrounds to create a sense of openness and calm.

text

For optimal readability, use #2C363F for dark text on light backgrounds, or white/near-white on #2C363F.

Accessibility notes

The mid-tone #708090 may have insufficient contrast with #C1C8E4 or #A2B3D8 for small text.
Ensure text on #2C363F is light enough (e.g., white or #C1C8E4) to meet contrast standards.
Lighter blues like #C1C8E4 and #A2B3D8 require very dark text for good readability.
Prioritize high contrast for interactive elements and crucial information to enhance usability.

Recommended combinations

Tranquil Depth

Creates a strong, calming visual hierarchy with deep foundations and a light, airy top.

#2C363F · #4F5D75 · #C1C8E4

Muted Harmony

Ideal for soft, gradient-like transitions or subtle layering in backgrounds and illustrations.

#708090 · #A2B3D8 · #C1C8E4

Garden Calm

Combines a deep base with a soft, bloom-like accent and an expansive, airy background.

#2C363F · #A2B3D8 · #C1C8E4

CSS variables

:root {
  --twilight-bloom-garden-2-1: #2C363F;
  --twilight-bloom-garden-2-2: #4F5D75;
  --twilight-bloom-garden-2-3: #708090;
  --twilight-bloom-garden-2-4: #C1C8E4;
  --twilight-bloom-garden-2-5: #A2B3D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-bloom-garden-2": {
        1: "#2C363F",
        2: "#4F5D75",
        3: "#708090",
        4: "#C1C8E4",
        5: "#A2B3D8",
      }
    }
  }
}

Hex values

Color 1#2C363F

Color 2#4F5D75

Color 3#708090

Color 4#C1C8E4

Color 5#A2B3D8

Accessibility

Contrast checker

1.8:1Fail

3:1AA18

7.4:1AAA

5.8:1AA

1.8:1Fail

1.6:1Fail

4:1AA18

3.2:1AA18

3:1AA18

1.6:1Fail

2.4:1Fail

1.9:1Fail

7.4:1AAA

4:1AA18

2.4:1Fail

1.3:1Fail

5.8:1AA

3.2:1AA18

1.9:1Fail

1.3:1Fail

Similar palettes

More like Twilight Bloom Garden

View all cool

Dusky Horizon Glow

Twilight Garden Serene

Moonlit Garden Path

Seaside Evening Blush

Twilight Garden Veil

Winter Twilight Dream