Palette

Mystic Twilight Bloom

Enigmatic blues and purples, like the gentle unfolding of a bloom under the spell of twilight.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#483D8B#8A2BE2#9370DB#ADD8E6#D8BFD8

Palette guide

How to use Mystic Twilight Bloom

Overview

The "Mystic Twilight Bloom" palette casts an enchanting spell with its enigmatic blues and purples, reminiscent of a delicate bloom unfolding under the evening sky. Featuring deep indigo `#483D8B`, vibrant violet `#8A2BE2`, and soft lavender `#D8BFD8`, this palette exudes elegance and a touch of magic. The inclusion of `#9370DB` and `#ADD8E6` adds further depth and versatility, allowing designers to craft sophisticated and ethereal visuals. It's an excellent choice for projects that aim for a luxurious, mystical, or romantic aesthetic, providing a rich yet soft backdrop for creative expression in both digital and print media.

Best used for

High-end cosmetics and beauty brand identities
Luxurious event invitations and promotional materials
Spiritual or mystical wellness platforms
Elegant websites for fashion or art galleries
Fantasy novel covers and digital illustrations
Sophisticated user interfaces for creative applications

Suggested color roles

primary

Utilize `#8A2BE2` as a captivating primary color for calls-to-action, key headings, or focal points, leveraging its vibrant and magical appeal.

secondary

Employ `#483D8B` for foundational elements, large text blocks, or backgrounds, providing a deep, grounding contrast.

accent

Apply `#ADD8E6` sparingly for delicate highlights, interactive states, or subtle graphic accents, creating an airy, ethereal touch.

background

A gentle tone like `#D8BFD8` or a deep one like `#483D8B` can serve as an elegant background, setting the overall mood.

text

For dark backgrounds, use `#ADD8E6` or a pure white for main text. On lighter backgrounds, `#483D8B` or a dark charcoal provides excellent contrast.

Accessibility notes

Ensure high contrast when pairing lighter colors like `#ADD8E6` on darker backgrounds such as `#483D8B` for optimal readability.
Verify that interactive elements, such as buttons or links, have clear focus states that meet WCAG accessibility standards.
Avoid using `#9370DB` and `#D8BFD8` for text and background combinations, as their subtle difference in lightness may hinder readability for small text.
Test text legibility, especially for smaller font sizes, as purple hues can sometimes be challenging on screens.

Recommended combinations

Twilight Depth

Use `#483D8B` for a deep, elegant background, `#ADD8E6` for headings, and `#8A2BE2` for primary text or calls-to-action.

#483D8B · #ADD8E6 · #8A2BE2

Bloom Accents

Apply `#D8BFD8` as a soft background, `#9370DB` for secondary elements, and `#483D8B` for strong borders or icons.

#D8BFD8 · #9370DB · #483D8B

Mystical Flow

Create a harmonious gradient or layered effect with `#8A2BE2` as a vibrant starting point, `#ADD8E6` for highlights, and `#9370DB` for mid-tones.

#8A2BE2 · #ADD8E6 · #9370DB

CSS variables

:root {
  --mystic-twilight-bloom-1: #483D8B;
  --mystic-twilight-bloom-2: #8A2BE2;
  --mystic-twilight-bloom-3: #9370DB;
  --mystic-twilight-bloom-4: #ADD8E6;
  --mystic-twilight-bloom-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-twilight-bloom": {
        1: "#483D8B",
        2: "#8A2BE2",
        3: "#9370DB",
        4: "#ADD8E6",
        5: "#D8BFD8",
      }
    }
  }
}

Hex values

Color 1#483D8B

Color 2#8A2BE2

Color 3#9370DB

Color 4#ADD8E6

Color 5#D8BFD8

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

5.9:1AA

5.3:1AA

1.5:1Fail

1.6:1Fail

3.9:1AA18

3.5:1AA18

2.4:1Fail

1.6:1Fail

2.5:1Fail

2.2:1Fail

5.9:1AA

3.9:1AA18

2.5:1Fail

1.1:1Fail

5.3:1AA

3.5:1AA18

2.2:1Fail

1.1:1Fail

Similar palettes

More like Mystic Twilight Bloom

View all cool

Amethyst Cavern Glow

Amethyst Mystic Grotto

Celestial Ocean Depth

Celestial Shimmer

Cosmic Bloom Nebula

Enchanted Dewdrop Garden