Back to palettes

Palette

Twilight Garden Serene

Soft purples and blues capturing the serene, tranquil beauty of a garden at twilight.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#483D8B#6A5ACD#B0C4DE#E6E6FA#F0F8FF

Palette guide

How to use Twilight Garden Serene

Overview

The "Twilight Garden Serene" palette offers a truly tranquil blend of soft purples and calming blues, perfect for designers and developers aiming for a serene and ethereal aesthetic. With the deep #483D8B providing a grounding base, and delicate lighter shades like #E6E6FA and #F0F8FF, this palette evokes the peaceful beauty of a garden at dusk. The versatile #6A5ACD and #B0C4DE bridge the gap, allowing for harmonious transitions. This collection is ideal for creating soothing digital environments, peaceful branding, or any content that requires a gentle, calm, and contemplative mood.

Best used for

  • Health and wellness applications
  • Meditation or mindfulness websites
  • Baby product branding
  • Wedding invitations with a calm theme
  • Interior design visualization
  • Educational platforms for children

Suggested color roles

primary

#483D8B - A deep, calming purple-blue, excellent for main headers, footers, or dominant brand elements that convey stability.

secondary

#6A5ACD - A softer purple, ideal for secondary content blocks, navigation, or subtle interactive components.

accent

#B0C4DE - A gentle blue-gray, perfect for subtle accents, inactive states, or supporting graphics.

background

#F0F8FF - An almost white, very light blue, providing a clean, airy, and serene canvas for most content.

text

#483D8B - The darkest shade, providing optimal contrast for primary body text against light backgrounds like #F0F8FF or #E6E6FA.

Accessibility notes

  • Ensure #483D8B text has excellent contrast against #F0F8FF and #E6E6FA for WCAG AA compliance.
  • Avoid using lighter shades like #B0C4DE for small text on #E6E6FA or #F0F8FF due to insufficient contrast.
  • For interactive elements, ensure distinct visual feedback for hover and active states that are visually clear.
  • Consider pairing the darkest and lightest colors for critical text/background combinations to maximize readability.

Recommended combinations

Calm Interface

Clean, light backgrounds with clear, dark text for a serene user experience.

#F0F8FF · #E6E6FA · #483D8B

Gentle Depth

Layered content blocks or cards with distinct borders and headings.

#6A5ACD · #B0C4DE · #483D8B

Soft Highlights

Main content area with primary text and subtle secondary elements.

#E6E6FA · #483D8B · #6A5ACD

CSS variables

:root {
  --twilight-garden-serene-1: #483D8B;
  --twilight-garden-serene-2: #6A5ACD;
  --twilight-garden-serene-3: #B0C4DE;
  --twilight-garden-serene-4: #E6E6FA;
  --twilight-garden-serene-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-garden-serene": {
        1: "#483D8B",
        2: "#6A5ACD",
        3: "#B0C4DE",
        4: "#E6E6FA",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

serene purple blue palettecalm garden twilight colorslight purple ui themeethereal branding palettetranquil web design colors

Palette colors

Hex values

Color 1#483D8B
·
Color 2#6A5ACD
·
Color 3#B0C4DE
·
Color 4#E6E6FA
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
5.1:1AA
7.4:1AAA
8.5:1AAA
2
1.7:1Fail
3:1Fail
4.3:1AA18
4.9:1AA
3
5.1:1AA
3:1Fail
1.4:1Fail
1.7:1Fail
4
7.4:1AAA
4.3:1AA18
1.4:1Fail
1.1:1Fail
5
8.5:1AAA
4.9:1AA
1.7:1Fail
1.1:1Fail

Similar palettes

More like Twilight Garden Serene

View all cool
Twilight Bloom Garden
Twilight Garden Veil
Dusky Horizon Glow
Twilight Garden Path
Twilight Horizon Bloom
Celestial Dreamscape