Start generating

Nautilus to Poseidon Jr. color palette

273955Nautilus006C71Aqua ObscuraAB5E5ADried Tomatoes568BE6Olympic BlueC9AF57Vegas Gold71E5EBPoseidon Jr.
Open in generator Export PNG, PDF, ASE…

About this palette

Nautilus to Poseidon Jr. is a 6-color cool palette: #273955 (Nautilus), #006C71 (Aqua Obscura), #AB5E5A (Dried Tomatoes), #568BE6 (Olympic Blue), #C9AF57 (Vegas Gold), #71E5EB (Poseidon Jr.). It mixes blue, turquoise, red, yellow tones and feels cool overall. The strongest text pairing is #273955 on #71E5EB with a contrast ratio of 7.83:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nautilusrgb(39, 57, 85)hsl(217, 37%, 24%)
Aqua Obscurargb(0, 108, 113)hsl(183, 100%, 22%)
Dried Tomatoesrgb(171, 94, 90)hsl(3, 33%, 51%)
Olympic Bluergb(86, 139, 230)hsl(218, 74%, 62%)
Vegas Goldrgb(201, 175, 87)hsl(46, 51%, 56%)
Poseidon Jr.rgb(113, 229, 235)hsl(183, 75%, 68%)

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.83:1 Very good#273955 on #71E5EB
  • Aa7.83:1 Very good#71E5EB on #273955
  • Aa5.41:1 Good#273955 on #C9AF57
  • Aa5.41:1 Good#C9AF57 on #273955
  • Aa4.17:1 Poor#006C71 on #71E5EB
  • Aa4.17:1 Poor#71E5EB on #006C71
  • Aa3.46:1 Poor#273955 on #568BE6
  • Aa3.46:1 Poor#568BE6 on #273955

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nautilus to Poseidon Jr. — https://swatchly.xyz/palette/273955-006c71-ab5e5a-568be6-c9af57-71e5eb */
:root {
  --nautilus: #273955;
  --aqua-obscura: #006c71;
  --dried-tomatoes: #ab5e5a;
  --olympic-blue: #568be6;
  --vegas-gold: #c9af57;
  --poseidon-jr: #71e5eb;
}

Tailwind CSS v4

/* Nautilus to Poseidon Jr. — https://swatchly.xyz/palette/273955-006c71-ab5e5a-568be6-c9af57-71e5eb */
@theme {
  --color-nautilus: #273955;
  --color-nautilus-50: #eff6ff;
  --color-nautilus-100: #e0ecff;
  --color-nautilus-200: #c8d9f3;
  --color-nautilus-300: #afc2e0;
  --color-nautilus-400: #8fa4c4;
  --color-nautilus-500: #758aaa;
  --color-nautilus-600: #5c708f;
  --color-nautilus-700: #485a77;
  --color-nautilus-800: #384861;
  --color-nautilus-900: #273955;
  --color-nautilus-950: #1a2434;
  --color-aqua-obscura: #006c71;
  --color-aqua-obscura-50: #dafdff;
  --color-aqua-obscura-100: #c4f6f9;
  --color-aqua-obscura-200: #abe6e9;
  --color-aqua-obscura-300: #8ed2d6;
  --color-aqua-obscura-400: #67b6ba;
  --color-aqua-obscura-500: #479ca1;
  --color-aqua-obscura-600: #298287;
  --color-aqua-obscura-700: #006c71;
  --color-aqua-obscura-800: #005559;
  --color-aqua-obscura-900: #004145;
  --color-aqua-obscura-950: #00292c;
  --color-dried-tomatoes: #ab5e5a;
  --color-dried-tomatoes-50: #fff2f0;
  --color-dried-tomatoes-100: #ffe7e5;
  --color-dried-tomatoes-200: #ffceca;
  --color-dried-tomatoes-300: #f9b3ad;
  --color-dried-tomatoes-400: #df928d;
  --color-dried-tomatoes-500: #c67772;
  --color-dried-tomatoes-600: #ab5e5a;
  --color-dried-tomatoes-700: #8d4643;
  --color-dried-tomatoes-800: #723431;
  --color-dried-tomatoes-900: #5a2523;
  --color-dried-tomatoes-950: #3b1514;
  --color-olympic-blue: #568be6;
  --color-olympic-blue-50: #f2f7ff;
  --color-olympic-blue-100: #e4eeff;
  --color-olympic-blue-200: #c8dcff;
  --color-olympic-blue-300: #a5c7ff;
  --color-olympic-blue-400: #73a7ff;
  --color-olympic-blue-500: #568be6;
  --color-olympic-blue-600: #3b6ec6;
  --color-olympic-blue-700: #2756a6;
  --color-olympic-blue-800: #184188;
  --color-olympic-blue-900: #0e316d;
  --color-olympic-blue-950: #051d48;
  --color-vegas-gold: #c9af57;
  --color-vegas-gold-50: #fffbec;
  --color-vegas-gold-100: #fff3cc;
  --color-vegas-gold-200: #f3e2a9;
  --color-vegas-gold-300: #e2cd8a;
  --color-vegas-gold-400: #c9af57;
  --color-vegas-gold-500: #aa9038;
  --color-vegas-gold-600: #8c730d;
  --color-vegas-gold-700: #6f5a00;
  --color-vegas-gold-800: #564500;
  --color-vegas-gold-900: #413400;
  --color-vegas-gold-950: #271e00;
  --color-poseidon-jr: #71e5eb;
  --color-poseidon-jr-50: #c4fcff;
  --color-poseidon-jr-100: #adf4f7;
  --color-poseidon-jr-200: #71e5eb;
  --color-poseidon-jr-300: #6bcdd2;
  --color-poseidon-jr-400: #3ab0b6;
  --color-poseidon-jr-500: #00959b;
  --color-poseidon-jr-600: #00797e;
  --color-poseidon-jr-700: #006165;
  --color-poseidon-jr-800: #004c50;
  --color-poseidon-jr-900: #003b3e;
  --color-poseidon-jr-950: #002527;
}

Similar palettes