Chipmunk to Poseidon Color Palette

About this palette

Chipmunk to Poseidon is a 4-color vintage palette: #CBA050 (Chipmunk), #B2DBFF (Droplet), #946310 (Embarrassed Frog), #003F66 (Poseidon). It mixes yellow, blue, brown tones and feels balanced overall. The strongest text pairing is #B2DBFF on #003F66 with a contrast ratio of 7.60:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chipmunk	rgb(203, 160, 80)	hsl(39, 54%, 55%)
Droplet	rgb(178, 219, 255)	hsl(208, 100%, 85%)
Embarrassed Frog	rgb(148, 99, 16)	hsl(38, 80%, 32%)
Poseidon	rgb(0, 63, 102)	hsl(203, 100%, 20%)

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.60:1 Very good#B2DBFF on #003F66
Aa7.60:1 Very good#003F66 on #B2DBFF
Aa4.56:1 Good#CBA050 on #003F66
Aa4.56:1 Good#003F66 on #CBA050
Aa3.57:1 Poor#B2DBFF on #946310
Aa3.57:1 Poor#946310 on #B2DBFF

Color blindness preview

CSS variables

/* Chipmunk to Poseidon — https://swatchly.xyz/palette/cba050-b2dbff-946310-003f66 */
:root {
  --chipmunk: #cba050;
  --droplet: #b2dbff;
  --embarrassed-frog: #946310;
  --poseidon: #003f66;
}

Tailwind CSS v4

/* Chipmunk to Poseidon — https://swatchly.xyz/palette/cba050-b2dbff-946310-003f66 */
@theme {
  --color-chipmunk: #cba050;
  --color-chipmunk-50: #fff6e7;
  --color-chipmunk-100: #ffeccb;
  --color-chipmunk-200: #f7d7a0;
  --color-chipmunk-300: #e5c080;
  --color-chipmunk-400: #cba050;
  --color-chipmunk-500: #ad8331;
  --color-chipmunk-600: #906809;
  --color-chipmunk-700: #735100;
  --color-chipmunk-800: #5a3f00;
  --color-chipmunk-900: #452f00;
  --color-chipmunk-950: #2b1c00;
  --color-droplet: #b2dbff;
  --color-droplet-50: #ebf5ff;
  --color-droplet-100: #d8edff;
  --color-droplet-200: #b2dbff;
  --color-droplet-300: #a1c4e2;
  --color-droplet-400: #7fa5c6;
  --color-droplet-500: #638aab;
  --color-droplet-600: #4b6f8f;
  --color-droplet-700: #375975;
  --color-droplet-800: #28455e;
  --color-droplet-900: #1c354a;
  --color-droplet-950: #0f2130;
  --color-embarrassed-frog: #946310;
  --color-embarrassed-frog-50: #fff3e4;
  --color-embarrassed-frog-100: #ffe8cb;
  --color-embarrassed-frog-200: #f9d19e;
  --color-embarrassed-frog-300: #e7ba7e;
  --color-embarrassed-frog-400: #cb9955;
  --color-embarrassed-frog-500: #b07d34;
  --color-embarrassed-frog-600: #946310;
  --color-embarrassed-frog-700: #774d00;
  --color-embarrassed-frog-800: #5e3c00;
  --color-embarrassed-frog-900: #492d00;
  --color-embarrassed-frog-950: #2f1b00;
  --color-poseidon: #003f66;
  --color-poseidon-50: #edf7ff;
  --color-poseidon-100: #dbeeff;
  --color-poseidon-200: #b5ddff;
  --color-poseidon-300: #96c6ee;
  --color-poseidon-400: #70a5d0;
  --color-poseidon-500: #5288b4;
  --color-poseidon-600: #386c95;
  --color-poseidon-700: #245478;
  --color-poseidon-800: #003f66;
  --color-poseidon-900: #0d304a;
  --color-poseidon-950: #051d2f;
}