Start generating

Nautical Creatures to Royal Milk Tea color palette

1F5F7CNautical Creatures527688Plumbeous7D8D94Roman SilverA8A39FShadow of the ColossusD3BAA9Smoke DragonFFD1B2Royal Milk Tea
Open in generator Export PNG, PDF, ASE…

About this palette

Nautical Creatures to Royal Milk Tea is a 6-color muted palette: #1F5F7C (Nautical Creatures), #527688 (Plumbeous), #7D8D94 (Roman Silver), #A8A39F (Shadow of the Colossus), #D3BAA9 (Smoke Dragon), #FFD1B2 (Royal Milk Tea). It mixes blue, gray, orange tones and feels balanced overall. The strongest text pairing is #1F5F7C on #FFD1B2 with a contrast ratio of 5.03:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nautical Creaturesrgb(31, 95, 124)hsl(199, 60%, 30%)
Plumbeousrgb(82, 118, 136)hsl(200, 25%, 43%)
Roman Silverrgb(125, 141, 148)hsl(198, 10%, 54%)
Shadow of the Colossusrgb(168, 163, 159)hsl(27, 5%, 64%)
Smoke Dragonrgb(211, 186, 169)hsl(24, 32%, 75%)
Royal Milk Teargb(255, 209, 178)hsl(24, 100%, 85%)

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.

  • Aa5.03:1 Good#1F5F7C on #FFD1B2
  • Aa5.03:1 Good#FFD1B2 on #1F5F7C
  • Aa3.81:1 Poor#1F5F7C on #D3BAA9
  • Aa3.81:1 Poor#D3BAA9 on #1F5F7C
  • Aa3.49:1 Poor#527688 on #FFD1B2
  • Aa3.49:1 Poor#FFD1B2 on #527688

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nautical Creatures to Royal Milk Tea — https://swatchly.xyz/palette/1f5f7c-527688-7d8d94-a8a39f-d3baa9-ffd1b2 */
:root {
  --nautical-creatures: #1f5f7c;
  --plumbeous: #527688;
  --roman-silver: #7d8d94;
  --shadow-of-the-colossus: #a8a39f;
  --smoke-dragon: #d3baa9;
  --royal-milk-tea: #ffd1b2;
}

Tailwind CSS v4

/* Nautical Creatures to Royal Milk Tea — https://swatchly.xyz/palette/1f5f7c-527688-7d8d94-a8a39f-d3baa9-ffd1b2 */
@theme {
  --color-nautical-creatures: #1f5f7c;
  --color-nautical-creatures-50: #eaf8ff;
  --color-nautical-creatures-100: #d5f0ff;
  --color-nautical-creatures-200: #b2e0f8;
  --color-nautical-creatures-300: #96cae6;
  --color-nautical-creatures-400: #71acca;
  --color-nautical-creatures-500: #5390af;
  --color-nautical-creatures-600: #397693;
  --color-nautical-creatures-700: #1f5f7c;
  --color-nautical-creatures-800: #164a62;
  --color-nautical-creatures-900: #0b394d;
  --color-nautical-creatures-950: #032432;
  --color-plumbeous: #527688;
  --color-plumbeous-50: #eaf8ff;
  --color-plumbeous-100: #d9f0fd;
  --color-plumbeous-200: #c2deed;
  --color-plumbeous-300: #a9c9da;
  --color-plumbeous-400: #87abbd;
  --color-plumbeous-500: #6b90a3;
  --color-plumbeous-600: #527688;
  --color-plumbeous-700: #3d5e6e;
  --color-plumbeous-800: #2c4958;
  --color-plumbeous-900: #203844;
  --color-plumbeous-950: #11232c;
  --color-roman-silver: #7d8d94;
  --color-roman-silver-50: #eef8fc;
  --color-roman-silver-100: #e4eff3;
  --color-roman-silver-200: #cfdce1;
  --color-roman-silver-300: #b8c6cd;
  --color-roman-silver-400: #98a8af;
  --color-roman-silver-500: #7d8d94;
  --color-roman-silver-600: #627278;
  --color-roman-silver-700: #4c5a60;
  --color-roman-silver-800: #3a464c;
  --color-roman-silver-900: #2b363a;
  --color-roman-silver-950: #1a2124;
  --color-shadow-of-the-colossus: #a8a39f;
  --color-shadow-of-the-colossus-50: #f8f5f3;
  --color-shadow-of-the-colossus-100: #efece9;
  --color-shadow-of-the-colossus-200: #dcd8d5;
  --color-shadow-of-the-colossus-300: #c7c2bf;
  --color-shadow-of-the-colossus-400: #a8a39f;
  --color-shadow-of-the-colossus-500: #8c8783;
  --color-shadow-of-the-colossus-600: #716c69;
  --color-shadow-of-the-colossus-700: #5a5652;
  --color-shadow-of-the-colossus-800: #46423f;
  --color-shadow-of-the-colossus-900: #363330;
  --color-shadow-of-the-colossus-950: #211f1d;
  --color-smoke-dragon: #d3baa9;
  --color-smoke-dragon-50: #fff2e8;
  --color-smoke-dragon-100: #f7e7dc;
  --color-smoke-dragon-200: #e5d2c5;
  --color-smoke-dragon-300: #d3baa9;
  --color-smoke-dragon-400: #b29b8b;
  --color-smoke-dragon-500: #978070;
  --color-smoke-dragon-600: #7c6657;
  --color-smoke-dragon-700: #645043;
  --color-smoke-dragon-800: #4f3e32;
  --color-smoke-dragon-900: #3e2f25;
  --color-smoke-dragon-950: #271d15;
  --color-royal-milk-tea: #ffd1b2;
  --color-royal-milk-tea-50: #fff6f0;
  --color-royal-milk-tea-100: #ffeadc;
  --color-royal-milk-tea-200: #ffd1b2;
  --color-royal-milk-tea-300: #e1bca2;
  --color-royal-milk-tea-400: #c49a7e;
  --color-royal-milk-tea-500: #a87e61;
  --color-royal-milk-tea-600: #8b6347;
  --color-royal-milk-tea-700: #704d33;
  --color-royal-milk-tea-800: #593a24;
  --color-royal-milk-tea-900: #462c19;
  --color-royal-milk-tea-950: #2d1a0d;
}

Similar palettes