English Manor to Beige and Sage color palette

6881A8English Manor CCDBFDIcy Plains 7C5272Dr Who 2B321FMarshland BBC5A0Beige and Sage

About this palette

English Manor to Beige and Sage is a 5-color muted, cool palette: #6881A8 (English Manor), #CCDBFD (Icy Plains), #7C5272 (Dr Who), #2B321F (Marshland), #BBC5A0 (Beige and Sage). It mixes blue, pink, gray, green tones and feels cool overall. The strongest text pairing is #CCDBFD on #2B321F with a contrast ratio of 9.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
English Manor	rgb(104, 129, 168)	hsl(217, 27%, 53%)
Icy Plains	rgb(204, 219, 253)	hsl(222, 92%, 90%)
Dr Who	rgb(124, 82, 114)	hsl(314, 20%, 40%)
Marshland	rgb(43, 50, 31)	hsl(82, 23%, 16%)
Beige and Sage	rgb(187, 197, 160)	hsl(76, 24%, 70%)

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.

Aa9.58:1 Very good#CCDBFD on #2B321F
Aa9.58:1 Very good#2B321F on #CCDBFD
Aa7.35:1 Very good#2B321F on #BBC5A0
Aa7.35:1 Very good#BBC5A0 on #2B321F
Aa4.57:1 Good#CCDBFD on #7C5272
Aa4.57:1 Good#7C5272 on #CCDBFD
Aa3.51:1 Poor#7C5272 on #BBC5A0
Aa3.51:1 Poor#BBC5A0 on #7C5272

Color blindness preview

CSS variables

/* English Manor to Beige and Sage — https://swatchly.xyz/palette/6881a8-ccdbfd-7c5272-2b321f-bbc5a0 */
:root {
  --english-manor: #6881a8;
  --icy-plains: #ccdbfd;
  --dr-who: #7c5272;
  --marshland: #2b321f;
  --beige-and-sage: #bbc5a0;
}

Tailwind CSS v4

/* English Manor to Beige and Sage — https://swatchly.xyz/palette/6881a8-ccdbfd-7c5272-2b321f-bbc5a0 */
@theme {
  --color-english-manor: #6881a8;
  --color-english-manor-50: #eef4ff;
  --color-english-manor-100: #dceaff;
  --color-english-manor-200: #c1d6f6;
  --color-english-manor-300: #a6bee2;
  --color-english-manor-400: #849dc5;
  --color-english-manor-500: #6881a8;
  --color-english-manor-600: #50688c;
  --color-english-manor-700: #3d5273;
  --color-english-manor-800: #2e405d;
  --color-english-manor-900: #22314a;
  --color-english-manor-950: #131f30;
  --color-icy-plains: #ccdbfd;
  --color-icy-plains-50: #f4f8ff;
  --color-icy-plains-100: #e7eeff;
  --color-icy-plains-200: #ccdbfd;
  --color-icy-plains-300: #b7c4e0;
  --color-icy-plains-400: #96a4c2;
  --color-icy-plains-500: #7a88a7;
  --color-icy-plains-600: #606c8a;
  --color-icy-plains-700: #4a5570;
  --color-icy-plains-800: #384259;
  --color-icy-plains-900: #2a3246;
  --color-icy-plains-950: #191f2d;
  --color-dr-who: #7c5272;
  --color-dr-who-50: #fff0fb;
  --color-dr-who-100: #fedef5;
  --color-dr-who-200: #ecc7e2;
  --color-dr-who-300: #d6adcb;
  --color-dr-who-400: #b78aab;
  --color-dr-who-500: #996d8e;
  --color-dr-who-600: #7c5272;
  --color-dr-who-700: #64405b;
  --color-dr-who-800: #4f3048;
  --color-dr-who-900: #3f2438;
  --color-dr-who-950: #281524;
  --color-marshland: #2b321f;
  --color-marshland-50: #f2f8ea;
  --color-marshland-100: #e8eedf;
  --color-marshland-200: #d4dbc9;
  --color-marshland-300: #bcc4b0;
  --color-marshland-400: #9ca58f;
  --color-marshland-500: #808872;
  --color-marshland-600: #656d58;
  --color-marshland-700: #4e5643;
  --color-marshland-800: #3c4232;
  --color-marshland-900: #2b321f;
  --color-marshland-950: #1a1e14;
  --color-beige-and-sage: #bbc5a0;
  --color-beige-and-sage-50: #f2f8e3;
  --color-beige-and-sage-100: #e7eed6;
  --color-beige-and-sage-200: #d3dbbf;
  --color-beige-and-sage-300: #bbc5a0;
  --color-beige-and-sage-400: #9ca583;
  --color-beige-and-sage-500: #818a67;
  --color-beige-and-sage-600: #67704f;
  --color-beige-and-sage-700: #51593b;
  --color-beige-and-sage-800: #3f462b;
  --color-beige-and-sage-900: #30361f;
  --color-beige-and-sage-950: #1d2111;
}