Start generating

Friendly Frost to Long Passionate Night color palette

C7FAFFFriendly FrostF7B15APeanut Butter Biscuit29AEBFAquarius7C5E00Coffee Adept5B3C65Long Passionate Night
Open in generator Export PNG, PDF, ASE…

About this palette

Friendly Frost to Long Passionate Night is a 5-color cool, vintage palette: #C7FAFF (Friendly Frost), #F7B15A (Peanut Butter Biscuit), #29AEBF (Aquarius), #7C5E00 (Coffee Adept), #5B3C65 (Long Passionate Night). It mixes white, orange, turquoise, brown, purple tones and feels cool overall. The strongest text pairing is #C7FAFF on #5B3C65 with a contrast ratio of 8.14:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Friendly Frostrgb(199, 250, 255)hsl(185, 100%, 89%)
Peanut Butter Biscuitrgb(247, 177, 90)hsl(33, 91%, 66%)
Aquariusrgb(41, 174, 191)hsl(187, 65%, 45%)
Coffee Adeptrgb(124, 94, 0)hsl(45, 100%, 24%)
Long Passionate Nightrgb(91, 60, 101)hsl(285, 25%, 32%)

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.

  • Aa8.14:1 Very good#C7FAFF on #5B3C65
  • Aa8.14:1 Very good#5B3C65 on #C7FAFF
  • Aa5.36:1 Good#C7FAFF on #7C5E00
  • Aa5.36:1 Good#7C5E00 on #C7FAFF
  • Aa5.00:1 Good#F7B15A on #5B3C65
  • Aa5.00:1 Good#5B3C65 on #F7B15A
  • Aa3.47:1 Poor#29AEBF on #5B3C65
  • Aa3.47:1 Poor#5B3C65 on #29AEBF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Friendly Frost to Long Passionate Night — https://swatchly.xyz/palette/c7faff-f7b15a-29aebf-7c5e00-5b3c65 */
:root {
  --friendly-frost: #c7faff;
  --peanut-butter-biscuit: #f7b15a;
  --aquarius: #29aebf;
  --coffee-adept: #7c5e00;
  --long-passionate-night: #5b3c65;
}

Tailwind CSS v4

/* Friendly Frost to Long Passionate Night — https://swatchly.xyz/palette/c7faff-f7b15a-29aebf-7c5e00-5b3c65 */
@theme {
  --color-friendly-frost: #c7faff;
  --color-friendly-frost-50: #e8fdff;
  --color-friendly-frost-100: #c7faff;
  --color-friendly-frost-200: #bfe2e6;
  --color-friendly-frost-300: #a3ccd0;
  --color-friendly-frost-400: #7fadb1;
  --color-friendly-frost-500: #619196;
  --color-friendly-frost-600: #47757a;
  --color-friendly-frost-700: #325d61;
  --color-friendly-frost-800: #23494d;
  --color-friendly-frost-900: #18393c;
  --color-friendly-frost-950: #0c2326;
  --color-peanut-butter-biscuit: #f7b15a;
  --color-peanut-butter-biscuit-50: #fff3e6;
  --color-peanut-butter-biscuit-100: #ffe7cc;
  --color-peanut-butter-biscuit-200: #ffcd95;
  --color-peanut-butter-biscuit-300: #f7b15a;
  --color-peanut-butter-biscuit-400: #d3923e;
  --color-peanut-butter-biscuit-500: #b8760c;
  --color-peanut-butter-biscuit-600: #955e00;
  --color-peanut-butter-biscuit-700: #774a00;
  --color-peanut-butter-biscuit-800: #5e3900;
  --color-peanut-butter-biscuit-900: #492b00;
  --color-peanut-butter-biscuit-950: #2f1a00;
  --color-aquarius: #29aebf;
  --color-aquarius-50: #dafaff;
  --color-aquarius-100: #b5f5ff;
  --color-aquarius-200: #8ee3f0;
  --color-aquarius-300: #68cddc;
  --color-aquarius-400: #29aebf;
  --color-aquarius-500: #0092a2;
  --color-aquarius-600: #007683;
  --color-aquarius-700: #005e68;
  --color-aquarius-800: #004a52;
  --color-aquarius-900: #003940;
  --color-aquarius-950: #00252a;
  --color-coffee-adept: #7c5e00;
  --color-coffee-adept-50: #fff4dc;
  --color-coffee-adept-100: #fce7b9;
  --color-coffee-adept-200: #ead199;
  --color-coffee-adept-300: #d5b978;
  --color-coffee-adept-400: #b6974e;
  --color-coffee-adept-500: #997a2c;
  --color-coffee-adept-600: #7c5e00;
  --color-coffee-adept-700: #634a00;
  --color-coffee-adept-800: #4e3a00;
  --color-coffee-adept-900: #3c2c00;
  --color-coffee-adept-950: #261b00;
  --color-long-passionate-night: #5b3c65;
  --color-long-passionate-night-50: #fbf1ff;
  --color-long-passionate-night-100: #f8e3ff;
  --color-long-passionate-night-200: #e7ccf0;
  --color-long-passionate-night-300: #d4b6de;
  --color-long-passionate-night-400: #b896c3;
  --color-long-passionate-night-500: #9e7ca9;
  --color-long-passionate-night-600: #84638e;
  --color-long-passionate-night-700: #6d4f77;
  --color-long-passionate-night-800: #5b3c65;
  --color-long-passionate-night-900: #462f4d;
  --color-long-passionate-night-950: #2d1c33;
}

Similar palettes