Court-Bouillon to Grape color palette

CECDA0Court-Bouillon DCA0C6Pastel Lavender 008B9FWaikiki 6A672AJungle Civilization 663453Grape

About this palette

Court-Bouillon to Grape is a 5-color warm, vintage palette: #CECDA0 (Court-Bouillon), #DCA0C6 (Pastel Lavender), #008B9F (Waikiki), #6A672A (Jungle Civilization), #663453 (Grape). It mixes yellow, pink, turquoise, brown, red tones and feels warm overall. The strongest text pairing is #CECDA0 on #663453 with a contrast ratio of 5.90:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Court-Bouillon	rgb(206, 205, 160)	hsl(59, 32%, 72%)
Pastel Lavender	rgb(220, 160, 198)	hsl(322, 46%, 75%)
Waikiki	rgb(0, 139, 159)	hsl(188, 100%, 31%)
Jungle Civilization	rgb(106, 103, 42)	hsl(57, 43%, 29%)
Grape	rgb(102, 52, 83)	hsl(323, 32%, 30%)

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.

Aa5.90:1 Good#CECDA0 on #663453
Aa5.90:1 Good#663453 on #CECDA0
Aa4.53:1 Good#DCA0C6 on #663453
Aa4.53:1 Good#663453 on #DCA0C6
Aa3.59:1 Poor#CECDA0 on #6A672A
Aa3.59:1 Poor#6A672A on #CECDA0

Color blindness preview

CSS variables

/* Court-Bouillon to Grape — https://swatchly.xyz/palette/cecda0-dca0c6-008b9f-6a672a-663453 */
:root {
  --court-bouillon: #cecda0;
  --pastel-lavender: #dca0c6;
  --waikiki: #008b9f;
  --jungle-civilization: #6a672a;
  --grape: #663453;
}

Tailwind CSS v4

/* Court-Bouillon to Grape — https://swatchly.xyz/palette/cecda0-dca0c6-008b9f-6a672a-663453 */
@theme {
  --color-court-bouillon: #cecda0;
  --color-court-bouillon-50: #fcfce4;
  --color-court-bouillon-100: #f4f3d9;
  --color-court-bouillon-200: #e2e1c2;
  --color-court-bouillon-300: #cecda0;
  --color-court-bouillon-400: #adac82;
  --color-court-bouillon-500: #908e64;
  --color-court-bouillon-600: #747249;
  --color-court-bouillon-700: #5b5a34;
  --color-court-bouillon-800: #474524;
  --color-court-bouillon-900: #353418;
  --color-court-bouillon-950: #21200c;
  --color-pastel-lavender: #dca0c6;
  --color-pastel-lavender-50: #ffe7f6;
  --color-pastel-lavender-100: #ffd5ef;
  --color-pastel-lavender-200: #eebddb;
  --color-pastel-lavender-300: #dca0c6;
  --color-pastel-lavender-400: #bc84a8;
  --color-pastel-lavender-500: #a26a8e;
  --color-pastel-lavender-600: #875375;
  --color-pastel-lavender-700: #6f405f;
  --color-pastel-lavender-800: #5a314c;
  --color-pastel-lavender-900: #48253c;
  --color-pastel-lavender-950: #2f1526;
  --color-waikiki: #008b9f;
  --color-waikiki-50: #def9ff;
  --color-waikiki-100: #b9f3ff;
  --color-waikiki-200: #93e0f0;
  --color-waikiki-300: #6fc9db;
  --color-waikiki-400: #3da9bc;
  --color-waikiki-500: #008b9f;
  --color-waikiki-600: #007080;
  --color-waikiki-700: #005967;
  --color-waikiki-800: #004651;
  --color-waikiki-900: #003740;
  --color-waikiki-950: #002329;
  --color-jungle-civilization: #6a672a;
  --color-jungle-civilization-50: #f8f8d5;
  --color-jungle-civilization-100: #ededc5;
  --color-jungle-civilization-200: #d9d8a9;
  --color-jungle-civilization-300: #c2c08a;
  --color-jungle-civilization-400: #a2a064;
  --color-jungle-civilization-500: #858346;
  --color-jungle-civilization-600: #6a672a;
  --color-jungle-civilization-700: #54521b;
  --color-jungle-civilization-800: #42400f;
  --color-jungle-civilization-900: #333107;
  --color-jungle-civilization-950: #201e02;
  --color-grape: #663453;
  --color-grape-50: #fff0f8;
  --color-grape-100: #ffe1f2;
  --color-grape-200: #f6c8e2;
  --color-grape-300: #e4b0ce;
  --color-grape-400: #c790b0;
  --color-grape-500: #ad7596;
  --color-grape-600: #915c7c;
  --color-grape-700: #784865;
  --color-grape-800: #663453;
  --color-grape-900: #4e293f;
  --color-grape-950: #331828;
}