First Crush to Plumbeous Color Palette

About this palette

First Crush to Plumbeous is a 5-color muted palette: #F3E4E9 (First Crush), #1B2620 (Swamp Thing), #5B4149 (Plum Intended), #BAA68C (Oakwood), #69748B (Plumbeous). It mixes white, gray, red, orange, blue tones and feels warm overall. The strongest text pairing is #F3E4E9 on #1B2620 with a contrast ratio of 12.71:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
First Crush	rgb(243, 228, 233)	hsl(340, 38%, 92%)
Swamp Thing	rgb(27, 38, 32)	hsl(147, 17%, 13%)
Plum Intended	rgb(91, 65, 73)	hsl(342, 17%, 31%)
Oakwood	rgb(186, 166, 140)	hsl(34, 25%, 64%)
Plumbeous	rgb(105, 116, 139)	hsl(221, 14%, 48%)

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.

Aa12.71:1 Super#F3E4E9 on #1B2620
Aa12.71:1 Super#1B2620 on #F3E4E9
Aa7.44:1 Very good#F3E4E9 on #5B4149
Aa7.44:1 Very good#5B4149 on #F3E4E9
Aa6.63:1 Good#1B2620 on #BAA68C
Aa6.63:1 Good#BAA68C on #1B2620
Aa3.88:1 Poor#5B4149 on #BAA68C
Aa3.88:1 Poor#BAA68C on #5B4149

Color blindness preview

CSS variables

/* First Crush to Plumbeous — https://swatchly.xyz/palette/f3e4e9-1b2620-5b4149-baa68c-69748b */
:root {
  --first-crush: #f3e4e9;
  --swamp-thing: #1b2620;
  --plum-intended: #5b4149;
  --oakwood: #baa68c;
  --plumbeous: #69748b;
}

Tailwind CSS v4

/* First Crush to Plumbeous — https://swatchly.xyz/palette/f3e4e9-1b2620-5b4149-baa68c-69748b */
@theme {
  --color-first-crush: #f3e4e9;
  --color-first-crush-50: #f9f0f3;
  --color-first-crush-100: #f3e4e9;
  --color-first-crush-200: #ddd2d6;
  --color-first-crush-300: #c8bbc0;
  --color-first-crush-400: #aa9ca1;
  --color-first-crush-500: #8f8186;
  --color-first-crush-600: #74676c;
  --color-first-crush-700: #5d5256;
  --color-first-crush-800: #493f43;
  --color-first-crush-900: #393033;
  --color-first-crush-950: #231d1f;
  --color-swamp-thing: #1b2620;
  --color-swamp-thing-50: #eff7f3;
  --color-swamp-thing-100: #e5eee8;
  --color-swamp-thing-200: #d0dad4;
  --color-swamp-thing-300: #b8c4bd;
  --color-swamp-thing-400: #98a59e;
  --color-swamp-thing-500: #7d8b83;
  --color-swamp-thing-600: #64716a;
  --color-swamp-thing-700: #4f5b54;
  --color-swamp-thing-800: #3e4842;
  --color-swamp-thing-900: #303934;
  --color-swamp-thing-950: #1b2620;
  --color-plum-intended: #5b4149;
  --color-plum-intended-50: #fff1f5;
  --color-plum-intended-100: #f9e5eb;
  --color-plum-intended-200: #e8d0d7;
  --color-plum-intended-300: #d5bac2;
  --color-plum-intended-400: #b89ba4;
  --color-plum-intended-500: #9e818a;
  --color-plum-intended-600: #846870;
  --color-plum-intended-700: #6d535b;
  --color-plum-intended-800: #5b4149;
  --color-plum-intended-900: #463238;
  --color-plum-intended-950: #2d1f23;
  --color-oakwood: #baa68c;
  --color-oakwood-50: #fff7ec;
  --color-oakwood-100: #faeddd;
  --color-oakwood-200: #e9dbc7;
  --color-oakwood-300: #d6c5af;
  --color-oakwood-400: #baa68c;
  --color-oakwood-500: #9c8970;
  --color-oakwood-600: #806d55;
  --color-oakwood-700: #665640;
  --color-oakwood-800: #50422f;
  --color-oakwood-900: #3e3221;
  --color-oakwood-950: #261e12;
  --color-plumbeous: #69748b;
  --color-plumbeous-50: #f0f5ff;
  --color-plumbeous-100: #e5edfd;
  --color-plumbeous-200: #d2dbed;
  --color-plumbeous-300: #bbc6db;
  --color-plumbeous-400: #9ca7bf;
  --color-plumbeous-500: #828da5;
  --color-plumbeous-600: #69748b;
  --color-plumbeous-700: #525c71;
  --color-plumbeous-800: #3f475a;
  --color-plumbeous-900: #2f3646;
  --color-plumbeous-950: #1c212d;
}