Poseidon to Night Snow Color Palette

About this palette

Poseidon to Night Snow is a 5-color warm, earthy, vintage palette: #16385F (Poseidon), #7C4C0C (Milk Chocolate), #8A6B3C (Sneaky Sesame), #BB9A71 (Cardboard), #B5CEFF (Night Snow). It mixes blue, brown, orange tones and feels warm overall. The strongest text pairing is #16385F on #B5CEFF with a contrast ratio of 7.50:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Poseidon	rgb(22, 56, 95)	hsl(212, 62%, 23%)
Milk Chocolate	rgb(124, 76, 12)	hsl(34, 82%, 27%)
Sneaky Sesame	rgb(138, 107, 60)	hsl(36, 39%, 39%)
Cardboard	rgb(187, 154, 113)	hsl(33, 35%, 59%)
Night Snow	rgb(181, 206, 255)	hsl(220, 100%, 85%)

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.50:1 Very good#16385F on #B5CEFF
Aa7.50:1 Very good#B5CEFF on #16385F
Aa4.57:1 Good#7C4C0C on #B5CEFF
Aa4.57:1 Good#B5CEFF on #7C4C0C
Aa4.52:1 Good#16385F on #BB9A71
Aa4.52:1 Good#BB9A71 on #16385F
Aa3.12:1 Poor#8A6B3C on #B5CEFF
Aa3.12:1 Poor#B5CEFF on #8A6B3C

Color blindness preview

CSS variables

/* Poseidon to Night Snow — https://swatchly.xyz/palette/16385f-7c4c0c-8a6b3c-bb9a71-b5ceff */
:root {
  --poseidon: #16385f;
  --milk-chocolate: #7c4c0c;
  --sneaky-sesame: #8a6b3c;
  --cardboard: #bb9a71;
  --night-snow: #b5ceff;
}

Tailwind CSS v4

/* Poseidon to Night Snow — https://swatchly.xyz/palette/16385f-7c4c0c-8a6b3c-bb9a71-b5ceff */
@theme {
  --color-poseidon: #16385f;
  --color-poseidon-50: #eff6ff;
  --color-poseidon-100: #deedff;
  --color-poseidon-200: #bddafe;
  --color-poseidon-300: #a3c4ed;
  --color-poseidon-400: #81a5d1;
  --color-poseidon-500: #668bb7;
  --color-poseidon-600: #4d719b;
  --color-poseidon-700: #3a5a81;
  --color-poseidon-800: #2b486a;
  --color-poseidon-900: #16385f;
  --color-poseidon-950: #112339;
  --color-milk-chocolate: #7c4c0c;
  --color-milk-chocolate-50: #fff3e7;
  --color-milk-chocolate-100: #ffe6ce;
  --color-milk-chocolate-200: #f9d0a6;
  --color-milk-chocolate-300: #e7b889;
  --color-milk-chocolate-400: #cb9863;
  --color-milk-chocolate-500: #b07c45;
  --color-milk-chocolate-600: #94632a;
  --color-milk-chocolate-700: #7c4c0c;
  --color-milk-chocolate-800: #623b06;
  --color-milk-chocolate-900: #4d2c00;
  --color-milk-chocolate-950: #321a00;
  --color-sneaky-sesame: #8a6b3c;
  --color-sneaky-sesame-50: #fff3e3;
  --color-sneaky-sesame-100: #fee9cb;
  --color-sneaky-sesame-200: #efd5b2;
  --color-sneaky-sesame-300: #dcbf96;
  --color-sneaky-sesame-400: #bfa072;
  --color-sneaky-sesame-500: #a58556;
  --color-sneaky-sesame-600: #8a6b3c;
  --color-sneaky-sesame-700: #705428;
  --color-sneaky-sesame-800: #594119;
  --color-sneaky-sesame-900: #46310f;
  --color-sneaky-sesame-950: #2c1d05;
  --color-cardboard: #bb9a71;
  --color-cardboard-50: #fff3e4;
  --color-cardboard-100: #fde7cc;
  --color-cardboard-200: #ecd2b3;
  --color-cardboard-300: #d8bb97;
  --color-cardboard-400: #bb9a71;
  --color-cardboard-500: #9f7f57;
  --color-cardboard-600: #83653e;
  --color-cardboard-700: #6a4f2b;
  --color-cardboard-800: #553d1d;
  --color-cardboard-900: #422e13;
  --color-cardboard-950: #2b1c08;
  --color-night-snow: #b5ceff;
  --color-night-snow-50: #e6efff;
  --color-night-snow-100: #d5e3ff;
  --color-night-snow-200: #b5ceff;
  --color-night-snow-300: #a3b9e4;
  --color-night-snow-400: #849bc9;
  --color-night-snow-500: #6b81af;
  --color-night-snow-600: #536893;
  --color-night-snow-700: #40537a;
  --color-night-snow-800: #314264;
  --color-night-snow-900: #24324f;
  --color-night-snow-950: #151f33;
}