Start generating

Puff of Pink to Way Beyond the Blue color palette

FFD1F0Puff of Pink70C28AExhilarating Green102B41Eternal Darkness7C4600Hazelnut Chocolate3886D5Way Beyond the Blue
Open in generator Export PNG, PDF, ASE…

About this palette

Puff of Pink to Way Beyond the Blue is a 5-color cool, vintage palette: #FFD1F0 (Puff of Pink), #70C28A (Exhilarating Green), #102B41 (Eternal Darkness), #7C4600 (Hazelnut Chocolate), #3886D5 (Way Beyond the Blue). It mixes pink, green, blue, brown tones and feels cool overall. The strongest text pairing is #FFD1F0 on #102B41 with a contrast ratio of 10.83:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Puff of Pinkrgb(255, 209, 240)hsl(320, 100%, 91%)
Exhilarating Greenrgb(112, 194, 138)hsl(139, 40%, 60%)
Eternal Darknessrgb(16, 43, 65)hsl(207, 60%, 16%)
Hazelnut Chocolatergb(124, 70, 0)hsl(34, 100%, 24%)
Way Beyond the Bluergb(56, 134, 213)hsl(210, 65%, 53%)

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.

  • Aa10.83:1 Very good#FFD1F0 on #102B41
  • Aa10.83:1 Very good#102B41 on #FFD1F0
  • Aa6.77:1 Good#70C28A on #102B41
  • Aa6.77:1 Good#102B41 on #70C28A
  • Aa5.72:1 Good#FFD1F0 on #7C4600
  • Aa5.72:1 Good#7C4600 on #FFD1F0
  • Aa3.84:1 Poor#102B41 on #3886D5
  • Aa3.84:1 Poor#3886D5 on #102B41

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Puff of Pink to Way Beyond the Blue — https://swatchly.xyz/palette/ffd1f0-70c28a-102b41-7c4600-3886d5 */
:root {
  --puff-of-pink: #ffd1f0;
  --exhilarating-green: #70c28a;
  --eternal-darkness: #102b41;
  --hazelnut-chocolate: #7c4600;
  --way-beyond-the-blue: #3886d5;
}

Tailwind CSS v4

/* Puff of Pink to Way Beyond the Blue — https://swatchly.xyz/palette/ffd1f0-70c28a-102b41-7c4600-3886d5 */
@theme {
  --color-puff-of-pink: #ffd1f0;
  --color-puff-of-pink-50: #fffafd;
  --color-puff-of-pink-100: #ffedf9;
  --color-puff-of-pink-200: #ffd1f0;
  --color-puff-of-pink-300: #e1bcd5;
  --color-puff-of-pink-400: #c299b5;
  --color-puff-of-pink-500: #a57c98;
  --color-puff-of-pink-600: #88607b;
  --color-puff-of-pink-700: #6d4962;
  --color-puff-of-pink-800: #56374c;
  --color-puff-of-pink-900: #43293b;
  --color-puff-of-pink-950: #2b1825;
  --color-exhilarating-green: #70c28a;
  --color-exhilarating-green-50: #ecfff1;
  --color-exhilarating-green-100: #d1ffdd;
  --color-exhilarating-green-200: #b8efc7;
  --color-exhilarating-green-300: #9cddae;
  --color-exhilarating-green-400: #70c28a;
  --color-exhilarating-green-500: #52a36e;
  --color-exhilarating-green-600: #338652;
  --color-exhilarating-green-700: #1a6b3c;
  --color-exhilarating-green-800: #05542b;
  --color-exhilarating-green-900: #00401e;
  --color-exhilarating-green-950: #002710;
  --color-eternal-darkness: #102b41;
  --color-eternal-darkness-50: #edf6ff;
  --color-eternal-darkness-100: #dbeeff;
  --color-eternal-darkness-200: #c3dbf0;
  --color-eternal-darkness-300: #aac5dd;
  --color-eternal-darkness-400: #88a5c0;
  --color-eternal-darkness-500: #6e8ca6;
  --color-eternal-darkness-600: #57738c;
  --color-eternal-darkness-700: #435e75;
  --color-eternal-darkness-800: #344c61;
  --color-eternal-darkness-900: #293e50;
  --color-eternal-darkness-950: #102b41;
  --color-hazelnut-chocolate: #7c4600;
  --color-hazelnut-chocolate-50: #fff3e8;
  --color-hazelnut-chocolate-100: #ffe6d1;
  --color-hazelnut-chocolate-200: #fccda4;
  --color-hazelnut-chocolate-300: #eab585;
  --color-hazelnut-chocolate-400: #cd945e;
  --color-hazelnut-chocolate-500: #b1773f;
  --color-hazelnut-chocolate-600: #945d25;
  --color-hazelnut-chocolate-700: #7c4600;
  --color-hazelnut-chocolate-800: #623601;
  --color-hazelnut-chocolate-900: #4c2900;
  --color-hazelnut-chocolate-950: #311800;
  --color-way-beyond-the-blue: #3886d5;
  --color-way-beyond-the-blue-50: #edf6ff;
  --color-way-beyond-the-blue-100: #dbecff;
  --color-way-beyond-the-blue-200: #b8d9ff;
  --color-way-beyond-the-blue-300: #8dc3ff;
  --color-way-beyond-the-blue-400: #59a3f1;
  --color-way-beyond-the-blue-500: #3886d5;
  --color-way-beyond-the-blue-600: #1b6bb6;
  --color-way-beyond-the-blue-700: #005498;
  --color-way-beyond-the-blue-800: #004279;
  --color-way-beyond-the-blue-900: #00325f;
  --color-way-beyond-the-blue-950: #001f3f;
}

Similar palettes