Start generating

Foxy Pink to Rustling Leaves color palette

D398A7Foxy Pink081F1BBlack StallionBAF0E6Fresh Breeze256F69Pine Scented Lagoon55242CLonestarB16B6ERustling Leaves
Open in generator Export PNG, PDF, ASE…

About this palette

Foxy Pink to Rustling Leaves is a 6-color vintage palette: #D398A7 (Foxy Pink), #081F1B (Black Stallion), #BAF0E6 (Fresh Breeze), #256F69 (Pine Scented Lagoon), #55242C (Lonestar), #B16B6E (Rustling Leaves). It mixes pink, black, turquoise, brown, red tones and feels warm overall. The strongest text pairing is #081F1B on #BAF0E6 with a contrast ratio of 13.66:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Foxy Pinkrgb(211, 152, 167)hsl(345, 40%, 71%)
Black Stallionrgb(8, 31, 27)hsl(170, 59%, 8%)
Fresh Breezergb(186, 240, 230)hsl(169, 64%, 84%)
Pine Scented Lagoonrgb(37, 111, 105)hsl(175, 50%, 29%)
Lonestarrgb(85, 36, 44)hsl(350, 40%, 24%)
Rustling Leavesrgb(177, 107, 110)hsl(357, 31%, 56%)

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.66:1 Super#081F1B on #BAF0E6
  • Aa13.66:1 Super#BAF0E6 on #081F1B
  • Aa9.97:1 Very good#BAF0E6 on #55242C
  • Aa9.97:1 Very good#55242C on #BAF0E6
  • Aa7.22:1 Very good#D398A7 on #081F1B
  • Aa7.22:1 Very good#081F1B on #D398A7
  • Aa5.27:1 Good#D398A7 on #55242C
  • Aa5.27:1 Good#55242C on #D398A7

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Foxy Pink to Rustling Leaves — https://swatchly.xyz/palette/d398a7-081f1b-baf0e6-256f69-55242c-b16b6e */
:root {
  --foxy-pink: #d398a7;
  --black-stallion: #081f1b;
  --fresh-breeze: #baf0e6;
  --pine-scented-lagoon: #256f69;
  --lonestar: #55242c;
  --rustling-leaves: #b16b6e;
}

Tailwind CSS v4

/* Foxy Pink to Rustling Leaves — https://swatchly.xyz/palette/d398a7-081f1b-baf0e6-256f69-55242c-b16b6e */
@theme {
  --color-foxy-pink: #d398a7;
  --color-foxy-pink-50: #fff6f8;
  --color-foxy-pink-100: #ffeaef;
  --color-foxy-pink-200: #fdd1db;
  --color-foxy-pink-300: #ecb9c6;
  --color-foxy-pink-400: #d398a7;
  --color-foxy-pink-500: #b47b8a;
  --color-foxy-pink-600: #95606e;
  --color-foxy-pink-700: #7a4956;
  --color-foxy-pink-800: #613642;
  --color-foxy-pink-900: #4b2832;
  --color-foxy-pink-950: #2f161e;
  --color-black-stallion: #081f1b;
  --color-black-stallion-50: #eaf9f5;
  --color-black-stallion-100: #dff0ec;
  --color-black-stallion-200: #c9ddd8;
  --color-black-stallion-300: #b0c7c1;
  --color-black-stallion-400: #8fa8a2;
  --color-black-stallion-500: #728b86;
  --color-black-stallion-600: #58706a;
  --color-black-stallion-700: #425853;
  --color-black-stallion-800: #31433f;
  --color-black-stallion-900: #23322f;
  --color-black-stallion-950: #081f1b;
  --color-fresh-breeze: #baf0e6;
  --color-fresh-breeze-50: #d7f6f0;
  --color-fresh-breeze-100: #baf0e6;
  --color-fresh-breeze-200: #b2dbd3;
  --color-fresh-breeze-300: #99c7be;
  --color-fresh-breeze-400: #77a9a0;
  --color-fresh-breeze-500: #5c8f86;
  --color-fresh-breeze-600: #44756d;
  --color-fresh-breeze-700: #315f58;
  --color-fresh-breeze-800: #224b44;
  --color-fresh-breeze-900: #173a35;
  --color-fresh-breeze-950: #0b2420;
  --color-pine-scented-lagoon: #256f69;
  --color-pine-scented-lagoon-50: #d8fefa;
  --color-pine-scented-lagoon-100: #c8f4ee;
  --color-pine-scented-lagoon-200: #abe0da;
  --color-pine-scented-lagoon-300: #8cc9c2;
  --color-pine-scented-lagoon-400: #64a9a2;
  --color-pine-scented-lagoon-500: #448c85;
  --color-pine-scented-lagoon-600: #256f69;
  --color-pine-scented-lagoon-700: #175953;
  --color-pine-scented-lagoon-800: #094642;
  --color-pine-scented-lagoon-900: #023733;
  --color-pine-scented-lagoon-950: #002220;
  --color-lonestar: #55242c;
  --color-lonestar-50: #fff1f2;
  --color-lonestar-100: #ffe3e6;
  --color-lonestar-200: #f9cace;
  --color-lonestar-300: #e6b1b6;
  --color-lonestar-400: #ca9097;
  --color-lonestar-500: #af757c;
  --color-lonestar-600: #925c63;
  --color-lonestar-700: #79474d;
  --color-lonestar-800: #62363c;
  --color-lonestar-900: #55242c;
  --color-lonestar-950: #33181c;
  --color-rustling-leaves: #b16b6e;
  --color-rustling-leaves-50: #fff0f0;
  --color-rustling-leaves-100: #ffe1e1;
  --color-rustling-leaves-200: #ffc4c5;
  --color-rustling-leaves-300: #ecaaac;
  --color-rustling-leaves-400: #ce888a;
  --color-rustling-leaves-500: #b16b6e;
  --color-rustling-leaves-600: #945256;
  --color-rustling-leaves-700: #793e42;
  --color-rustling-leaves-800: #622e32;
  --color-rustling-leaves-900: #4e2225;
  --color-rustling-leaves-950: #331316;
}

Similar palettes