Poseidon to Treasury Color Palette

About this palette

Poseidon to Treasury is a 5-color cool, vintage palette: #1D385B (Poseidon), #5D5F24 (Reptile Revenge), #85679D (Sunshone Plum), #6EABFF (Fennel Flower), #D8D289 (Treasury). It mixes blue, brown, purple, yellow tones and feels cool overall. The strongest text pairing is #1D385B on #D8D289 with a contrast ratio of 7.63:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Poseidon	rgb(29, 56, 91)	hsl(214, 52%, 24%)
Reptile Revenge	rgb(93, 95, 36)	hsl(62, 45%, 26%)
Sunshone Plum	rgb(133, 103, 157)	hsl(273, 22%, 51%)
Fennel Flower	rgb(110, 171, 255)	hsl(215, 100%, 72%)
Treasury	rgb(216, 210, 137)	hsl(55, 50%, 69%)

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.63:1 Very good#1D385B on #D8D289
Aa7.63:1 Very good#D8D289 on #1D385B
Aa5.05:1 Good#1D385B on #6EABFF
Aa5.05:1 Good#6EABFF on #1D385B
Aa4.32:1 Poor#5D5F24 on #D8D289
Aa4.32:1 Poor#D8D289 on #5D5F24
Aa3.05:1 Poor#85679D on #D8D289
Aa3.05:1 Poor#D8D289 on #85679D

Color blindness preview

CSS variables

/* Poseidon to Treasury — https://swatchly.xyz/palette/1d385b-5d5f24-85679d-6eabff-d8d289 */
:root {
  --poseidon: #1d385b;
  --reptile-revenge: #5d5f24;
  --sunshone-plum: #85679d;
  --fennel-flower: #6eabff;
  --treasury: #d8d289;
}

Tailwind CSS v4

/* Poseidon to Treasury — https://swatchly.xyz/palette/1d385b-5d5f24-85679d-6eabff-d8d289 */
@theme {
  --color-poseidon: #1d385b;
  --color-poseidon-50: #eff6ff;
  --color-poseidon-100: #dfedff;
  --color-poseidon-200: #c1dafa;
  --color-poseidon-300: #a8c3e8;
  --color-poseidon-400: #87a5cd;
  --color-poseidon-500: #6c8ab2;
  --color-poseidon-600: #537097;
  --color-poseidon-700: #3f5a7d;
  --color-poseidon-800: #304767;
  --color-poseidon-900: #1d385b;
  --color-poseidon-950: #142337;
  --color-reptile-revenge: #5d5f24;
  --color-reptile-revenge-50: #f6f9d7;
  --color-reptile-revenge-100: #ecefc9;
  --color-reptile-revenge-200: #daddb0;
  --color-reptile-revenge-300: #c4c895;
  --color-reptile-revenge-400: #a6aa71;
  --color-reptile-revenge-500: #8c8f54;
  --color-reptile-revenge-600: #73753b;
  --color-reptile-revenge-700: #5d5f24;
  --color-reptile-revenge-800: #494a19;
  --color-reptile-revenge-900: #38390e;
  --color-reptile-revenge-950: #232405;
  --color-sunshone-plum: #85679d;
  --color-sunshone-plum-50: #f9f2ff;
  --color-sunshone-plum-100: #f4e7ff;
  --color-sunshone-plum-200: #e8d0fc;
  --color-sunshone-plum-300: #d4baeb;
  --color-sunshone-plum-400: #b89bd1;
  --color-sunshone-plum-500: #9e80b7;
  --color-sunshone-plum-600: #85679d;
  --color-sunshone-plum-700: #6b4f81;
  --color-sunshone-plum-800: #553c68;
  --color-sunshone-plum-900: #422d52;
  --color-sunshone-plum-950: #291a35;
  --color-fennel-flower: #6eabff;
  --color-fennel-flower-50: #f4f8ff;
  --color-fennel-flower-100: #e6f0ff;
  --color-fennel-flower-200: #c8dfff;
  --color-fennel-flower-300: #a4caff;
  --color-fennel-flower-400: #6eabff;
  --color-fennel-flower-500: #528dde;
  --color-fennel-flower-600: #3670bf;
  --color-fennel-flower-700: #21589f;
  --color-fennel-flower-800: #124382;
  --color-fennel-flower-900: #073267;
  --color-fennel-flower-950: #021e44;
  --color-treasury: #d8d289;
  --color-treasury-50: #f4f2c7;
  --color-treasury-100: #eae6b6;
  --color-treasury-200: #d8d289;
  --color-treasury-300: #c2bd7e;
  --color-treasury-400: #a59f5a;
  --color-treasury-500: #8b853d;
  --color-treasury-600: #726b24;
  --color-treasury-700: #5c5611;
  --color-treasury-800: #494403;
  --color-treasury-900: #393400;
  --color-treasury-950: #232000;
}