Court-Bouillon to Infinite Night color palette

CFC89ACourt-Bouillon B39F36Martian 9A8C5CIn a Pickle 5C58A1Ultrapurple Merge 2D3651Mediaeval Blue 121138Infinite Night

Open in generator Export PNG, PDF, ASE…

About this palette

Court-Bouillon to Infinite Night is a 6-color vintage palette: #CFC89A (Court-Bouillon), #B39F36 (Martian), #9A8C5C (In a Pickle), #5C58A1 (Ultrapurple Merge), #2D3651 (Mediaeval Blue), #121138 (Infinite Night). It mixes yellow, purple, blue tones and feels balanced overall. The strongest text pairing is #CFC89A on #121138 with a contrast ratio of 10.65:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Court-Bouillon	rgb(207, 200, 154)	hsl(52, 36%, 71%)
Martian	rgb(179, 159, 54)	hsl(50, 54%, 46%)
In a Pickle	rgb(154, 140, 92)	hsl(46, 25%, 48%)
Ultrapurple Merge	rgb(92, 88, 161)	hsl(243, 29%, 49%)
Mediaeval Blue	rgb(45, 54, 81)	hsl(225, 29%, 25%)
Infinite Night	rgb(18, 17, 56)	hsl(242, 53%, 14%)

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.65:1 Very good#CFC89A on #121138
Aa10.65:1 Very good#121138 on #CFC89A
Aa7.04:1 Very good#CFC89A on #2D3651
Aa7.04:1 Very good#2D3651 on #CFC89A
Aa6.82:1 Good#B39F36 on #121138
Aa6.82:1 Good#121138 on #B39F36
Aa5.40:1 Good#9A8C5C on #121138
Aa5.40:1 Good#121138 on #9A8C5C

Color blindness preview

CSS variables

/* Court-Bouillon to Infinite Night — https://swatchly.xyz/palette/cfc89a-b39f36-9a8c5c-5c58a1-2d3651-121138 */
:root {
  --court-bouillon: #cfc89a;
  --martian: #b39f36;
  --in-a-pickle: #9a8c5c;
  --ultrapurple-merge: #5c58a1;
  --mediaeval-blue: #2d3651;
  --infinite-night: #121138;
}

Tailwind CSS v4

/* Court-Bouillon to Infinite Night — https://swatchly.xyz/palette/cfc89a-b39f36-9a8c5c-5c58a1-2d3651-121138 */
@theme {
  --color-court-bouillon: #cfc89a;
  --color-court-bouillon-50: #fdf9e0;
  --color-court-bouillon-100: #f4f0d5;
  --color-court-bouillon-200: #e2ddbc;
  --color-court-bouillon-300: #cfc89a;
  --color-court-bouillon-400: #aea77d;
  --color-court-bouillon-500: #928b5f;
  --color-court-bouillon-600: #766f45;
  --color-court-bouillon-700: #5e5831;
  --color-court-bouillon-800: #494422;
  --color-court-bouillon-900: #383316;
  --color-court-bouillon-950: #23200b;
  --color-martian: #b39f36;
  --color-martian-50: #fff5c4;
  --color-martian-100: #f7ebaf;
  --color-martian-200: #e5d78e;
  --color-martian-300: #d0bf6b;
  --color-martian-400: #b39f36;
  --color-martian-500: #98840b;
  --color-martian-600: #7b6a00;
  --color-martian-700: #625400;
  --color-martian-800: #4d4100;
  --color-martian-900: #3b3200;
  --color-martian-950: #261f00;
  --color-in-a-pickle: #9a8c5c;
  --color-in-a-pickle-50: #fef6db;
  --color-in-a-pickle-100: #f6eecf;
  --color-in-a-pickle-200: #e5dbb7;
  --color-in-a-pickle-300: #d1c59c;
  --color-in-a-pickle-400: #b4a779;
  --color-in-a-pickle-500: #9a8c5c;
  --color-in-a-pickle-600: #7e7042;
  --color-in-a-pickle-700: #65582d;
  --color-in-a-pickle-800: #4f441e;
  --color-in-a-pickle-900: #3d3413;
  --color-in-a-pickle-950: #262008;
  --color-ultrapurple-merge: #5c58a1;
  --color-ultrapurple-merge-50: #f4f4ff;
  --color-ultrapurple-merge-100: #e6e7ff;
  --color-ultrapurple-merge-200: #cecfff;
  --color-ultrapurple-merge-300: #b4b4fa;
  --color-ultrapurple-merge-400: #9391de;
  --color-ultrapurple-merge-500: #7774c0;
  --color-ultrapurple-merge-600: #5c58a1;
  --color-ultrapurple-merge-700: #484484;
  --color-ultrapurple-merge-800: #38346b;
  --color-ultrapurple-merge-900: #2b2756;
  --color-ultrapurple-merge-950: #1a1739;
  --color-mediaeval-blue: #2d3651;
  --color-mediaeval-blue-50: #f1f5ff;
  --color-mediaeval-blue-100: #e3ebff;
  --color-mediaeval-blue-200: #ced7f0;
  --color-mediaeval-blue-300: #b6c0dd;
  --color-mediaeval-blue-400: #96a2c1;
  --color-mediaeval-blue-500: #7c87a6;
  --color-mediaeval-blue-600: #636d8b;
  --color-mediaeval-blue-700: #4e5873;
  --color-mediaeval-blue-800: #3d455d;
  --color-mediaeval-blue-900: #2d3651;
  --color-mediaeval-blue-950: #1d2231;
  --color-infinite-night: #121138;
  --color-infinite-night-50: #f3f4ff;
  --color-infinite-night-100: #e6eaff;
  --color-infinite-night-200: #cfd5fc;
  --color-infinite-night-300: #b8bdea;
  --color-infinite-night-400: #979dce;
  --color-infinite-night-500: #7b80b1;
  --color-infinite-night-600: #606492;
  --color-infinite-night-700: #494d75;
  --color-infinite-night-800: #36395b;
  --color-infinite-night-900: #272945;
  --color-infinite-night-950: #121138;
}