Nautilus to Alpaca Color Palette

About this palette

Nautilus to Alpaca is a 5-color muted, cool palette: #283B52 (Nautilus), #4E6A90 (Queen Blue), #6697BA (Windstorm), #CFAC86 (Toast and Butter), #F8EDE2 (Alpaca). It mixes blue, orange, white tones and feels cool overall. The strongest text pairing is #283B52 on #F8EDE2 with a contrast ratio of 9.91:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nautilus	rgb(40, 59, 82)	hsl(213, 34%, 24%)
Queen Blue	rgb(78, 106, 144)	hsl(215, 30%, 44%)
Windstorm	rgb(102, 151, 186)	hsl(205, 38%, 56%)
Toast and Butter	rgb(207, 172, 134)	hsl(31, 43%, 67%)
Alpaca	rgb(248, 237, 226)	hsl(30, 61%, 93%)

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.91:1 Very good#283B52 on #F8EDE2
Aa9.91:1 Very good#F8EDE2 on #283B52
Aa5.39:1 Good#283B52 on #CFAC86
Aa5.39:1 Good#CFAC86 on #283B52
Aa4.81:1 Good#4E6A90 on #F8EDE2
Aa4.81:1 Good#F8EDE2 on #4E6A90
Aa3.65:1 Poor#283B52 on #6697BA
Aa3.65:1 Poor#6697BA on #283B52

Color blindness preview

CSS variables

/* Nautilus to Alpaca — https://swatchly.xyz/palette/283b52-4e6a90-6697ba-cfac86-f8ede2 */
:root {
  --nautilus: #283b52;
  --queen-blue: #4e6a90;
  --windstorm: #6697ba;
  --toast-and-butter: #cfac86;
  --alpaca: #f8ede2;
}

Tailwind CSS v4

/* Nautilus to Alpaca — https://swatchly.xyz/palette/283b52-4e6a90-6697ba-cfac86-f8ede2 */
@theme {
  --color-nautilus: #283b52;
  --color-nautilus-50: #eff6ff;
  --color-nautilus-100: #deedff;
  --color-nautilus-200: #c8d9ef;
  --color-nautilus-300: #afc3db;
  --color-nautilus-400: #90a5bf;
  --color-nautilus-500: #758ba5;
  --color-nautilus-600: #5d728b;
  --color-nautilus-700: #495c73;
  --color-nautilus-800: #394a5e;
  --color-nautilus-900: #283b52;
  --color-nautilus-950: #1a2533;
  --color-queen-blue: #4e6a90;
  --color-queen-blue-50: #eff6ff;
  --color-queen-blue-100: #deecff;
  --color-queen-blue-200: #c1d8f9;
  --color-queen-blue-300: #a7c1e6;
  --color-queen-blue-400: #84a1c9;
  --color-queen-blue-500: #6885ad;
  --color-queen-blue-600: #4e6a90;
  --color-queen-blue-700: #3b5475;
  --color-queen-blue-800: #2c415e;
  --color-queen-blue-900: #20324b;
  --color-queen-blue-950: #121f30;
  --color-windstorm: #6697ba;
  --color-windstorm-50: #f0f8ff;
  --color-windstorm-100: #e0f2ff;
  --color-windstorm-200: #bfe3fd;
  --color-windstorm-300: #a5ceed;
  --color-windstorm-400: #83b1d3;
  --color-windstorm-500: #6697ba;
  --color-windstorm-600: #4a7a9c;
  --color-windstorm-700: #346180;
  --color-windstorm-800: #234b66;
  --color-windstorm-900: #173950;
  --color-windstorm-950: #0a2333;
  --color-toast-and-butter: #cfac86;
  --color-toast-and-butter-50: #ffead4;
  --color-toast-and-butter-100: #f6ddc2;
  --color-toast-and-butter-200: #e3c6a7;
  --color-toast-and-butter-300: #cfac86;
  --color-toast-and-butter-400: #b18f6b;
  --color-toast-and-butter-500: #977752;
  --color-toast-and-butter-600: #7e5f3c;
  --color-toast-and-butter-700: #674b2b;
  --color-toast-and-butter-800: #533b1f;
  --color-toast-and-butter-900: #432e16;
  --color-toast-and-butter-950: #2b1c0a;
  --color-alpaca: #f8ede2;
  --color-alpaca-50: #fdf7f1;
  --color-alpaca-100: #f8ede2;
  --color-alpaca-200: #e1d9d1;
  --color-alpaca-300: #cbc2b9;
  --color-alpaca-400: #aba198;
  --color-alpaca-500: #8f857c;
  --color-alpaca-600: #746b61;
  --color-alpaca-700: #5c544b;
  --color-alpaca-800: #48413a;
  --color-alpaca-900: #38322b;
  --color-alpaca-950: #231e1a;
}