Pastel Pink to Twinkle Night Color Palette

About this palette

Pastel Pink to Twinkle Night is a 4-color vintage palette: #E0A9A8 (Pastel Pink), #FDEAB2 (Solar), #004650 (Cold and Dark), #5A6DA1 (Twinkle Night). It mixes pink, yellow, turquoise, blue tones and feels balanced overall. The strongest text pairing is #FDEAB2 on #004650 with a contrast ratio of 8.83:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Pink	rgb(224, 169, 168)	hsl(1, 47%, 77%)
Solar	rgb(253, 234, 178)	hsl(45, 95%, 85%)
Cold and Dark	rgb(0, 70, 80)	hsl(188, 100%, 16%)
Twinkle Night	rgb(90, 109, 161)	hsl(224, 28%, 49%)

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.83:1 Very good#FDEAB2 on #004650
Aa8.83:1 Very good#004650 on #FDEAB2
Aa5.23:1 Good#E0A9A8 on #004650
Aa5.23:1 Good#004650 on #E0A9A8
Aa4.25:1 Poor#FDEAB2 on #5A6DA1
Aa4.25:1 Poor#5A6DA1 on #FDEAB2

Color blindness preview

CSS variables

/* Pastel Pink to Twinkle Night — https://swatchly.xyz/palette/e0a9a8-fdeab2-004650-5a6da1 */
:root {
  --pastel-pink: #e0a9a8;
  --solar: #fdeab2;
  --cold-and-dark: #004650;
  --twinkle-night: #5a6da1;
}

Tailwind CSS v4

/* Pastel Pink to Twinkle Night — https://swatchly.xyz/palette/e0a9a8-fdeab2-004650-5a6da1 */
@theme {
  --color-pastel-pink: #e0a9a8;
  --color-pastel-pink-50: #ffeceb;
  --color-pastel-pink-100: #ffdcdb;
  --color-pastel-pink-200: #f1c4c3;
  --color-pastel-pink-300: #e0a9a8;
  --color-pastel-pink-400: #c08c8b;
  --color-pastel-pink-500: #a57271;
  --color-pastel-pink-600: #895959;
  --color-pastel-pink-700: #704545;
  --color-pastel-pink-800: #5b3535;
  --color-pastel-pink-900: #482829;
  --color-pastel-pink-950: #2f1818;
  --color-solar: #fdeab2;
  --color-solar-50: #fff5d6;
  --color-solar-100: #fdeab2;
  --color-solar-200: #e4d7ae;
  --color-solar-300: #d0c092;
  --color-solar-400: #b2a06d;
  --color-solar-500: #968550;
  --color-solar-600: #7b6a37;
  --color-solar-700: #635424;
  --color-solar-800: #4f4116;
  --color-solar-900: #3d320c;
  --color-solar-950: #271e04;
  --color-cold-and-dark: #004650;
  --color-cold-and-dark-50: #e2faff;
  --color-cold-and-dark-100: #cff3fa;
  --color-cold-and-dark-200: #b5e0e9;
  --color-cold-and-dark-300: #98cad4;
  --color-cold-and-dark-400: #72aab5;
  --color-cold-and-dark-500: #548e99;
  --color-cold-and-dark-600: #3a727c;
  --color-cold-and-dark-700: #255963;
  --color-cold-and-dark-800: #004650;
  --color-cold-and-dark-900: #0d353c;
  --color-cold-and-dark-950: #052125;
  --color-twinkle-night: #5a6da1;
  --color-twinkle-night-50: #f1f5ff;
  --color-twinkle-night-100: #e4ecff;
  --color-twinkle-night-200: #c9d8ff;
  --color-twinkle-night-300: #afc2f2;
  --color-twinkle-night-400: #8ea2d7;
  --color-twinkle-night-500: #7387bd;
  --color-twinkle-night-600: #5a6da1;
  --color-twinkle-night-700: #455685;
  --color-twinkle-night-800: #34426b;
  --color-twinkle-night-900: #263255;
  --color-twinkle-night-950: #161f38;
}