Start generating

Poseidon Jr. to Dark Eclipse color palette

5DECF3Poseidon Jr.F2A800Groovy GiraffeF12B22Don’t Be ShyC72B4EDry Rose533600Moelleux au Chocolat0F1D43Dark Eclipse
Open in generator Export PNG, PDF, ASE…

About this palette

Poseidon Jr. to Dark Eclipse is a 6-color vibrant, warm palette: #5DECF3 (Poseidon Jr.), #F2A800 (Groovy Giraffe), #F12B22 (Don’t Be Shy), #C72B4E (Dry Rose), #533600 (Moelleux au Chocolat), #0F1D43 (Dark Eclipse). It mixes turquoise, yellow, red, brown, blue tones and feels warm overall. The strongest text pairing is #5DECF3 on #0F1D43 with a contrast ratio of 11.56:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Poseidon Jr.rgb(93, 236, 243)hsl(183, 86%, 66%)
Groovy Giraffergb(242, 168, 0)hsl(42, 100%, 47%)
Don’t Be Shyrgb(241, 43, 34)hsl(3, 88%, 54%)
Dry Rosergb(199, 43, 78)hsl(347, 64%, 47%)
Moelleux au Chocolatrgb(83, 54, 0)hsl(39, 100%, 16%)
Dark Eclipsergb(15, 29, 67)hsl(224, 63%, 16%)

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.56:1 Very good#5DECF3 on #0F1D43
  • Aa11.56:1 Very good#0F1D43 on #5DECF3
  • Aa8.13:1 Very good#F2A800 on #0F1D43
  • Aa8.13:1 Very good#0F1D43 on #F2A800
  • Aa7.79:1 Very good#5DECF3 on #533600
  • Aa7.79:1 Very good#533600 on #5DECF3
  • Aa5.47:1 Good#F2A800 on #533600
  • Aa5.47:1 Good#533600 on #F2A800

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Poseidon Jr. to Dark Eclipse — https://swatchly.xyz/palette/5decf3-f2a800-f12b22-c72b4e-533600-0f1d43 */
:root {
  --poseidon-jr: #5decf3;
  --groovy-giraffe: #f2a800;
  --don-t-be-shy: #f12b22;
  --dry-rose: #c72b4e;
  --moelleux-au-chocolat: #533600;
  --dark-eclipse: #0f1d43;
}

Tailwind CSS v4

/* Poseidon Jr. to Dark Eclipse — https://swatchly.xyz/palette/5decf3-f2a800-f12b22-c72b4e-533600-0f1d43 */
@theme {
  --color-poseidon-jr: #5decf3;
  --color-poseidon-jr-50: #cffdff;
  --color-poseidon-jr-100: #a9f9fc;
  --color-poseidon-jr-200: #5decf3;
  --color-poseidon-jr-300: #5dd3d8;
  --color-poseidon-jr-400: #11b5bc;
  --color-poseidon-jr-500: #00979d;
  --color-poseidon-jr-600: #007a7f;
  --color-poseidon-jr-700: #006165;
  --color-poseidon-jr-800: #004c50;
  --color-poseidon-jr-900: #003b3e;
  --color-poseidon-jr-950: #002527;
  --color-groovy-giraffe: #f2a800;
  --color-groovy-giraffe-50: #ffeed6;
  --color-groovy-giraffe-100: #ffe0b3;
  --color-groovy-giraffe-200: #ffc569;
  --color-groovy-giraffe-300: #f2a800;
  --color-groovy-giraffe-400: #cc8d00;
  --color-groovy-giraffe-500: #aa7500;
  --color-groovy-giraffe-600: #8a5e00;
  --color-groovy-giraffe-700: #6f4b00;
  --color-groovy-giraffe-800: #583b00;
  --color-groovy-giraffe-900: #462d00;
  --color-groovy-giraffe-950: #2c1b00;
  --color-don-t-be-shy: #f12b22;
  --color-don-t-be-shy-50: #fff1ef;
  --color-don-t-be-shy-100: #ffe4df;
  --color-don-t-be-shy-200: #ffc8bf;
  --color-don-t-be-shy-300: #ffa598;
  --color-don-t-be-shy-400: #ff6a5a;
  --color-don-t-be-shy-500: #f12b22;
  --color-don-t-be-shy-600: #cb0004;
  --color-don-t-be-shy-700: #a30002;
  --color-don-t-be-shy-800: #810001;
  --color-don-t-be-shy-900: #660001;
  --color-don-t-be-shy-950: #430000;
  --color-dry-rose: #c72b4e;
  --color-dry-rose-50: #fff1f2;
  --color-dry-rose-100: #ffe5e6;
  --color-dry-rose-200: #ffcacd;
  --color-dry-rose-300: #ffa8b0;
  --color-dry-rose-400: #ff6f83;
  --color-dry-rose-500: #e64c67;
  --color-dry-rose-600: #c72b4e;
  --color-dry-rose-700: #a60e3a;
  --color-dry-rose-800: #85002b;
  --color-dry-rose-900: #68001f;
  --color-dry-rose-950: #440012;
  --color-moelleux-au-chocolat: #533600;
  --color-moelleux-au-chocolat-50: #fff3e3;
  --color-moelleux-au-chocolat-100: #fee8c9;
  --color-moelleux-au-chocolat-200: #edd3af;
  --color-moelleux-au-chocolat-300: #d8bb91;
  --color-moelleux-au-chocolat-400: #ba996c;
  --color-moelleux-au-chocolat-500: #9d7d4e;
  --color-moelleux-au-chocolat-600: #806234;
  --color-moelleux-au-chocolat-700: #664b21;
  --color-moelleux-au-chocolat-800: #533600;
  --color-moelleux-au-chocolat-900: #3e2a0b;
  --color-moelleux-au-chocolat-950: #271904;
  --color-dark-eclipse: #0f1d43;
  --color-dark-eclipse-50: #f1f5ff;
  --color-dark-eclipse-100: #e2ebff;
  --color-dark-eclipse-200: #c6d8fd;
  --color-dark-eclipse-300: #aec1eb;
  --color-dark-eclipse-400: #8ca1cf;
  --color-dark-eclipse-500: #7186b4;
  --color-dark-eclipse-600: #586b97;
  --color-dark-eclipse-700: #44557c;
  --color-dark-eclipse-800: #334265;
  --color-dark-eclipse-900: #263350;
  --color-dark-eclipse-950: #0f1d43;
}

Similar palettes