Grauzone to Ranch House Color Palette

About this palette

Grauzone to Ranch House is a 4-color muted palette: #88A4B3 (Grauzone), #E6D6EB (Scented Spring), #272C24 (Marshland), #7B665A (Ranch House). It mixes blue, gray tones and feels cool overall. The strongest text pairing is #E6D6EB on #272C24 with a contrast ratio of 10.31:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grauzone	rgb(136, 164, 179)	hsl(201, 22%, 62%)
Scented Spring	rgb(230, 214, 235)	hsl(286, 34%, 88%)
Marshland	rgb(39, 44, 36)	hsl(97, 10%, 16%)
Ranch House	rgb(123, 102, 90)	hsl(22, 15%, 42%)

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.

Aa10.31:1 Very good#E6D6EB on #272C24
Aa10.31:1 Very good#272C24 on #E6D6EB
Aa5.44:1 Good#88A4B3 on #272C24
Aa5.44:1 Good#272C24 on #88A4B3
Aa3.90:1 Poor#E6D6EB on #7B665A
Aa3.90:1 Poor#7B665A on #E6D6EB

Color blindness preview

CSS variables

/* Grauzone to Ranch House — https://swatchly.xyz/palette/88a4b3-e6d6eb-272c24-7b665a */
:root {
  --grauzone: #88a4b3;
  --scented-spring: #e6d6eb;
  --marshland: #272c24;
  --ranch-house: #7b665a;
}

Tailwind CSS v4

/* Grauzone to Ranch House — https://swatchly.xyz/palette/88a4b3-e6d6eb-272c24-7b665a */
@theme {
  --color-grauzone: #88a4b3;
  --color-grauzone-50: #e8f7ff;
  --color-grauzone-100: #dbedf7;
  --color-grauzone-200: #c4dae6;
  --color-grauzone-300: #abc3d1;
  --color-grauzone-400: #88a4b3;
  --color-grauzone-500: #6e8997;
  --color-grauzone-600: #556f7c;
  --color-grauzone-700: #405864;
  --color-grauzone-800: #304550;
  --color-grauzone-900: #24353e;
  --color-grauzone-950: #152128;
  --color-scented-spring: #e6d6eb;
  --color-scented-spring-50: #fdf6ff;
  --color-scented-spring-100: #f5ecf8;
  --color-scented-spring-200: #e6d6eb;
  --color-scented-spring-300: #cdc0d1;
  --color-scented-spring-400: #ad9fb2;
  --color-scented-spring-500: #918296;
  --color-scented-spring-600: #75687a;
  --color-scented-spring-700: #5d5161;
  --color-scented-spring-800: #493e4c;
  --color-scented-spring-900: #382f3b;
  --color-scented-spring-950: #231c25;
  --color-marshland: #272c24;
  --color-marshland-50: #f3f6f1;
  --color-marshland-100: #e8ede6;
  --color-marshland-200: #d4d9d1;
  --color-marshland-300: #bdc3ba;
  --color-marshland-400: #9ca298;
  --color-marshland-500: #7f857b;
  --color-marshland-600: #636960;
  --color-marshland-700: #4c5149;
  --color-marshland-800: #383c36;
  --color-marshland-900: #272c24;
  --color-marshland-950: #171916;
  --color-ranch-house: #7b665a;
  --color-ranch-house-50: #fff2eb;
  --color-ranch-house-100: #f7e8df;
  --color-ranch-house-200: #e5d3c9;
  --color-ranch-house-300: #d0bcb0;
  --color-ranch-house-400: #b29c8f;
  --color-ranch-house-500: #968074;
  --color-ranch-house-600: #7b665a;
  --color-ranch-house-700: #635046;
  --color-ranch-house-800: #4e3e35;
  --color-ranch-house-900: #3d2f27;
  --color-ranch-house-950: #261d17;
}