Poseidon to Milk Foam Color Palette

About this palette

Poseidon to Milk Foam is a 5-color warm, vintage palette: #00385A (Poseidon), #913060 (Pink Horror), #929B39 (Chorus of Frogs), #EB9EC7 (Sultan of Pink), #F5FDE0 (Milk Foam). It mixes blue, red, green, pink, white tones and feels warm overall. The strongest text pairing is #00385A on #F5FDE0 with a contrast ratio of 11.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Poseidon	rgb(0, 56, 90)	hsl(203, 100%, 18%)
Pink Horror	rgb(145, 48, 96)	hsl(330, 50%, 38%)
Chorus of Frogs	rgb(146, 155, 57)	hsl(66, 46%, 42%)
Sultan of Pink	rgb(235, 158, 199)	hsl(328, 66%, 77%)
Milk Foam	rgb(245, 253, 224)	hsl(77, 88%, 94%)

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.

Aa11.68:1 Very good#00385A on #F5FDE0
Aa11.68:1 Very good#F5FDE0 on #00385A
Aa7.16:1 Very good#913060 on #F5FDE0
Aa7.16:1 Very good#F5FDE0 on #913060
Aa5.98:1 Good#00385A on #EB9EC7
Aa5.98:1 Good#EB9EC7 on #00385A
Aa4.07:1 Poor#00385A on #929B39
Aa4.07:1 Poor#929B39 on #00385A

Color blindness preview

CSS variables

/* Poseidon to Milk Foam — https://swatchly.xyz/palette/00385a-913060-929b39-eb9ec7-f5fde0 */
:root {
  --poseidon: #00385a;
  --pink-horror: #913060;
  --chorus-of-frogs: #929b39;
  --sultan-of-pink: #eb9ec7;
  --milk-foam: #f5fde0;
}

Tailwind CSS v4

/* Poseidon to Milk Foam — https://swatchly.xyz/palette/00385a-913060-929b39-eb9ec7-f5fde0 */
@theme {
  --color-poseidon: #00385a;
  --color-poseidon-50: #edf7ff;
  --color-poseidon-100: #daeeff;
  --color-poseidon-200: #b7ddfc;
  --color-poseidon-300: #9bc7ea;
  --color-poseidon-400: #78a8ce;
  --color-poseidon-500: #5b8db3;
  --color-poseidon-600: #427297;
  --color-poseidon-700: #2e5b7d;
  --color-poseidon-800: #204865;
  --color-poseidon-900: #00385a;
  --color-poseidon-950: #0a2335;
  --color-pink-horror: #913060;
  --color-pink-horror-50: #fff1f6;
  --color-pink-horror-100: #ffe2ed;
  --color-pink-horror-200: #ffc6dc;
  --color-pink-horror-300: #fea2c9;
  --color-pink-horror-400: #e37fab;
  --color-pink-horror-500: #c86290;
  --color-pink-horror-600: #aa4876;
  --color-pink-horror-700: #913060;
  --color-pink-horror-800: #73234b;
  --color-pink-horror-900: #5c173a;
  --color-pink-horror-950: #3d0a24;
  --color-chorus-of-frogs: #929b39;
  --color-chorus-of-frogs-50: #f6fdcc;
  --color-chorus-of-frogs-100: #eef6bf;
  --color-chorus-of-frogs-200: #dde5a4;
  --color-chorus-of-frogs-300: #c9d286;
  --color-chorus-of-frogs-400: #abb55d;
  --color-chorus-of-frogs-500: #929b39;
  --color-chorus-of-frogs-600: #757d12;
  --color-chorus-of-frogs-700: #5d6300;
  --color-chorus-of-frogs-800: #484d00;
  --color-chorus-of-frogs-900: #363a00;
  --color-chorus-of-frogs-950: #212400;
  --color-sultan-of-pink: #eb9ec7;
  --color-sultan-of-pink-50: #ffebf5;
  --color-sultan-of-pink-100: #ffdaec;
  --color-sultan-of-pink-200: #fabcdc;
  --color-sultan-of-pink-300: #eb9ec7;
  --color-sultan-of-pink-400: #ca81a8;
  --color-sultan-of-pink-500: #ae678e;
  --color-sultan-of-pink-600: #924e74;
  --color-sultan-of-pink-700: #783b5e;
  --color-sultan-of-pink-800: #612c4b;
  --color-sultan-of-pink-900: #4e203b;
  --color-sultan-of-pink-950: #331225;
  --color-milk-foam: #f5fde0;
  --color-milk-foam-50: #f5fde0;
  --color-milk-foam-100: #ecf1e0;
  --color-milk-foam-200: #d7ddc8;
  --color-milk-foam-300: #c0c6af;
  --color-milk-foam-400: #9fa68d;
  --color-milk-foam-500: #838a70;
  --color-milk-foam-600: #696f57;
  --color-milk-foam-700: #535842;
  --color-milk-foam-800: #404531;
  --color-milk-foam-900: #313524;
  --color-milk-foam-950: #1e2115;
}