James Blonde to Olivary Color Palette

About this palette

James Blonde to Olivary is a 5-color warm, vintage palette: #EFE4B9 (James Blonde), #AF6496 (Je t’aime), #381731 (Nightly Voyager), #45BCDD (Caribbean Blue), #665B2B (Olivary). It mixes yellow, pink, purple, blue, brown tones and feels warm overall. The strongest text pairing is #EFE4B9 on #381731 with a contrast ratio of 12.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
James Blonde	rgb(239, 228, 185)	hsl(48, 63%, 83%)
Je t’aime	rgb(175, 100, 150)	hsl(320, 32%, 54%)
Nightly Voyager	rgb(56, 23, 49)	hsl(313, 42%, 15%)
Caribbean Blue	rgb(69, 188, 221)	hsl(193, 69%, 57%)
Olivary	rgb(102, 91, 43)	hsl(49, 41%, 28%)

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.

Aa12.34:1 Super#EFE4B9 on #381731
Aa12.34:1 Super#381731 on #EFE4B9
Aa7.11:1 Very good#381731 on #45BCDD
Aa7.11:1 Very good#45BCDD on #381731
Aa5.32:1 Good#EFE4B9 on #665B2B
Aa5.32:1 Good#665B2B on #EFE4B9
Aa3.81:1 Poor#AF6496 on #381731
Aa3.81:1 Poor#381731 on #AF6496

Color blindness preview

CSS variables

/* James Blonde to Olivary — https://swatchly.xyz/palette/efe4b9-af6496-381731-45bcdd-665b2b */
:root {
  --james-blonde: #efe4b9;
  --je-t-aime: #af6496;
  --nightly-voyager: #381731;
  --caribbean-blue: #45bcdd;
  --olivary: #665b2b;
}

Tailwind CSS v4

/* James Blonde to Olivary — https://swatchly.xyz/palette/efe4b9-af6496-381731-45bcdd-665b2b */
@theme {
  --color-james-blonde: #efe4b9;
  --color-james-blonde-50: #f5efd6;
  --color-james-blonde-100: #efe4b9;
  --color-james-blonde-200: #dad2b1;
  --color-james-blonde-300: #c6bc98;
  --color-james-blonde-400: #a89e77;
  --color-james-blonde-500: #8e845c;
  --color-james-blonde-600: #756b44;
  --color-james-blonde-700: #5e5532;
  --color-james-blonde-800: #4a4223;
  --color-james-blonde-900: #393318;
  --color-james-blonde-950: #241f0c;
  --color-je-t-aime: #af6496;
  --color-je-t-aime-50: #ffeff9;
  --color-je-t-aime-100: #ffdff2;
  --color-je-t-aime-200: #fdbfe6;
  --color-je-t-aime-300: #eaa4d1;
  --color-je-t-aime-400: #cc81b2;
  --color-je-t-aime-500: #af6496;
  --color-je-t-aime-600: #924b7b;
  --color-je-t-aime-700: #783864;
  --color-je-t-aime-800: #60294f;
  --color-je-t-aime-900: #4d1d3e;
  --color-je-t-aime-950: #321028;
  --color-nightly-voyager: #381731;
  --color-nightly-voyager-50: #fff0fb;
  --color-nightly-voyager-100: #fee1f6;
  --color-nightly-voyager-200: #edcce4;
  --color-nightly-voyager-300: #d9b4cf;
  --color-nightly-voyager-400: #bb93b1;
  --color-nightly-voyager-500: #a17997;
  --color-nightly-voyager-600: #86607d;
  --color-nightly-voyager-700: #6f4b66;
  --color-nightly-voyager-800: #5a3b52;
  --color-nightly-voyager-900: #492e42;
  --color-nightly-voyager-950: #381731;
  --color-caribbean-blue: #45bcdd;
  --color-caribbean-blue-50: #effbff;
  --color-caribbean-blue-100: #dbf6ff;
  --color-caribbean-blue-200: #aaeaff;
  --color-caribbean-blue-300: #80d8f3;
  --color-caribbean-blue-400: #45bcdd;
  --color-caribbean-blue-500: #199ebe;
  --color-caribbean-blue-600: #007f9a;
  --color-caribbean-blue-700: #00647a;
  --color-caribbean-blue-800: #004e5f;
  --color-caribbean-blue-900: #003b49;
  --color-caribbean-blue-950: #00242e;
  --color-olivary: #665b2b;
  --color-olivary-50: #fcf6da;
  --color-olivary-100: #f3eccc;
  --color-olivary-200: #e2d9b4;
  --color-olivary-300: #cec499;
  --color-olivary-400: #b0a576;
  --color-olivary-500: #968b5a;
  --color-olivary-600: #7c7141;
  --color-olivary-700: #665b2b;
  --color-olivary-800: #50471f;
  --color-olivary-900: #3e3614;
  --color-olivary-950: #272208;
}