Back to palettes

Palette

Twilight Seraphim

Deep purples and lilacs conjuring an ethereal vision of seraphim descending into the twilight.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A0033#3D0066#6F0099#A033CC#D166FF

Palette guide

How to use Twilight Seraphim

Overview

The "Twilight Seraphim" palette delivers a deeply elegant and mystical aesthetic through a gradient of rich purples. Starting with an intensely dark, almost black-purple (#1A0033), it transitions through a profound royal purple (#3D0066) and a vibrant violet (#6F0099). The lighter shades, a luminous amethyst (#A033CC) and a bright, ethereal lavender (#D166FF), add a celestial glow. This palette is ideal for designers and developers aiming to create sophisticated, luxurious, or spiritual experiences, offering depth and dramatic flair suitable for high-end branding, fantasy themes, or artistic digital interfaces.

Best used for

  • Luxury brand websites or packaging
  • Fantasy game interfaces or art
  • Mystical or spiritual content platforms
  • Elegant event invitations
  • Creative portfolio designs
  • High-fashion digital campaigns

Suggested color roles

primary

Use #1A0033 (Deepest Purple) for foundational elements, dark mode backgrounds, or headers demanding ultimate sophistication.

secondary

Apply #3D0066 (Royal Purple) for main headings, prominent sections, or navigation, providing depth and a regal presence.

accent

Employ #A033CC (Luminous Amethyst) for call-to-action buttons, interactive elements, or key highlights that need to pop with a magical touch.

background

Utilize #1A0033 or #3D0066 to provide a rich, immersive backdrop, especially effective for dark themes.

text

For legible text on darker purples like #1A0033 or #3D0066, use #D166FF or #A033CC, offering good contrast.

Accessibility notes

  • Ensure #A033CC and #D166FF provide sufficient contrast against #1A0033 and #3D0066 for readability.
  • Avoid using #6F0099 for small text on #3D0066; contrast may be insufficient.
  • For maximum readability on dark backgrounds, use #D166FF as the primary text color.
  • Always check contrast ratios, especially for critical information, as purple tones can be tricky to ensure legibility.

Recommended combinations

Mystic Depth

Ideal for dark mode interfaces, using the lightest purple for text and the deepest for background.

#1A0033 · #D166FF · #3D0066

Regal Glow

Great for highlighting key features, with the vibrant accent drawing attention on a rich background.

#3D0066 · #A033CC · #6F0099

Ethereal Gradient

Suitable for artistic headers or decorative elements, blending mid-tones with a strong base.

#6F0099 · #D166FF · #1A0033

CSS variables

:root {
  --twilight-seraphim-1: #1A0033;
  --twilight-seraphim-2: #3D0066;
  --twilight-seraphim-3: #6F0099;
  --twilight-seraphim-4: #A033CC;
  --twilight-seraphim-5: #D166FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-seraphim": {
        1: "#1A0033",
        2: "#3D0066",
        3: "#6F0099",
        4: "#A033CC",
        5: "#D166FF",
      }
    }
  }
}

Related searches

elegant purple color schemedark mystical paletteluxury violet brand colorsfantasy UI purpleethereal design palette

Palette colors

Hex values

Color 1#1A0033
·
Color 2#3D0066
·
Color 3#6F0099
·
Color 4#A033CC
·
Color 5#D166FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3.5:1AA18
6.5:1AA
2
1.3:1Fail
1.5:1Fail
2.8:1Fail
5.1:1AA
3
2:1Fail
1.5:1Fail
1.8:1Fail
3.3:1AA18
4
3.5:1AA18
2.8:1Fail
1.8:1Fail
1.8:1Fail
5
6.5:1AA
5.1:1AA
3.3:1AA18
1.8:1Fail

Similar palettes

More like Twilight Seraphim

View all dark
Celestial Dust Glimmer
Celestial Dust Trail
Cosmic Stardust Haze
Galactic Nebula Swirl
Geode Amethyst Core
Geode Amethyst Core