Poseidon to Glacial Drift color palette

004061Poseidon 8E4230Fire 00897AGo Go Green DC7F71Bite My Tongue 7ABFFFCooler Than Ever C8FBEDGlacial Drift

Open in generator Export PNG, PDF, ASE…

About this palette

Poseidon to Glacial Drift is a 6-color cool palette: #004061 (Poseidon), #8E4230 (Fire), #00897A (Go Go Green), #DC7F71 (Bite My Tongue), #7ABFFF (Cooler Than Ever), #C8FBED (Glacial Drift). It mixes blue, red, turquoise, white tones and feels cool overall. The strongest text pairing is #004061 on #C8FBED with a contrast ratio of 9.69:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Poseidon	rgb(0, 64, 97)	hsl(200, 100%, 19%)
Fire	rgb(142, 66, 48)	hsl(11, 49%, 37%)
Go Go Green	rgb(0, 137, 122)	hsl(173, 100%, 27%)
Bite My Tongue	rgb(220, 127, 113)	hsl(8, 60%, 65%)
Cooler Than Ever	rgb(122, 191, 255)	hsl(209, 100%, 74%)
Glacial Drift	rgb(200, 251, 237)	hsl(164, 86%, 88%)

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.

Aa9.69:1 Very good#004061 on #C8FBED
Aa9.69:1 Very good#C8FBED on #004061
Aa6.22:1 Good#8E4230 on #C8FBED
Aa6.22:1 Good#C8FBED on #8E4230
Aa5.63:1 Good#004061 on #7ABFFF
Aa5.63:1 Good#7ABFFF on #004061
Aa3.84:1 Poor#004061 on #DC7F71
Aa3.84:1 Poor#DC7F71 on #004061

Color blindness preview

CSS variables

/* Poseidon to Glacial Drift — https://swatchly.xyz/palette/004061-8e4230-00897a-dc7f71-7abfff-c8fbed */
:root {
  --poseidon: #004061;
  --fire: #8e4230;
  --go-go-green: #00897a;
  --bite-my-tongue: #dc7f71;
  --cooler-than-ever: #7abfff;
  --glacial-drift: #c8fbed;
}

Tailwind CSS v4

/* Poseidon to Glacial Drift — https://swatchly.xyz/palette/004061-8e4230-00897a-dc7f71-7abfff-c8fbed */
@theme {
  --color-poseidon: #004061;
  --color-poseidon-50: #ecf7ff;
  --color-poseidon-100: #d9efff;
  --color-poseidon-200: #b4defb;
  --color-poseidon-300: #97c6e8;
  --color-poseidon-400: #71a6cb;
  --color-poseidon-500: #5389ae;
  --color-poseidon-600: #386d8f;
  --color-poseidon-700: #245473;
  --color-poseidon-800: #004061;
  --color-poseidon-900: #0d3147;
  --color-poseidon-950: #051e2d;
  --color-fire: #8e4230;
  --color-fire-50: #fff2ee;
  --color-fire-100: #ffe4de;
  --color-fire-200: #ffcbbe;
  --color-fire-300: #f8af9c;
  --color-fire-400: #dd8d7a;
  --color-fire-500: #c3725e;
  --color-fire-600: #a65846;
  --color-fire-700: #8e4230;
  --color-fire-800: #713223;
  --color-fire-900: #5a2417;
  --color-fire-950: #3b140b;
  --color-go-go-green: #00897a;
  --color-go-go-green-50: #d8fff7;
  --color-go-go-green-100: #c0fbf0;
  --color-go-go-green-200: #a5ecde;
  --color-go-go-green-300: #86d9ca;
  --color-go-go-green-400: #5bbdad;
  --color-go-go-green-500: #35a393;
  --color-go-go-green-600: #00897a;
  --color-go-go-green-700: #006d61;
  --color-go-go-green-800: #00554b;
  --color-go-go-green-900: #004139;
  --color-go-go-green-950: #002923;
  --color-bite-my-tongue: #dc7f71;
  --color-bite-my-tongue-50: #ffefed;
  --color-bite-my-tongue-100: #ffe1db;
  --color-bite-my-tongue-200: #ffc3b9;
  --color-bite-my-tongue-300: #f8a396;
  --color-bite-my-tongue-400: #dc7f71;
  --color-bite-my-tongue-500: #be6458;
  --color-bite-my-tongue-600: #a04b40;
  --color-bite-my-tongue-700: #85382e;
  --color-bite-my-tongue-800: #6c2820;
  --color-bite-my-tongue-900: #561d16;
  --color-bite-my-tongue-950: #390f0b;
  --color-cooler-than-ever: #7abfff;
  --color-cooler-than-ever-50: #e6f3ff;
  --color-cooler-than-ever-100: #d2e9ff;
  --color-cooler-than-ever-200: #aad6ff;
  --color-cooler-than-ever-300: #7abfff;
  --color-cooler-than-ever-400: #5ea0dd;
  --color-cooler-than-ever-500: #4286c2;
  --color-cooler-than-ever-600: #286ca5;
  --color-cooler-than-ever-700: #15568a;
  --color-cooler-than-ever-800: #064471;
  --color-cooler-than-ever-900: #00355c;
  --color-cooler-than-ever-950: #00213c;
  --color-glacial-drift: #c8fbed;
  --color-glacial-drift-50: #e4fff7;
  --color-glacial-drift-100: #c8fbed;
  --color-glacial-drift-200: #bfe3d9;
  --color-glacial-drift-300: #a4cdc2;
  --color-glacial-drift-400: #80aea2;
  --color-glacial-drift-500: #639286;
  --color-glacial-drift-600: #48776b;
  --color-glacial-drift-700: #345f54;
  --color-glacial-drift-800: #254b42;
  --color-glacial-drift-900: #193a32;
  --color-glacial-drift-950: #0d241f;
}