Palette

Sakura Lantern

Soft, enchanting pinks and creams inspired by the gentle glow of traditional sakura lanterns at dusk.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sakura Lantern 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 Sakura Lantern.

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

Data visualization

#FCEEF2#F9D5E1#F6B9D0#F29CBF#EF7FB0

Palette guide

How to use Sakura Lantern

Overview

The Sakura Lantern palette offers a beautiful gradient of soft pinks and creams, evoking the enchanting glow of traditional Japanese lanterns amidst cherry blossoms at dusk. Ranging from the nearly white #FCEEF2 to the deeper #EF7FB0, with intermediate shades like #F9D5E1, #F6B9D0, and #F29CBF, this palette provides a harmonious and delicate visual experience. It's perfectly suited for designs that require a gentle, ethereal, and subtly feminine touch. This collection allows for creating smooth transitions and layering effects, making it incredibly versatile for conveying softness and quiet beauty in various applications.

Best used for

Minimalist branding and packaging
Wedding and baby shower themes
Soft digital illustrations and art
Feminine lifestyle and beauty blogs
Clean and gentle user interfaces
Spring-themed marketing materials

Suggested color roles

primary

#F29CBF (Mid-Blossom Pink) serves as a lovely primary, offering a clear, gentle presence without being overpowering.

secondary

#F6B9D0 (Soft Petal Pink) provides a slightly lighter, harmonious complement, great for secondary content or accents.

accent

#EF7FB0 (Deep Blossom Pink) acts as a subtle accent, adding depth and definition to interactive elements or key visuals.

background

#FCEEF2 (Lantern Cream) is an excellent, almost-white base, providing an airy and clean canvas.

text

For body text, a medium-dark gray (e.g., #555555) offers good readability against the lighter shades. For headings, #EF7FB0 provides a gentle yet clear contrast, especially on #FCEEF2.

Accessibility notes

Ensure sufficient contrast for text, particularly when using the lighter shades like #FCEEF2 and #F9D5E1 as backgrounds.
The darkest shade, #EF7FB0, should be used for critical text on the lightest backgrounds to meet WCAG AA standards.
Avoid low-contrast pairings for interactive elements; ensure clickable areas have clear visual distinction.
Consider larger font sizes for text used with the lighter pinks to aid readability for all users.

Recommended combinations

Ethereal Glow

Creates a soft, luminous background or a subtle, layered effect in digital designs and prints.

#FCEEF2 · #F9D5E1 · #F6B9D0

Blossom Depth

Ideal for showing progression, creating gradients, or adding visual weight to illustrations and icons.

#F6B9D0 · #F29CBF · #EF7FB0

Gentle Contrast

Use for a clean layout where the deepest pink provides definition against the light background.

#FCEEF2 · #EF7FB0 · #F29CBF

CSS variables

:root {
  --sakura-lantern-1: #FCEEF2;
  --sakura-lantern-2: #F9D5E1;
  --sakura-lantern-3: #F6B9D0;
  --sakura-lantern-4: #F29CBF;
  --sakura-lantern-5: #EF7FB0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-lantern": {
        1: "#FCEEF2",
        2: "#F9D5E1",
        3: "#F6B9D0",
        4: "#F29CBF",
        5: "#EF7FB0",
      }
    }
  }
}

Hex values

Color 1#FCEEF2

Color 2#F9D5E1

Color 3#F6B9D0

Color 4#F29CBF

Color 5#EF7FB0

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.8:1Fail

2.2:1Fail

1.2:1Fail

1.5:1Fail

1.9:1Fail

1.5:1Fail

1.2:1Fail

1.5:1Fail

1.8:1Fail

1.5:1Fail

1.2:1Fail

2.2:1Fail

1.9:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Sakura Lantern

Sakura Lantern

See it in context.

Ready when you are.

Built with Sakura Lantern.

How to use Sakura Lantern

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ethereal Glow

Blossom Depth

Gentle Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sakura Lantern