Dark & Stormy to Berry Jam Color Palette

About this palette

Dark & Stormy to Berry Jam is a 5-color muted, vintage palette: #383B51 (Dark & Stormy), #C6C1A8 (Moth), #797759 (Boa), #A6A886 (Olive Tree), #605F85 (Berry Jam). It mixes purple, gray, yellow tones and feels balanced overall. The strongest text pairing is #383B51 on #C6C1A8 with a contrast ratio of 6.06:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark & Stormy	rgb(56, 59, 81)	hsl(233, 18%, 27%)
Moth	rgb(198, 193, 168)	hsl(50, 21%, 72%)
Boa	rgb(121, 119, 89)	hsl(56, 15%, 41%)
Olive Tree	rgb(166, 168, 134)	hsl(64, 16%, 59%)
Berry Jam	rgb(96, 95, 133)	hsl(242, 17%, 45%)

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.

Aa6.06:1 Good#383B51 on #C6C1A8
Aa6.06:1 Good#C6C1A8 on #383B51
Aa4.48:1 Poor#383B51 on #A6A886
Aa4.48:1 Poor#A6A886 on #383B51
Aa3.34:1 Poor#C6C1A8 on #605F85
Aa3.34:1 Poor#605F85 on #C6C1A8

Color blindness preview

CSS variables

/* Dark & Stormy to Berry Jam — https://swatchly.xyz/palette/383b51-c6c1a8-797759-a6a886-605f85 */
:root {
  --dark-stormy: #383b51;
  --moth: #c6c1a8;
  --boa: #797759;
  --olive-tree: #a6a886;
  --berry-jam: #605f85;
}

Tailwind CSS v4

/* Dark & Stormy to Berry Jam — https://swatchly.xyz/palette/383b51-c6c1a8-797759-a6a886-605f85 */
@theme {
  --color-dark-stormy: #383b51;
  --color-dark-stormy-50: #f3f4ff;
  --color-dark-stormy-100: #e7eafb;
  --color-dark-stormy-200: #d3d6eb;
  --color-dark-stormy-300: #babed5;
  --color-dark-stormy-400: #9a9eb7;
  --color-dark-stormy-500: #7d819a;
  --color-dark-stormy-600: #62667e;
  --color-dark-stormy-700: #4c4f64;
  --color-dark-stormy-800: #383b51;
  --color-dark-stormy-900: #2b2d3c;
  --color-dark-stormy-950: #1a1b26;
  --color-moth: #c6c1a8;
  --color-moth-50: #f8f5e7;
  --color-moth-100: #eeebdb;
  --color-moth-200: #dbd8c5;
  --color-moth-300: #c6c1a8;
  --color-moth-400: #a6a28a;
  --color-moth-500: #8b866f;
  --color-moth-600: #716c56;
  --color-moth-700: #5a5641;
  --color-moth-800: #464331;
  --color-moth-900: #363324;
  --color-moth-950: #221f15;
  --color-boa: #797759;
  --color-boa-50: #f7f6e4;
  --color-boa-100: #efeeda;
  --color-boa-200: #deddc5;
  --color-boa-300: #c9c8ad;
  --color-boa-400: #acaa8c;
  --color-boa-500: #929072;
  --color-boa-600: #797759;
  --color-boa-700: #605e43;
  --color-boa-800: #4b4931;
  --color-boa-900: #3a3823;
  --color-boa-950: #242314;
  --color-olive-tree: #a6a886;
  --color-olive-tree-50: #f7f8e5;
  --color-olive-tree-100: #eeefd9;
  --color-olive-tree-200: #dbdcc3;
  --color-olive-tree-300: #c5c7a9;
  --color-olive-tree-400: #a6a886;
  --color-olive-tree-500: #8a8c6b;
  --color-olive-tree-600: #6f7151;
  --color-olive-tree-700: #58593c;
  --color-olive-tree-800: #44452c;
  --color-olive-tree-900: #343520;
  --color-olive-tree-950: #202011;
  --color-berry-jam: #605f85;
  --color-berry-jam-50: #f4f4ff;
  --color-berry-jam-100: #e7e7ff;
  --color-berry-jam-200: #d1d1f2;
  --color-berry-jam-300: #b8b8de;
  --color-berry-jam-400: #9797bf;
  --color-berry-jam-500: #7b7aa2;
  --color-berry-jam-600: #605f85;
  --color-berry-jam-700: #4c4b6c;
  --color-berry-jam-800: #3b3a56;
  --color-berry-jam-900: #2d2c44;
  --color-berry-jam-950: #1b1b2c;
}