Palette

Twilight Petal Kiss

The gentle caress of dusk falling on delicate blossoms, a serene blend of fading light and soft color.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A2BE2#DDA0DD#FFC0CB#F8F8FF#4B0082

Palette guide

How to use Twilight Petal Kiss

Overview

The "Twilight Petal Kiss" palette is a delicate and romantic blend of purples, pinks, and near-whites, evoking the gentle touch of dusk on soft blossoms. It features the vibrant blue violet of #8A2BE2 and the deep, mysterious indigo of #4B0082. Softer tones include the gentle plum of #DDA0DD, the classic light pink of #FFC0CB, and the ethereal off-white of #F8F8FF. This palette is perfect for designs seeking a romantic, feminine, or dreamy aesthetic, ideal for wedding themes, beauty products, or any project that aims to convey softness, elegance, and a touch of whimsy.

Best used for

Wedding invitations and decor
Feminine beauty brands
Romantic lifestyle blogs
Baby shower themes
Delicate fashion accessories
Greeting card design

Suggested color roles

primary

#4B0082 or #8A2BE2 for deeper elements, providing a strong, elegant base.

secondary

#DDA0DD or #FFC0CB for sub-sections, cards, or decorative elements, adding softness and warmth.

accent

#FFC0CB can be used for delicate highlights, small icons, or subtle decorative touches.

background

#F8F8FF for a clean, airy base; #4B0082 for a dramatic, luxurious dark mode.

text

Dark charcoal or black for text on #F8F8FF; #F8F8FF or light pink for text on #4B0082 or #8A2BE2.

Accessibility notes

Ensure high contrast for text, especially dark text on #F8F8FF and #FFC0CB.
Be very cautious with #DDA0DD on #FFC0CB or #F8F8FF for text due to potential low contrast.
Use #8A2BE2 for interactive elements to ensure they are clearly visible against lighter backgrounds.
Prioritize legibility by choosing highly contrasting text colors for important information.

Recommended combinations

Romantic Dusk

Creates a sophisticated dark theme with soft, romantic accents.

#4B0082 · #DDA0DD · #F8F8FF

Petal Softness

Ideal for delicate backgrounds, feminine branding, or subtle gradients.

#DDA0DD · #FFC0CB · #F8F8FF

Vibrant Bloom

Excellent for creating playful yet elegant designs with clear visual hierarchy.

#8A2BE2 · #FFC0CB · #4B0082

CSS variables

:root {
  --twilight-petal-kiss-1: #8A2BE2;
  --twilight-petal-kiss-2: #DDA0DD;
  --twilight-petal-kiss-3: #FFC0CB;
  --twilight-petal-kiss-4: #F8F8FF;
  --twilight-petal-kiss-5: #4B0082;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-petal-kiss": {
        1: "#8A2BE2",
        2: "#DDA0DD",
        3: "#FFC0CB",
        4: "#F8F8FF",
        5: "#4B0082",
      }
    }
  }
}

Hex values

Color 1#8A2BE2

Color 2#DDA0DD

Color 3#FFC0CB

Color 4#F8F8FF

Color 5#4B0082

Accessibility

Contrast checker

2.9:1Fail

3.9:1AA18

5.6:1AA

2.2:1Fail

2.9:1Fail

1.3:1Fail

2:1Fail

6.3:1AA

3.9:1AA18

1.3:1Fail

1.5:1Fail

8.4:1AAA

5.6:1AA

2:1Fail

1.5:1Fail

12.2:1AAA

2.2:1Fail

6.3:1AA

8.4:1AAA

12.2:1AAA

Similar palettes

More like Twilight Petal Kiss

Twilight Blossom Hush

Whispering Wisteria Arch

Arctic Sunset Glow