Dill to Pitch Black Color Palette

About this palette

Dill to Pitch Black is a 5-color muted palette: #737751 (Dill), #97B0C9 (Lost in Time), #909986 (Swamp Sessions), #E6D2D9 (Ephemeral Red), #4D3C42 (Pitch Black). It mixes green, blue, gray tones and feels balanced overall. The strongest text pairing is #E6D2D9 on #4D3C42 with a contrast ratio of 7.15:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dill	rgb(115, 119, 81)	hsl(66, 19%, 39%)
Lost in Time	rgb(151, 176, 201)	hsl(210, 32%, 69%)
Swamp Sessions	rgb(144, 153, 134)	hsl(88, 9%, 56%)
Ephemeral Red	rgb(230, 210, 217)	hsl(339, 29%, 86%)
Pitch Black	rgb(77, 60, 66)	hsl(339, 12%, 27%)

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.15:1 Very good#E6D2D9 on #4D3C42
Aa7.15:1 Very good#4D3C42 on #E6D2D9
Aa4.59:1 Good#97B0C9 on #4D3C42
Aa4.59:1 Good#4D3C42 on #97B0C9
Aa3.47:1 Poor#909986 on #4D3C42
Aa3.47:1 Poor#4D3C42 on #909986
Aa3.25:1 Poor#737751 on #E6D2D9
Aa3.25:1 Poor#E6D2D9 on #737751

Color blindness preview

CSS variables

/* Dill to Pitch Black — https://swatchly.xyz/palette/737751-97b0c9-909986-e6d2d9-4d3c42 */
:root {
  --dill: #737751;
  --lost-in-time: #97b0c9;
  --swamp-sessions: #909986;
  --ephemeral-red: #e6d2d9;
  --pitch-black: #4d3c42;
}

Tailwind CSS v4

/* Dill to Pitch Black — https://swatchly.xyz/palette/737751-97b0c9-909986-e6d2d9-4d3c42 */
@theme {
  --color-dill: #737751;
  --color-dill-50: #f5f8e1;
  --color-dill-100: #ecefd6;
  --color-dill-200: #dadec0;
  --color-dill-300: #c5c9a7;
  --color-dill-400: #a6ab85;
  --color-dill-500: #8c916a;
  --color-dill-600: #737751;
  --color-dill-700: #5b5f3c;
  --color-dill-800: #474a2b;
  --color-dill-900: #36391e;
  --color-dill-950: #212310;
  --color-lost-in-time: #97b0c9;
  --color-lost-in-time-50: #f5faff;
  --color-lost-in-time-100: #e7f3ff;
  --color-lost-in-time-200: #d0e2f4;
  --color-lost-in-time-300: #b9cde2;
  --color-lost-in-time-400: #97b0c9;
  --color-lost-in-time-500: #7a92aa;
  --color-lost-in-time-600: #5e768d;
  --color-lost-in-time-700: #475d72;
  --color-lost-in-time-800: #35485a;
  --color-lost-in-time-900: #263645;
  --color-lost-in-time-950: #15202b;
  --color-swamp-sessions: #909986;
  --color-swamp-sessions-50: #edf3e7;
  --color-swamp-sessions-100: #e1e7da;
  --color-swamp-sessions-200: #cad2c2;
  --color-swamp-sessions-300: #b1baa8;
  --color-swamp-sessions-400: #909986;
  --color-swamp-sessions-500: #77806d;
  --color-swamp-sessions-600: #5f6856;
  --color-swamp-sessions-700: #4c5343;
  --color-swamp-sessions-800: #3b4134;
  --color-swamp-sessions-900: #2e3328;
  --color-swamp-sessions-950: #1d2118;
  --color-ephemeral-red: #e6d2d9;
  --color-ephemeral-red-50: #fdf2f6;
  --color-ephemeral-red-100: #f4e8ec;
  --color-ephemeral-red-200: #e6d2d9;
  --color-ephemeral-red-300: #cdbcc2;
  --color-ephemeral-red-400: #ae9ca3;
  --color-ephemeral-red-500: #938187;
  --color-ephemeral-red-600: #78676d;
  --color-ephemeral-red-700: #605056;
  --color-ephemeral-red-800: #4c3e43;
  --color-ephemeral-red-900: #3b2f33;
  --color-ephemeral-red-950: #251d20;
  --color-pitch-black: #4d3c42;
  --color-pitch-black-50: #fef1f5;
  --color-pitch-black-100: #f5e7eb;
  --color-pitch-black-200: #e3d3d8;
  --color-pitch-black-300: #cdbbc1;
  --color-pitch-black-400: #af9ba2;
  --color-pitch-black-500: #938086;
  --color-pitch-black-600: #78656c;
  --color-pitch-black-700: #604f55;
  --color-pitch-black-800: #4d3c42;
  --color-pitch-black-900: #3a2e32;
  --color-pitch-black-950: #251c1f;
}