Back to palettes

Palette

Faewild Bloom Charm

Step into a mystical faewild, where gentle blooms and cool, enchanted light invite wonder.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Faewild Bloom Charm 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 Faewild Bloom Charm.

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

Data visualization

#3D4A4B#6B8B8C#A0C5C6#D1EAEB#7C5C8C

Palette guide

How to use Faewild Bloom Charm

Overview

The Faewild Bloom Charm palette evokes a serene, mystical atmosphere, perfect for designs seeking a touch of enchantment. Anchored by the deep teal-grey of #3D4A4B, it transitions through the calming #6B8B8C and the airy #A0C5C6, culminating in the ethereal #D1EAEB. The vibrant accent of #7C5C8C, a rich purple, provides a captivating focal point. This cool-toned collection offers designers and developers a cohesive set of hues to build immersive experiences, lending depth and a gentle whimsy to digital interfaces, illustrations, and branding projects. Its balanced tones ensure versatility while maintaining a distinct magical personality.

Best used for

  • Fantasy game UI/UX design
  • Children's book illustrations
  • Mystical brand identities
  • Nature-inspired web and app interfaces
  • Whimsical event invitations and decor
  • Artistic portfolio websites

Suggested color roles

primary

#3D4A4B serves as a grounding, deep anchor for primary navigation, main headings, or substantial background sections, providing a sense of stability and depth.

secondary

#6B8B8C offers a versatile mid-tone, ideal for subheadings, card backgrounds, or supporting graphical elements, balancing the primary with a softer presence.

accent

#7C5C8C is the enchanting highlight, perfect for calls-to-action, interactive buttons, or small, key visual elements that demand attention and convey magic.

background

#D1EAEB provides an ethereal, light canvas, excellent for main content areas, ensuring high readability and a spacious, airy feel.

text

#3D4A4B is recommended for primary text on lighter backgrounds like #D1EAEB or #A0C5C6, ensuring strong contrast and legibility. For darker backgrounds, white or a near-white shade would be appropriate.

Accessibility notes

  • Ensure #3D4A4B text on #D1EAEB background meets WCAG AA contrast standards for readability.
  • Verify that #7C5C8C accent elements have sufficient contrast against their surrounding background colors, especially lighter ones.
  • Avoid using #A0C5C6 or #6B8B8C for small text on #D1EAEB without thorough contrast checking, as they may fail WCAG standards.
  • For interactive elements, maintain a clear visual hierarchy and sufficient contrast for states (hover, active) using colors from the palette like #7C5C8C.

Recommended combinations

Deep Forest Glow

Creates a natural, grounded feel with deep and light contrasts, suitable for foundational layouts or section dividers.

#3D4A4B · #6B8B8C · #D1EAEB

Mystic Bloom Accent

Highlights magical elements and interactive components against a soft, ethereal backdrop, ideal for calls-to-action or illustrations.

#A0C5C6 · #7C5C8C · #D1EAEB

Twilight Whisper

Offers a balanced, moody combination excellent for creating depth in UI cards, headers, or abstract graphical patterns.

#6B8B8C · #7C5C8C · #3D4A4B

CSS variables

:root {
  --faewild-bloom-charm-1: #3D4A4B;
  --faewild-bloom-charm-2: #6B8B8C;
  --faewild-bloom-charm-3: #A0C5C6;
  --faewild-bloom-charm-4: #D1EAEB;
  --faewild-bloom-charm-5: #7C5C8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faewild-bloom-charm": {
        1: "#3D4A4B",
        2: "#6B8B8C",
        3: "#A0C5C6",
        4: "#D1EAEB",
        5: "#7C5C8C",
      }
    }
  }
}

Related searches

fantasy color palettemystical UI colorswhimsical web design palettefaewild brand colorscool tone magical palette

Palette colors

Hex values

Color 1#3D4A4B
·
Color 2#6B8B8C
·
Color 3#A0C5C6
·
Color 4#D1EAEB
·
Color 5#7C5C8C
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
5:1AA
7.3:1AAA
1.7:1Fail
2
2.5:1Fail
2:1Fail
2.9:1Fail
1.5:1Fail
3
5:1AA
2:1Fail
1.5:1Fail
3:1Fail
4
7.3:1AAA
2.9:1Fail
1.5:1Fail
4.4:1AA18
5
1.7:1Fail
1.5:1Fail
3:1Fail
4.4:1AA18

Similar palettes

More like Faewild Bloom Charm

View all cool
Enchanted Dewdrop Jewel
Enchanted Forest Canopy
Alpine Forest Chill
Arctic Moss Glaze
Aurora Borealis Dream
Aurora Shimmer Lights