Prairie Land to Ghost White Color Palette

About this palette

Prairie Land to Ghost White is a 5-color vintage palette: #E3CA9D (Prairie Land), #54ABD6 (Cousteau), #235775 (3AM in Shibuya), #7F6211 (Alligator), #FAF6FF (Ghost White). It mixes yellow, blue, brown, white tones and feels balanced overall. The strongest text pairing is #235775 on #FAF6FF with a contrast ratio of 7.32:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Prairie Land	rgb(227, 202, 157)	hsl(39, 56%, 75%)
Cousteau	rgb(84, 171, 214)	hsl(200, 61%, 58%)
3AM in Shibuya	rgb(35, 87, 117)	hsl(202, 54%, 30%)
Alligator	rgb(127, 98, 17)	hsl(44, 76%, 28%)
Ghost White	rgb(250, 246, 255)	hsl(267, 100%, 98%)

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.32:1 Very good#235775 on #FAF6FF
Aa7.32:1 Very good#FAF6FF on #235775
Aa5.38:1 Good#7F6211 on #FAF6FF
Aa5.38:1 Good#FAF6FF on #7F6211
Aa4.90:1 Good#E3CA9D on #235775
Aa4.90:1 Good#235775 on #E3CA9D
Aa3.61:1 Poor#E3CA9D on #7F6211
Aa3.61:1 Poor#7F6211 on #E3CA9D

Color blindness preview

CSS variables

/* Prairie Land to Ghost White — https://swatchly.xyz/palette/e3ca9d-54abd6-235775-7f6211-faf6ff */
:root {
  --prairie-land: #e3ca9d;
  --cousteau: #54abd6;
  --c-3am-in-shibuya: #235775;
  --alligator: #7f6211;
  --ghost-white: #faf6ff;
}

Tailwind CSS v4

/* Prairie Land to Ghost White — https://swatchly.xyz/palette/e3ca9d-54abd6-235775-7f6211-faf6ff */
@theme {
  --color-prairie-land: #e3ca9d;
  --color-prairie-land-50: #fcecd1;
  --color-prairie-land-100: #f2e1c2;
  --color-prairie-land-200: #e3ca9d;
  --color-prairie-land-300: #cbb68f;
  --color-prairie-land-400: #af986e;
  --color-prairie-land-500: #957e53;
  --color-prairie-land-600: #7b653c;
  --color-prairie-land-700: #65512b;
  --color-prairie-land-800: #513f1e;
  --color-prairie-land-900: #3f3013;
  --color-prairie-land-950: #281d08;
  --color-cousteau: #54abd6;
  --color-cousteau-50: #e9f7ff;
  --color-cousteau-100: #d3efff;
  --color-cousteau-200: #a6e0ff;
  --color-cousteau-300: #82caf0;
  --color-cousteau-400: #54abd6;
  --color-cousteau-500: #368fb9;
  --color-cousteau-600: #13749c;
  --color-cousteau-700: #005c7f;
  --color-cousteau-800: #004864;
  --color-cousteau-900: #00384e;
  --color-cousteau-950: #002333;
  --color-c-3am-in-shibuya: #235775;
  --color-c-3am-in-shibuya-50: #ebf7ff;
  --color-c-3am-in-shibuya-100: #d8efff;
  --color-c-3am-in-shibuya-200: #b5ddf7;
  --color-c-3am-in-shibuya-300: #99c6e4;
  --color-c-3am-in-shibuya-400: #74a6c7;
  --color-c-3am-in-shibuya-500: #578aaa;
  --color-c-3am-in-shibuya-600: #3d6f8d;
  --color-c-3am-in-shibuya-700: #235775;
  --color-c-3am-in-shibuya-800: #1b445b;
  --color-c-3am-in-shibuya-900: #113448;
  --color-c-3am-in-shibuya-950: #07202e;
  --color-alligator: #7f6211;
  --color-alligator-50: #fff4dc;
  --color-alligator-100: #fce8bc;
  --color-alligator-200: #ebd39e;
  --color-alligator-300: #d6bb7d;
  --color-alligator-400: #b79a54;
  --color-alligator-500: #9b7d34;
  --color-alligator-600: #7f6211;
  --color-alligator-700: #664d00;
  --color-alligator-800: #503c00;
  --color-alligator-900: #3e2e00;
  --color-alligator-950: #281c00;
  --color-ghost-white: #faf6ff;
  --color-ghost-white-50: #faf6ff;
  --color-ghost-white-100: #efecf2;
  --color-ghost-white-200: #dbd8de;
  --color-ghost-white-300: #c4c1c8;
  --color-ghost-white-400: #a4a1a8;
  --color-ghost-white-500: #88858d;
  --color-ghost-white-600: #6d6a72;
  --color-ghost-white-700: #57545b;
  --color-ghost-white-800: #444147;
  --color-ghost-white-900: #343237;
  --color-ghost-white-950: #201e22;
}