Wave to Paid in Full Color Palette

About this palette

Wave to Paid in Full is a 5-color muted, warm, vintage palette: #9ECCDE (Wave), #7C5873 (Dr Who), #868254 (Iguana), #173746 (Into the Night), #99906C (Paid in Full). It mixes blue, pink, yellow tones and feels warm overall. The strongest text pairing is #9ECCDE on #173746 with a contrast ratio of 7.27:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wave	rgb(158, 204, 222)	hsl(197, 49%, 75%)
Dr Who	rgb(124, 88, 115)	hsl(315, 17%, 42%)
Iguana	rgb(134, 130, 84)	hsl(55, 23%, 43%)
Into the Night	rgb(23, 55, 70)	hsl(199, 51%, 18%)
Paid in Full	rgb(153, 144, 108)	hsl(48, 18%, 51%)

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.

Aa7.27:1 Very good#9ECCDE on #173746
Aa7.27:1 Very good#173746 on #9ECCDE
Aa3.93:1 Poor#173746 on #99906C
Aa3.93:1 Poor#99906C on #173746
Aa3.47:1 Poor#9ECCDE on #7C5873
Aa3.47:1 Poor#7C5873 on #9ECCDE
Aa3.19:1 Poor#868254 on #173746
Aa3.19:1 Poor#173746 on #868254

Color blindness preview

CSS variables

/* Wave to Paid in Full — https://swatchly.xyz/palette/9eccde-7c5873-868254-173746-99906c */
:root {
  --wave: #9eccde;
  --dr-who: #7c5873;
  --iguana: #868254;
  --into-the-night: #173746;
  --paid-in-full: #99906c;
}

Tailwind CSS v4

/* Wave to Paid in Full — https://swatchly.xyz/palette/9eccde-7c5873-868254-173746-99906c */
@theme {
  --color-wave: #9eccde;
  --color-wave-50: #ebf9ff;
  --color-wave-100: #d7f2fe;
  --color-wave-200: #bfe0ed;
  --color-wave-300: #9eccde;
  --color-wave-400: #81abbc;
  --color-wave-500: #638fa0;
  --color-wave-600: #497484;
  --color-wave-700: #355c6b;
  --color-wave-800: #254855;
  --color-wave-900: #1a3742;
  --color-wave-950: #0d222a;
  --color-dr-who: #7c5873;
  --color-dr-who-50: #fff0fb;
  --color-dr-who-100: #fbe1f4;
  --color-dr-who-200: #eacae1;
  --color-dr-who-300: #d4b1cb;
  --color-dr-who-400: #b58fab;
  --color-dr-who-500: #99738f;
  --color-dr-who-600: #7c5873;
  --color-dr-who-700: #64445c;
  --color-dr-who-800: #4f3449;
  --color-dr-who-900: #3e2739;
  --color-dr-who-950: #281724;
  --color-iguana: #868254;
  --color-iguana-50: #f8f6da;
  --color-iguana-100: #edebcc;
  --color-iguana-200: #d9d6b1;
  --color-iguana-300: #c2bf95;
  --color-iguana-400: #a29e71;
  --color-iguana-500: #868254;
  --color-iguana-600: #6d693d;
  --color-iguana-700: #57532b;
  --color-iguana-800: #44411e;
  --color-iguana-900: #353214;
  --color-iguana-950: #211f09;
  --color-into-the-night: #173746;
  --color-into-the-night-50: #eaf8ff;
  --color-into-the-night-100: #d9effb;
  --color-into-the-night-200: #c2dcea;
  --color-into-the-night-300: #a8c6d6;
  --color-into-the-night-400: #86a7b8;
  --color-into-the-night-500: #6a8c9d;
  --color-into-the-night-600: #517181;
  --color-into-the-night-700: #3c5a69;
  --color-into-the-night-800: #2c4653;
  --color-into-the-night-900: #173746;
  --color-into-the-night-950: #122229;
  --color-paid-in-full: #99906c;
  --color-paid-in-full-50: #fcf7e3;
  --color-paid-in-full-100: #f5efd8;
  --color-paid-in-full-200: #e4ddc2;
  --color-paid-in-full-300: #d0c8a9;
  --color-paid-in-full-400: #b3aa88;
  --color-paid-in-full-500: #99906c;
  --color-paid-in-full-600: #7c7451;
  --color-paid-in-full-700: #635b3b;
  --color-paid-in-full-800: #4e472a;
  --color-paid-in-full-900: #3c361d;
  --color-paid-in-full-950: #25200f;
}