Wizard to Marina Color Palette

About this palette

Wizard to Marina is a 6-color vintage palette: #515D8F (Wizard), #533F04 (Pineapple), #141D37 (Sombre Night), #E0C681 (24 Karat), #D6A03D (Curry), #7186D3 (Marina). It mixes blue, brown, yellow tones and feels balanced overall. The strongest text pairing is #141D37 on #E0C681 with a contrast ratio of 9.97:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wizard	rgb(81, 93, 143)	hsl(228, 28%, 44%)
Pineapple	rgb(83, 63, 4)	hsl(45, 91%, 17%)
Sombre Night	rgb(20, 29, 55)	hsl(225, 47%, 15%)
24 Karat	rgb(224, 198, 129)	hsl(44, 61%, 69%)
Curry	rgb(214, 160, 61)	hsl(39, 65%, 54%)
Marina	rgb(113, 134, 211)	hsl(227, 53%, 64%)

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.

Aa9.97:1 Very good#141D37 on #E0C681
Aa9.97:1 Very good#E0C681 on #141D37
Aa7.10:1 Very good#141D37 on #D6A03D
Aa7.10:1 Very good#D6A03D on #141D37
Aa6.04:1 Good#533F04 on #E0C681
Aa6.04:1 Good#E0C681 on #533F04
Aa4.80:1 Good#141D37 on #7186D3
Aa4.80:1 Good#7186D3 on #141D37

Color blindness preview

CSS variables

/* Wizard to Marina — https://swatchly.xyz/palette/515d8f-533f04-141d37-e0c681-d6a03d-7186d3 */
:root {
  --wizard: #515d8f;
  --pineapple: #533f04;
  --sombre-night: #141d37;
  --c-24-karat: #e0c681;
  --curry: #d6a03d;
  --marina: #7186d3;
}

Tailwind CSS v4

/* Wizard to Marina — https://swatchly.xyz/palette/515d8f-533f04-141d37-e0c681-d6a03d-7186d3 */
@theme {
  --color-wizard: #515d8f;
  --color-wizard-50: #f2f5ff;
  --color-wizard-100: #e2e8ff;
  --color-wizard-200: #c5d1fd;
  --color-wizard-300: #abb8ea;
  --color-wizard-400: #8996cb;
  --color-wizard-500: #6c79ad;
  --color-wizard-600: #515d8f;
  --color-wizard-700: #3f4974;
  --color-wizard-800: #30395e;
  --color-wizard-900: #242b4b;
  --color-wizard-950: #151a31;
  --color-pineapple: #533f04;
  --color-pineapple-50: #fff4db;
  --color-pineapple-100: #f8eac9;
  --color-pineapple-200: #e7d6ae;
  --color-pineapple-300: #d2bf92;
  --color-pineapple-400: #b59f6d;
  --color-pineapple-500: #998350;
  --color-pineapple-600: #7e6936;
  --color-pineapple-700: #655323;
  --color-pineapple-800: #533f04;
  --color-pineapple-900: #3f310c;
  --color-pineapple-950: #281e04;
  --color-sombre-night: #141d37;
  --color-sombre-night-50: #f1f5ff;
  --color-sombre-night-100: #e3ebff;
  --color-sombre-night-200: #ccd7f2;
  --color-sombre-night-300: #b4c1de;
  --color-sombre-night-400: #94a1c1;
  --color-sombre-night-500: #7885a6;
  --color-sombre-night-600: #5f6b8a;
  --color-sombre-night-700: #495470;
  --color-sombre-night-800: #384159;
  --color-sombre-night-900: #2a3246;
  --color-sombre-night-950: #141d37;
  --color-c-24-karat: #e0c681;
  --color-c-24-karat-50: #fff9e8;
  --color-c-24-karat-100: #ffefc8;
  --color-c-24-karat-200: #efddad;
  --color-c-24-karat-300: #e0c681;
  --color-c-24-karat-400: #bda565;
  --color-c-24-karat-500: #a18844;
  --color-c-24-karat-600: #846c27;
  --color-c-24-karat-700: #6a5510;
  --color-c-24-karat-800: #544100;
  --color-c-24-karat-900: #403100;
  --color-c-24-karat-950: #281e00;
  --color-curry: #d6a03d;
  --color-curry-50: #fff7eb;
  --color-curry-100: #ffeed2;
  --color-curry-200: #ffd798;
  --color-curry-300: #eec176;
  --color-curry-400: #d6a03d;
  --color-curry-500: #b78314;
  --color-curry-600: #956800;
  --color-curry-700: #765200;
  --color-curry-800: #5c3f00;
  --color-curry-900: #462f00;
  --color-curry-950: #2c1c00;
  --color-marina: #7186d3;
  --color-marina-50: #f3f6ff;
  --color-marina-100: #e6edff;
  --color-marina-200: #cdd9ff;
  --color-marina-300: #afc2ff;
  --color-marina-400: #8ca2ed;
  --color-marina-500: #7186d3;
  --color-marina-600: #576ab4;
  --color-marina-700: #425396;
  --color-marina-800: #313f7a;
  --color-marina-900: #242f61;
  --color-marina-950: #141c40;
}