Start generating

Nautilus to Puffy Cloud color palette

1F4061Nautilus236779Persian Mosaic357CA8Zenith699BA2Tranquili TealBCBBFEPurple IllusionDAE1FAPuffy Cloud
Open in generator Export PNG, PDF, ASE…

About this palette

Nautilus to Puffy Cloud is a 6-color cool palette: #1F4061 (Nautilus), #236779 (Persian Mosaic), #357CA8 (Zenith), #699BA2 (Tranquili Teal), #BCBBFE (Purple Illusion), #DAE1FA (Puffy Cloud). It mixes blue, turquoise, purple, gray tones and feels cool overall. The strongest text pairing is #1F4061 on #DAE1FA with a contrast ratio of 8.21:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nautilusrgb(31, 64, 97)hsl(210, 52%, 25%)
Persian Mosaicrgb(35, 103, 121)hsl(193, 55%, 31%)
Zenithrgb(53, 124, 168)hsl(203, 52%, 43%)
Tranquili Tealrgb(105, 155, 162)hsl(187, 23%, 52%)
Purple Illusionrgb(188, 187, 254)hsl(241, 97%, 86%)
Puffy Cloudrgb(218, 225, 250)hsl(227, 76%, 92%)

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.

  • Aa8.21:1 Very good#1F4061 on #DAE1FA
  • Aa8.21:1 Very good#DAE1FA on #1F4061
  • Aa5.95:1 Good#1F4061 on #BCBBFE
  • Aa5.95:1 Good#BCBBFE on #1F4061
  • Aa4.91:1 Good#236779 on #DAE1FA
  • Aa4.91:1 Good#DAE1FA on #236779
  • Aa3.55:1 Poor#236779 on #BCBBFE
  • Aa3.55:1 Poor#BCBBFE on #236779

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nautilus to Puffy Cloud — https://swatchly.xyz/palette/1f4061-236779-357ca8-699ba2-bcbbfe-dae1fa */
:root {
  --nautilus: #1f4061;
  --persian-mosaic: #236779;
  --zenith: #357ca8;
  --tranquili-teal: #699ba2;
  --purple-illusion: #bcbbfe;
  --puffy-cloud: #dae1fa;
}

Tailwind CSS v4

/* Nautilus to Puffy Cloud — https://swatchly.xyz/palette/1f4061-236779-357ca8-699ba2-bcbbfe-dae1fa */
@theme {
  --color-nautilus: #1f4061;
  --color-nautilus-50: #eef6ff;
  --color-nautilus-100: #ddedff;
  --color-nautilus-200: #bfdbf9;
  --color-nautilus-300: #a4c4e6;
  --color-nautilus-400: #80a3c8;
  --color-nautilus-500: #6487ac;
  --color-nautilus-600: #4a6c8f;
  --color-nautilus-700: #365473;
  --color-nautilus-800: #1f4061;
  --color-nautilus-900: #1b3147;
  --color-nautilus-950: #0e1e2e;
  --color-persian-mosaic: #236779;
  --color-persian-mosaic-50: #e6f9ff;
  --color-persian-mosaic-100: #ccf3ff;
  --color-persian-mosaic-200: #b3e2f1;
  --color-persian-mosaic-300: #98cedf;
  --color-persian-mosaic-400: #73b1c3;
  --color-persian-mosaic-500: #5697aa;
  --color-persian-mosaic-600: #3c7d8f;
  --color-persian-mosaic-700: #236779;
  --color-persian-mosaic-800: #165160;
  --color-persian-mosaic-900: #0a3f4b;
  --color-persian-mosaic-950: #022831;
  --color-zenith: #357ca8;
  --color-zenith-50: #ecf7ff;
  --color-zenith-100: #dcf0ff;
  --color-zenith-200: #b7e1ff;
  --color-zenith-300: #94cef6;
  --color-zenith-400: #6fb0dc;
  --color-zenith-500: #5096c3;
  --color-zenith-600: #357ca8;
  --color-zenith-700: #1e638b;
  --color-zenith-800: #0b4d71;
  --color-zenith-900: #013b59;
  --color-zenith-950: #00253a;
  --color-tranquili-teal: #699ba2;
  --color-tranquili-teal-50: #e6fcff;
  --color-tranquili-teal-100: #d8f6fa;
  --color-tranquili-teal-200: #c1e5ea;
  --color-tranquili-teal-300: #a8d1d7;
  --color-tranquili-teal-400: #85b5bb;
  --color-tranquili-teal-500: #699ba2;
  --color-tranquili-teal-600: #4d7e85;
  --color-tranquili-teal-700: #36646b;
  --color-tranquili-teal-800: #254e54;
  --color-tranquili-teal-900: #193c41;
  --color-tranquili-teal-950: #0b2528;
  --color-purple-illusion: #bcbbfe;
  --color-purple-illusion-50: #f5f5ff;
  --color-purple-illusion-100: #eaebff;
  --color-purple-illusion-200: #d4d5ff;
  --color-purple-illusion-300: #bcbbfe;
  --color-purple-illusion-400: #9d9cda;
  --color-purple-illusion-500: #817fbe;
  --color-purple-illusion-600: #6765a0;
  --color-purple-illusion-700: #514e84;
  --color-purple-illusion-800: #3f3c6b;
  --color-purple-illusion-900: #2f2d55;
  --color-purple-illusion-950: #1d1b37;
  --color-puffy-cloud: #dae1fa;
  --color-puffy-cloud-50: #e8edfc;
  --color-puffy-cloud-100: #dae1fa;
  --color-puffy-cloud-200: #cacfe2;
  --color-puffy-cloud-300: #b4bacf;
  --color-puffy-cloud-400: #969cb3;
  --color-puffy-cloud-500: #7c8299;
  --color-puffy-cloud-600: #64697f;
  --color-puffy-cloud-700: #4f5468;
  --color-puffy-cloud-800: #3d4252;
  --color-puffy-cloud-900: #2e3240;
  --color-puffy-cloud-950: #1c1f29;
}

Similar palettes