Perfume Haze to Beyond the Pines color palette

F4E8FFPerfume Haze 1A220DMidnight Pines D3AEF6Violet Heaven 3F542BZen Garden Olive 9E83B7Petrified Purple 5B7F4ABeyond the Pines

Open in generator Export PNG, PDF, ASE…

About this palette

Perfume Haze to Beyond the Pines is a 6-color cool palette: #F4E8FF (Perfume Haze), #1A220D (Midnight Pines), #D3AEF6 (Violet Heaven), #3F542B (Zen Garden Olive), #9E83B7 (Petrified Purple), #5B7F4A (Beyond the Pines). It mixes white, green, purple tones and feels cool overall. The strongest text pairing is #F4E8FF on #1A220D with a contrast ratio of 13.95:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Perfume Haze	rgb(244, 232, 255)	hsl(271, 100%, 95%)
Midnight Pines	rgb(26, 34, 13)	hsl(83, 45%, 9%)
Violet Heaven	rgb(211, 174, 246)	hsl(271, 80%, 82%)
Zen Garden Olive	rgb(63, 84, 43)	hsl(91, 32%, 25%)
Petrified Purple	rgb(158, 131, 183)	hsl(271, 27%, 62%)
Beyond the Pines	rgb(91, 127, 74)	hsl(101, 26%, 39%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa13.95:1 Super#F4E8FF on #1A220D
Aa13.95:1 Super#1A220D on #F4E8FF
Aa8.72:1 Very good#1A220D on #D3AEF6
Aa8.72:1 Very good#D3AEF6 on #1A220D
Aa7.09:1 Very good#F4E8FF on #3F542B
Aa7.09:1 Very good#3F542B on #F4E8FF
Aa4.99:1 Good#1A220D on #9E83B7
Aa4.99:1 Good#9E83B7 on #1A220D

Color blindness preview

CSS variables

/* Perfume Haze to Beyond the Pines — https://swatchly.xyz/palette/f4e8ff-1a220d-d3aef6-3f542b-9e83b7-5b7f4a */
:root {
  --perfume-haze: #f4e8ff;
  --midnight-pines: #1a220d;
  --violet-heaven: #d3aef6;
  --zen-garden-olive: #3f542b;
  --petrified-purple: #9e83b7;
  --beyond-the-pines: #5b7f4a;
}

Tailwind CSS v4

/* Perfume Haze to Beyond the Pines — https://swatchly.xyz/palette/f4e8ff-1a220d-d3aef6-3f542b-9e83b7-5b7f4a */
@theme {
  --color-perfume-haze: #f4e8ff;
  --color-perfume-haze-50: #faf5ff;
  --color-perfume-haze-100: #f4e8ff;
  --color-perfume-haze-200: #ded5e6;
  --color-perfume-haze-300: #c8bed1;
  --color-perfume-haze-400: #a89eb2;
  --color-perfume-haze-500: #8d8296;
  --color-perfume-haze-600: #72677b;
  --color-perfume-haze-700: #5a5163;
  --color-perfume-haze-800: #473e4e;
  --color-perfume-haze-900: #36303d;
  --color-perfume-haze-950: #221d26;
  --color-midnight-pines: #1a220d;
  --color-midnight-pines-50: #f1f8e9;
  --color-midnight-pines-100: #e7eedd;
  --color-midnight-pines-200: #d3dbc7;
  --color-midnight-pines-300: #bbc5ae;
  --color-midnight-pines-400: #9ba68d;
  --color-midnight-pines-500: #808b72;
  --color-midnight-pines-600: #667058;
  --color-midnight-pines-700: #505943;
  --color-midnight-pines-800: #3d4533;
  --color-midnight-pines-900: #2f3525;
  --color-midnight-pines-950: #1a220d;
  --color-violet-heaven: #d3aef6;
  --color-violet-heaven-50: #f8f2ff;
  --color-violet-heaven-100: #f2e5ff;
  --color-violet-heaven-200: #e5caff;
  --color-violet-heaven-300: #d3aef6;
  --color-violet-heaven-400: #b290d3;
  --color-violet-heaven-500: #9774b7;
  --color-violet-heaven-600: #7c5a9a;
  --color-violet-heaven-700: #64457f;
  --color-violet-heaven-800: #4f3467;
  --color-violet-heaven-900: #3e2652;
  --color-violet-heaven-950: #271635;
  --color-zen-garden-olive: #3f542b;
  --color-zen-garden-olive-50: #ecfbe1;
  --color-zen-garden-olive-100: #e1f2d4;
  --color-zen-garden-olive-200: #caddba;
  --color-zen-garden-olive-300: #b0c69e;
  --color-zen-garden-olive-400: #8ea57a;
  --color-zen-garden-olive-500: #71885d;
  --color-zen-garden-olive-600: #576c43;
  --color-zen-garden-olive-700: #3f542b;
  --color-zen-garden-olive-800: #314122;
  --color-zen-garden-olive-900: #253218;
  --color-zen-garden-olive-950: #151f0c;
  --color-petrified-purple: #9e83b7;
  --color-petrified-purple-50: #faf4ff;
  --color-petrified-purple-100: #f4eaff;
  --color-petrified-purple-200: #e7d3fb;
  --color-petrified-purple-300: #d4bdea;
  --color-petrified-purple-400: #b79ed0;
  --color-petrified-purple-500: #9e83b7;
  --color-petrified-purple-600: #816799;
  --color-petrified-purple-700: #674f7d;
  --color-petrified-purple-800: #513c64;
  --color-petrified-purple-900: #3e2c4e;
  --color-petrified-purple-950: #271a32;
  --color-beyond-the-pines: #5b7f4a;
  --color-beyond-the-pines-50: #e7fddd;
  --color-beyond-the-pines-100: #ddf5d2;
  --color-beyond-the-pines-200: #c8e5bb;
  --color-beyond-the-pines-300: #b0d1a1;
  --color-beyond-the-pines-400: #8fb37f;
  --color-beyond-the-pines-500: #749963;
  --color-beyond-the-pines-600: #5b7f4a;
  --color-beyond-the-pines-700: #456635;
  --color-beyond-the-pines-800: #335025;
  --color-beyond-the-pines-900: #253e19;
  --color-beyond-the-pines-950: #15270c;
}