Cotton Clouds to Sailor Moonlight color palette

C1E3F2Cotton Clouds ABD4BDFrosted Fir A2CEF3Andromeda Blue FFDEDDDawn Patrol EDF5B2Sailor Moonlight

About this palette

Cotton Clouds to Sailor Moonlight is a 5-color pastel, light, cool palette: #C1E3F2 (Cotton Clouds), #ABD4BD (Frosted Fir), #A2CEF3 (Andromeda Blue), #FFDEDD (Dawn Patrol), #EDF5B2 (Sailor Moonlight). It mixes blue, green, pink tones and feels cool overall. The strongest text pairing is #A2CEF3 on #EDF5B2 with a contrast ratio of 1.45:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Clouds	rgb(193, 227, 242)	hsl(198, 65%, 85%)
Frosted Fir	rgb(171, 212, 189)	hsl(146, 32%, 75%)
Andromeda Blue	rgb(162, 206, 243)	hsl(207, 77%, 79%)
Dawn Patrol	rgb(255, 222, 221)	hsl(2, 100%, 93%)
Sailor Moonlight	rgb(237, 245, 178)	hsl(67, 77%, 83%)

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.

Color blindness preview

CSS variables

/* Cotton Clouds to Sailor Moonlight — https://swatchly.xyz/palette/c1e3f2-abd4bd-a2cef3-ffdedd-edf5b2 */
:root {
  --cotton-clouds: #c1e3f2;
  --frosted-fir: #abd4bd;
  --andromeda-blue: #a2cef3;
  --dawn-patrol: #ffdedd;
  --sailor-moonlight: #edf5b2;
}

Tailwind CSS v4

/* Cotton Clouds to Sailor Moonlight — https://swatchly.xyz/palette/c1e3f2-abd4bd-a2cef3-ffdedd-edf5b2 */
@theme {
  --color-cotton-clouds: #c1e3f2;
  --color-cotton-clouds-50: #f1fbff;
  --color-cotton-clouds-100: #dff3fc;
  --color-cotton-clouds-200: #c1e3f2;
  --color-cotton-clouds-300: #afcad7;
  --color-cotton-clouds-400: #8baab8;
  --color-cotton-clouds-500: #6e8e9c;
  --color-cotton-clouds-600: #547380;
  --color-cotton-clouds-700: #3f5b67;
  --color-cotton-clouds-800: #2e4651;
  --color-cotton-clouds-900: #22363f;
  --color-cotton-clouds-950: #132228;
  --color-frosted-fir: #abd4bd;
  --color-frosted-fir-50: #ebfff3;
  --color-frosted-fir-100: #dff7ea;
  --color-frosted-fir-200: #c9e6d6;
  --color-frosted-fir-300: #abd4bd;
  --color-frosted-fir-400: #8cb29d;
  --color-frosted-fir-500: #6f9580;
  --color-frosted-fir-600: #537965;
  --color-frosted-fir-700: #3e604e;
  --color-frosted-fir-800: #2d4b3b;
  --color-frosted-fir-900: #20392c;
  --color-frosted-fir-950: #11241a;
  --color-andromeda-blue: #a2cef3;
  --color-andromeda-blue-50: #f4faff;
  --color-andromeda-blue-100: #e4f2ff;
  --color-andromeda-blue-200: #c3e2fd;
  --color-andromeda-blue-300: #a2cef3;
  --color-andromeda-blue-400: #84adce;
  --color-andromeda-blue-500: #6690b2;
  --color-andromeda-blue-600: #4b7495;
  --color-andromeda-blue-700: #365b79;
  --color-andromeda-blue-800: #264761;
  --color-andromeda-blue-900: #1a354b;
  --color-andromeda-blue-950: #0d2131;
  --color-dawn-patrol: #ffdedd;
  --color-dawn-patrol-50: #ffedec;
  --color-dawn-patrol-100: #ffdedd;
  --color-dawn-patrol-200: #e6cdcd;
  --color-dawn-patrol-300: #d2b7b6;
  --color-dawn-patrol-400: #b59796;
  --color-dawn-patrol-500: #9a7d7c;
  --color-dawn-patrol-600: #7f6363;
  --color-dawn-patrol-700: #674e4d;
  --color-dawn-patrol-800: #523c3c;
  --color-dawn-patrol-900: #402d2d;
  --color-dawn-patrol-950: #281b1b;
  --color-sailor-moonlight: #edf5b2;
  --color-sailor-moonlight-50: #f7fbd9;
  --color-sailor-moonlight-100: #edf5b2;
  --color-sailor-moonlight-200: #d9dfb0;
  --color-sailor-moonlight-300: #c2c892;
  --color-sailor-moonlight-400: #a2a96c;
  --color-sailor-moonlight-500: #878d4e;
  --color-sailor-moonlight-600: #6c7234;
  --color-sailor-moonlight-700: #555a20;
  --color-sailor-moonlight-800: #424612;
  --color-sailor-moonlight-900: #333609;
  --color-sailor-moonlight-950: #1f2203;
}