Fisher King to Poseidon color palette

5D84AFFisher King DCAF69Caramel Essence 4D6195Sea of Galilee F6CD94Sparkling Champagne 1D3760Poseidon

Open in generator Export PNG, PDF, ASE…

About this palette

Fisher King to Poseidon is a 5-color cool, vintage palette: #5D84AF (Fisher King), #DCAF69 (Caramel Essence), #4D6195 (Sea of Galilee), #F6CD94 (Sparkling Champagne), #1D3760 (Poseidon). It mixes blue, yellow tones and feels cool overall. The strongest text pairing is #F6CD94 on #1D3760 with a contrast ratio of 7.96:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fisher King	rgb(93, 132, 175)	hsl(211, 34%, 53%)
Caramel Essence	rgb(220, 175, 105)	hsl(37, 62%, 64%)
Sea of Galilee	rgb(77, 97, 149)	hsl(223, 32%, 44%)
Sparkling Champagne	rgb(246, 205, 148)	hsl(35, 84%, 77%)
Poseidon	rgb(29, 55, 96)	hsl(217, 54%, 25%)

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.96:1 Very good#F6CD94 on #1D3760
Aa7.96:1 Very good#1D3760 on #F6CD94
Aa5.87:1 Good#DCAF69 on #1D3760
Aa5.87:1 Good#1D3760 on #DCAF69
Aa4.07:1 Poor#4D6195 on #F6CD94
Aa4.07:1 Poor#F6CD94 on #4D6195
Aa3.05:1 Poor#5D84AF on #1D3760
Aa3.05:1 Poor#1D3760 on #5D84AF

Color blindness preview

CSS variables

/* Fisher King to Poseidon — https://swatchly.xyz/palette/5d84af-dcaf69-4d6195-f6cd94-1d3760 */
:root {
  --fisher-king: #5d84af;
  --caramel-essence: #dcaf69;
  --sea-of-galilee: #4d6195;
  --sparkling-champagne: #f6cd94;
  --poseidon: #1d3760;
}

Tailwind CSS v4

/* Fisher King to Poseidon — https://swatchly.xyz/palette/5d84af-dcaf69-4d6195-f6cd94-1d3760 */
@theme {
  --color-fisher-king: #5d84af;
  --color-fisher-king-50: #edf5ff;
  --color-fisher-king-100: #daebff;
  --color-fisher-king-200: #b8d8fc;
  --color-fisher-king-300: #9dc1e9;
  --color-fisher-king-400: #7aa0cc;
  --color-fisher-king-500: #5d84af;
  --color-fisher-king-600: #456a93;
  --color-fisher-king-700: #335479;
  --color-fisher-king-800: #244261;
  --color-fisher-king-900: #1a334e;
  --color-fisher-king-950: #0d2033;
  --color-caramel-essence: #dcaf69;
  --color-caramel-essence-50: #ffeed4;
  --color-caramel-essence-100: #fee0b2;
  --color-caramel-essence-200: #edc994;
  --color-caramel-essence-300: #dcaf69;
  --color-caramel-essence-400: #bc924e;
  --color-caramel-essence-500: #a27830;
  --color-caramel-essence-600: #875f14;
  --color-caramel-essence-700: #6e4b00;
  --color-caramel-essence-800: #583b00;
  --color-caramel-essence-900: #462e00;
  --color-caramel-essence-950: #2c1c00;
  --color-sea-of-galilee: #4d6195;
  --color-sea-of-galilee-50: #f1f5ff;
  --color-sea-of-galilee-100: #e0e9ff;
  --color-sea-of-galilee-200: #c2d4ff;
  --color-sea-of-galilee-300: #a6bbee;
  --color-sea-of-galilee-400: #849ad0;
  --color-sea-of-galilee-500: #687db3;
  --color-sea-of-galilee-600: #4d6195;
  --color-sea-of-galilee-700: #3b4c79;
  --color-sea-of-galilee-800: #2d3b62;
  --color-sea-of-galilee-900: #212d4e;
  --color-sea-of-galilee-950: #131c33;
  --color-sparkling-champagne: #f6cd94;
  --color-sparkling-champagne-50: #fff1de;
  --color-sparkling-champagne-100: #ffe4c1;
  --color-sparkling-champagne-200: #f6cd94;
  --color-sparkling-champagne-300: #dbb888;
  --color-sparkling-champagne-400: #be9863;
  --color-sparkling-champagne-500: #a37d46;
  --color-sparkling-champagne-600: #87632d;
  --color-sparkling-champagne-700: #6e4e1a;
  --color-sparkling-champagne-800: #593c0c;
  --color-sparkling-champagne-900: #452d04;
  --color-sparkling-champagne-950: #2d1b01;
  --color-poseidon: #1d3760;
  --color-poseidon-50: #eff6ff;
  --color-poseidon-100: #e0ecff;
  --color-poseidon-200: #c1d9ff;
  --color-poseidon-300: #a7c3ed;
  --color-poseidon-400: #86a4d2;
  --color-poseidon-500: #6b89b8;
  --color-poseidon-600: #536f9c;
  --color-poseidon-700: #3f5982;
  --color-poseidon-800: #30476b;
  --color-poseidon-900: #1d3760;
  --color-poseidon-950: #14233a;
}