Bitter Melon to Storm Is Coming color palette

D3D1B4Bitter Melon 7AB0C7Glacier 4492B2Enchanted Well 805742Root Beer 3C355FStorm Is Coming

About this palette

Bitter Melon to Storm Is Coming is a 5-color cool, vintage palette: #D3D1B4 (Bitter Melon), #7AB0C7 (Glacier), #4492B2 (Enchanted Well), #805742 (Root Beer), #3C355F (Storm Is Coming). It mixes yellow, blue, brown, purple tones and feels cool overall. The strongest text pairing is #D3D1B4 on #3C355F with a contrast ratio of 7.26:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bitter Melon	rgb(211, 209, 180)	hsl(56, 26%, 77%)
Glacier	rgb(122, 176, 199)	hsl(198, 41%, 63%)
Enchanted Well	rgb(68, 146, 178)	hsl(197, 45%, 48%)
Root Beer	rgb(128, 87, 66)	hsl(20, 32%, 38%)
Storm Is Coming	rgb(60, 53, 95)	hsl(250, 28%, 29%)

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.26:1 Very good#D3D1B4 on #3C355F
Aa7.26:1 Very good#3C355F on #D3D1B4
Aa4.75:1 Good#7AB0C7 on #3C355F
Aa4.75:1 Good#3C355F on #7AB0C7
Aa4.03:1 Poor#D3D1B4 on #805742
Aa4.03:1 Poor#805742 on #D3D1B4
Aa3.21:1 Poor#4492B2 on #3C355F
Aa3.21:1 Poor#3C355F on #4492B2

Color blindness preview

CSS variables

/* Bitter Melon to Storm Is Coming — https://swatchly.xyz/palette/d3d1b4-7ab0c7-4492b2-805742-3c355f */
:root {
  --bitter-melon: #d3d1b4;
  --glacier: #7ab0c7;
  --enchanted-well: #4492b2;
  --root-beer: #805742;
  --storm-is-coming: #3c355f;
}

Tailwind CSS v4

/* Bitter Melon to Storm Is Coming — https://swatchly.xyz/palette/d3d1b4-7ab0c7-4492b2-805742-3c355f */
@theme {
  --color-bitter-melon: #d3d1b4;
  --color-bitter-melon-50: #f2f1df;
  --color-bitter-melon-100: #e7e5d2;
  --color-bitter-melon-200: #d3d1b4;
  --color-bitter-melon-300: #bdbca3;
  --color-bitter-melon-400: #a09e83;
  --color-bitter-melon-500: #868469;
  --color-bitter-melon-600: #6d6b51;
  --color-bitter-melon-700: #57553e;
  --color-bitter-melon-800: #45432f;
  --color-bitter-melon-900: #353422;
  --color-bitter-melon-950: #212013;
  --color-glacier: #7ab0c7;
  --color-glacier-50: #edf9ff;
  --color-glacier-100: #d9f3ff;
  --color-glacier-200: #bbe2f4;
  --color-glacier-300: #a1cee1;
  --color-glacier-400: #7ab0c7;
  --color-glacier-500: #5e93a9;
  --color-glacier-600: #43778c;
  --color-glacier-700: #2e5f72;
  --color-glacier-800: #1e4a5b;
  --color-glacier-900: #133947;
  --color-glacier-950: #08232d;
  --color-enchanted-well: #4492b2;
  --color-enchanted-well-50: #eaf8ff;
  --color-enchanted-well-100: #d4f1ff;
  --color-enchanted-well-200: #aae2fb;
  --color-enchanted-well-300: #8ccce9;
  --color-enchanted-well-400: #64adcd;
  --color-enchanted-well-500: #4492b2;
  --color-enchanted-well-600: #277695;
  --color-enchanted-well-700: #0e5f7a;
  --color-enchanted-well-800: #004a62;
  --color-enchanted-well-900: #00394c;
  --color-enchanted-well-950: #002331;
  --color-root-beer: #805742;
  --color-root-beer-50: #fff2ec;
  --color-root-beer-100: #ffe3d5;
  --color-root-beer-200: #f0cbb9;
  --color-root-beer-300: #dab19d;
  --color-root-beer-400: #bb8f79;
  --color-root-beer-500: #9d735d;
  --color-root-beer-600: #805742;
  --color-root-beer-700: #674432;
  --color-root-beer-800: #523424;
  --color-root-beer-900: #41271a;
  --color-root-beer-950: #2a170e;
  --color-storm-is-coming: #3c355f;
  --color-storm-is-coming-50: #f5f4ff;
  --color-storm-is-coming-100: #eae8ff;
  --color-storm-is-coming-200: #d6d2f9;
  --color-storm-is-coming-300: #bebae5;
  --color-storm-is-coming-400: #9e98c8;
  --color-storm-is-coming-500: #827cab;
  --color-storm-is-coming-600: #67608d;
  --color-storm-is-coming-700: #4f4a71;
  --color-storm-is-coming-800: #3c355f;
  --color-storm-is-coming-900: #2e2946;
  --color-storm-is-coming-950: #1b182c;
}