Pastel Lavender to Partial Pink Color Palette

About this palette

Pastel Lavender to Partial Pink is a 4-color palette: #DD9FB9 (Pastel Lavender), #024A01 (British Racing Green), #008A8F (Dark Cyan), #FFEDF5 (Partial Pink). It mixes pink, green, turquoise, white tones and feels cool overall. The strongest text pairing is #024A01 on #FFEDF5 with a contrast ratio of 9.42:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Lavender	rgb(221, 159, 185)	hsl(335, 48%, 75%)
British Racing Green	rgb(2, 74, 1)	hsl(119, 97%, 15%)
Dark Cyan	rgb(0, 138, 143)	hsl(182, 100%, 28%)
Partial Pink	rgb(255, 237, 245)	hsl(333, 100%, 96%)

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.

Aa9.42:1 Very good#024A01 on #FFEDF5
Aa9.42:1 Very good#FFEDF5 on #024A01
Aa4.91:1 Good#DD9FB9 on #024A01
Aa4.91:1 Good#024A01 on #DD9FB9
Aa3.71:1 Poor#008A8F on #FFEDF5
Aa3.71:1 Poor#FFEDF5 on #008A8F

Color blindness preview

CSS variables

/* Pastel Lavender to Partial Pink — https://swatchly.xyz/palette/dd9fb9-024a01-008a8f-ffedf5 */
:root {
  --pastel-lavender: #dd9fb9;
  --british-racing-green: #024a01;
  --dark-cyan: #008a8f;
  --partial-pink: #ffedf5;
}

Tailwind CSS v4

/* Pastel Lavender to Partial Pink — https://swatchly.xyz/palette/dd9fb9-024a01-008a8f-ffedf5 */
@theme {
  --color-pastel-lavender: #dd9fb9;
  --color-pastel-lavender-50: #ffe7f0;
  --color-pastel-lavender-100: #ffd5e6;
  --color-pastel-lavender-200: #efbcd1;
  --color-pastel-lavender-300: #dd9fb9;
  --color-pastel-lavender-400: #be839c;
  --color-pastel-lavender-500: #a46a83;
  --color-pastel-lavender-600: #89536a;
  --color-pastel-lavender-700: #704056;
  --color-pastel-lavender-800: #5b3144;
  --color-pastel-lavender-900: #4a2536;
  --color-pastel-lavender-950: #301521;
  --color-british-racing-green: #024a01;
  --color-british-racing-green-50: #e1ffde;
  --color-british-racing-green-100: #d0f9cb;
  --color-british-racing-green-200: #b6e7b1;
  --color-british-racing-green-300: #99d193;
  --color-british-racing-green-400: #73b16e;
  --color-british-racing-green-500: #559450;
  --color-british-racing-green-600: #3a7736;
  --color-british-racing-green-700: #265e23;
  --color-british-racing-green-800: #024a01;
  --color-british-racing-green-900: #0e370c;
  --color-british-racing-green-950: #062205;
  --color-dark-cyan: #008a8f;
  --color-dark-cyan-50: #cefdff;
  --color-dark-cyan-100: #b4f4f6;
  --color-dark-cyan-200: #93e0e3;
  --color-dark-cyan-300: #6ec9cd;
  --color-dark-cyan-400: #3ca8ad;
  --color-dark-cyan-500: #008a8f;
  --color-dark-cyan-600: #006f73;
  --color-dark-cyan-700: #00595c;
  --color-dark-cyan-800: #004649;
  --color-dark-cyan-900: #003739;
  --color-dark-cyan-950: #002325;
  --color-partial-pink: #ffedf5;
  --color-partial-pink-50: #ffedf5;
  --color-partial-pink-100: #f1e6eb;
  --color-partial-pink-200: #dfd2d8;
  --color-partial-pink-300: #cabbc2;
  --color-partial-pink-400: #ac9ca3;
  --color-partial-pink-500: #918188;
  --color-partial-pink-600: #76676e;
  --color-partial-pink-700: #5e5157;
  --color-partial-pink-800: #4a3e44;
  --color-partial-pink-900: #3a3034;
  --color-partial-pink-950: #241d20;
}