Back to palettes

Palette

Twilight Horizon Bloom

The serene and dusky transition from day to night, captured in soft mauves and deep purples.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FBEAEB#C0A1C7#7D6B9C#4F4060#2D1D3A

Palette guide

How to use Twilight Horizon Bloom

Overview

The "Twilight Horizon Bloom" palette beautifully captures the serene transition from day to night with its range of soft mauves, dusky purples, and deep, grounding tones. From the almost-pink #FBEAEB to the profound #2D1D3A, this collection is perfect for designers and developers seeking a calm yet sophisticated aesthetic. Mid-tones like #C0A1C7 and #7D6B9C offer excellent versatility for creating elegant UIs and harmonious branding. This palette is ideal for projects that require a sense of tranquility, introspection, and understated beauty, reminiscent of a sunset over a blooming horizon.

Best used for

  • Romantic or wedding-themed websites
  • Photography portfolios showcasing landscapes
  • Luxury home decor branding
  • Fashion blogs with a soft, elegant style
  • Mindfulness and wellness apps
  • Feminine product packaging

Suggested color roles

primary

#4F4060 - A deep, muted purple, ideal for main headers, footers, or dominant brand elements, providing a strong, elegant base.

secondary

#7D6B9C - A softer, dusty purple, suitable for secondary content blocks, card backgrounds, or subtle interactive elements.

accent

#C0A1C7 - A delicate mauve, perfect for subtle highlights, interactive states, or decorative elements that add a touch of bloom.

background

#FBEAEB - A very light, almost white pink, offering a clean, airy, and serene canvas for most content.

text

#2D1D3A - The darkest shade, providing optimal contrast for primary body text against light backgrounds like #FBEAEB.

Accessibility notes

  • Ensure #2D1D3A text has excellent contrast against #FBEAEB for WCAG AA compliance.
  • Avoid using #C0A1C7 for small text on #7D6B9C due to potentially low contrast; check thoroughly.
  • For critical information or headlines, consider using a pure black (e.g., #000000) on the lightest background if more stark contrast is needed.
  • Verify that interactive elements maintain sufficient visual distinction in all states.

Recommended combinations

Dusky Serenity

Deep, grounding backgrounds with layered content and crisp, readable light text.

#2D1D3A · #4F4060 · #FBEAEB

Horizon Blend

Light panels with soft, transitioning colors for depth and visual interest.

#FBEAEB · #C0A1C7 · #7D6B9C

Elegant UI

Content cards, forms, and buttons with clear text and a sophisticated feel.

#7D6B9C · #FBEAEB · #4F4060

CSS variables

:root {
  --twilight-horizon-bloom-1: #FBEAEB;
  --twilight-horizon-bloom-2: #C0A1C7;
  --twilight-horizon-bloom-3: #7D6B9C;
  --twilight-horizon-bloom-4: #4F4060;
  --twilight-horizon-bloom-5: #2D1D3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-horizon-bloom": {
        1: "#FBEAEB",
        2: "#C0A1C7",
        3: "#7D6B9C",
        4: "#4F4060",
        5: "#2D1D3A",
      }
    }
  }
}

Related searches

mauve purple sunset palettetwilight horizon colorsdusky pink purple brandingserene evening uicalm romantic color scheme

Palette colors

Hex values

Color 1#FBEAEB
·
Color 2#C0A1C7
·
Color 3#7D6B9C
·
Color 4#4F4060
·
Color 5#2D1D3A
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.1:1AA18
8.1:1AAA
13.4:1AAA
2
2:1Fail
2.1:1Fail
4.1:1AA18
6.8:1AA
3
4.1:1AA18
2.1:1Fail
2:1Fail
3.3:1AA18
4
8.1:1AAA
4.1:1AA18
2:1Fail
1.7:1Fail
5
13.4:1AAA
6.8:1AA
3.3:1AA18
1.7:1Fail

Similar palettes

More like Twilight Horizon Bloom

View all cool