Astral to Cotton Boll color palette

346E83Astral 214B5BMallard 65A4C6Surgical 59869DHorizon A9C8D9Life at Sea DEF1FDCotton Boll

About this palette

Astral to Cotton Boll is a 6-color muted, cool, monochromatic palette: #346E83 (Astral), #214B5B (Mallard), #65A4C6 (Surgical), #59869D (Horizon), #A9C8D9 (Life at Sea), #DEF1FD (Cotton Boll). It mixes blue, white tones and feels cool overall. The strongest text pairing is #214B5B on #DEF1FD with a contrast ratio of 8.15:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Astral	rgb(52, 110, 131)	hsl(196, 43%, 36%)
Mallard	rgb(33, 75, 91)	hsl(197, 47%, 24%)
Surgical	rgb(101, 164, 198)	hsl(201, 46%, 59%)
Horizon	rgb(89, 134, 157)	hsl(200, 28%, 48%)
Life at Sea	rgb(169, 200, 217)	hsl(201, 39%, 76%)
Cotton Boll	rgb(222, 241, 253)	hsl(203, 89%, 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.

Aa8.15:1 Very good#214B5B on #DEF1FD
Aa8.15:1 Very good#DEF1FD on #214B5B
Aa5.38:1 Good#214B5B on #A9C8D9
Aa5.38:1 Good#A9C8D9 on #214B5B
Aa4.89:1 Good#346E83 on #DEF1FD
Aa4.89:1 Good#DEF1FD on #346E83
Aa3.46:1 Poor#214B5B on #65A4C6
Aa3.46:1 Poor#65A4C6 on #214B5B

Color blindness preview

CSS variables

/* Astral to Cotton Boll — https://swatchly.xyz/palette/346e83-214b5b-65a4c6-59869d-a9c8d9-def1fd */
:root {
  --astral: #346e83;
  --mallard: #214b5b;
  --surgical: #65a4c6;
  --horizon: #59869d;
  --life-at-sea: #a9c8d9;
  --cotton-boll: #def1fd;
}

Tailwind CSS v4

/* Astral to Cotton Boll — https://swatchly.xyz/palette/346e83-214b5b-65a4c6-59869d-a9c8d9-def1fd */
@theme {
  --color-astral: #346e83;
  --color-astral-50: #e8f8ff;
  --color-astral-100: #cdf1ff;
  --color-astral-200: #b1ddef;
  --color-astral-300: #94c6da;
  --color-astral-400: #6ea6bc;
  --color-astral-500: #508aa0;
  --color-astral-600: #346e83;
  --color-astral-700: #24586a;
  --color-astral-800: #164555;
  --color-astral-900: #0d3543;
  --color-astral-950: #05212b;
  --color-mallard: #214b5b;
  --color-mallard-50: #e8f8ff;
  --color-mallard-100: #d5f0fc;
  --color-mallard-200: #bddeec;
  --color-mallard-300: #a3c8d8;
  --color-mallard-400: #80aabb;
  --color-mallard-500: #648fa1;
  --color-mallard-600: #4b7485;
  --color-mallard-700: #375e6d;
  --color-mallard-800: #214b5b;
  --color-mallard-900: #1c3945;
  --color-mallard-950: #0f242c;
  --color-surgical: #65a4c6;
  --color-surgical-50: #e6f6ff;
  --color-surgical-100: #ceedff;
  --color-surgical-200: #abdbf6;
  --color-surgical-300: #8dc4e3;
  --color-surgical-400: #65a4c6;
  --color-surgical-500: #4b89aa;
  --color-surgical-600: #326f8f;
  --color-surgical-700: #1f5975;
  --color-surgical-800: #11465f;
  --color-surgical-900: #08374c;
  --color-surgical-950: #022332;
  --color-horizon: #59869d;
  --color-horizon-50: #e7f7ff;
  --color-horizon-100: #d0eefe;
  --color-horizon-200: #b6daed;
  --color-horizon-300: #9ac3d8;
  --color-horizon-400: #76a3ba;
  --color-horizon-500: #59869d;
  --color-horizon-600: #416c82;
  --color-horizon-700: #2f566a;
  --color-horizon-800: #214455;
  --color-horizon-900: #173543;
  --color-horizon-950: #0b212c;
  --color-life-at-sea: #a9c8d9;
  --color-life-at-sea-50: #ecf8ff;
  --color-life-at-sea-100: #ddf0fb;
  --color-life-at-sea-200: #c6ddea;
  --color-life-at-sea-300: #a9c8d9;
  --color-life-at-sea-400: #8ba8b8;
  --color-life-at-sea-500: #6f8c9c;
  --color-life-at-sea-600: #557180;
  --color-life-at-sea-700: #405a67;
  --color-life-at-sea-800: #304652;
  --color-life-at-sea-900: #233640;
  --color-life-at-sea-950: #142129;
  --color-cotton-boll: #def1fd;
  --color-cotton-boll-50: #eff9ff;
  --color-cotton-boll-100: #def1fd;
  --color-cotton-boll-200: #cedce4;
  --color-cotton-boll-300: #b6c5cf;
  --color-cotton-boll-400: #95a6b0;
  --color-cotton-boll-500: #798a95;
  --color-cotton-boll-600: #5e6f79;
  --color-cotton-boll-700: #495861;
  --color-cotton-boll-800: #37444c;
  --color-cotton-boll-900: #2a353b;
  --color-cotton-boll-950: #192025;
}