Cotton Ball to Pretty Twilight Night color palette

F2F8FFCotton Ball A9D681Feijoa 845A84Muted Purple CD8C31Chicken Masala 461A4DPlunged Into Darkness 28476BPretty Twilight Night

Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Ball to Pretty Twilight Night is a 6-color cool palette: #F2F8FF (Cotton Ball), #A9D681 (Feijoa), #845A84 (Muted Purple), #CD8C31 (Chicken Masala), #461A4D (Plunged Into Darkness), #28476B (Pretty Twilight Night). It mixes white, green, pink, orange, purple, blue tones and feels cool overall. The strongest text pairing is #F2F8FF on #461A4D with a contrast ratio of 12.97:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Ball	rgb(242, 248, 255)	hsl(212, 100%, 97%)
Feijoa	rgb(169, 214, 129)	hsl(92, 51%, 67%)
Muted Purple	rgb(132, 90, 132)	hsl(300, 19%, 44%)
Chicken Masala	rgb(205, 140, 49)	hsl(35, 61%, 50%)
Plunged Into Darkness	rgb(70, 26, 77)	hsl(292, 50%, 20%)
Pretty Twilight Night	rgb(40, 71, 107)	hsl(212, 46%, 29%)

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.

Aa12.97:1 Super#F2F8FF on #461A4D
Aa12.97:1 Super#461A4D on #F2F8FF
Aa8.91:1 Very good#F2F8FF on #28476B
Aa8.91:1 Very good#28476B on #F2F8FF
Aa8.33:1 Very good#A9D681 on #461A4D
Aa8.33:1 Very good#461A4D on #A9D681
Aa5.73:1 Good#A9D681 on #28476B
Aa5.73:1 Good#28476B on #A9D681

Color blindness preview

CSS variables

/* Cotton Ball to Pretty Twilight Night — https://swatchly.xyz/palette/f2f8ff-a9d681-845a84-cd8c31-461a4d-28476b */
:root {
  --cotton-ball: #f2f8ff;
  --feijoa: #a9d681;
  --muted-purple: #845a84;
  --chicken-masala: #cd8c31;
  --plunged-into-darkness: #461a4d;
  --pretty-twilight-night: #28476b;
}

Tailwind CSS v4

/* Cotton Ball to Pretty Twilight Night — https://swatchly.xyz/palette/f2f8ff-a9d681-845a84-cd8c31-461a4d-28476b */
@theme {
  --color-cotton-ball: #f2f8ff;
  --color-cotton-ball-50: #f2f8ff;
  --color-cotton-ball-100: #eaedf2;
  --color-cotton-ball-200: #d5d9de;
  --color-cotton-ball-300: #bec2c8;
  --color-cotton-ball-400: #9da3a9;
  --color-cotton-ball-500: #82878d;
  --color-cotton-ball-600: #676c72;
  --color-cotton-ball-700: #51565b;
  --color-cotton-ball-800: #3f4347;
  --color-cotton-ball-900: #303337;
  --color-cotton-ball-950: #1d1f22;
  --color-feijoa: #a9d681;
  --color-feijoa-50: #ecffdd;
  --color-feijoa-100: #ddf9c7;
  --color-feijoa-200: #c7e8ab;
  --color-feijoa-300: #a9d681;
  --color-feijoa-400: #8bb465;
  --color-feijoa-500: #6e9845;
  --color-feijoa-600: #547c29;
  --color-feijoa-700: #3f6313;
  --color-feijoa-800: #2e4d03;
  --color-feijoa-900: #223b00;
  --color-feijoa-950: #132500;
  --color-muted-purple: #845a84;
  --color-muted-purple-50: #ffefff;
  --color-muted-purple-100: #fee0fd;
  --color-muted-purple-200: #edcaed;
  --color-muted-purple-300: #d9b1d9;
  --color-muted-purple-400: #bb90bb;
  --color-muted-purple-500: #a074a0;
  --color-muted-purple-600: #845a84;
  --color-muted-purple-700: #6b456b;
  --color-muted-purple-800: #553455;
  --color-muted-purple-900: #422743;
  --color-muted-purple-950: #2a172b;
  --color-chicken-masala: #cd8c31;
  --color-chicken-masala-50: #fff0e0;
  --color-chicken-masala-100: #ffe3c2;
  --color-chicken-masala-200: #fdc88a;
  --color-chicken-masala-300: #eaaf66;
  --color-chicken-masala-400: #cd8c31;
  --color-chicken-masala-500: #b17201;
  --color-chicken-masala-600: #8f5b00;
  --color-chicken-masala-700: #734800;
  --color-chicken-masala-800: #5b3800;
  --color-chicken-masala-900: #472b00;
  --color-chicken-masala-950: #2e1a00;
  --color-plunged-into-darkness: #461a4d;
  --color-plunged-into-darkness-50: #fdf0ff;
  --color-plunged-into-darkness-100: #fbe1ff;
  --color-plunged-into-darkness-200: #efc8f5;
  --color-plunged-into-darkness-300: #dbafe2;
  --color-plunged-into-darkness-400: #bd8dc5;
  --color-plunged-into-darkness-500: #a170a9;
  --color-plunged-into-darkness-600: #84568c;
  --color-plunged-into-darkness-700: #6a4171;
  --color-plunged-into-darkness-800: #543059;
  --color-plunged-into-darkness-900: #461a4d;
  --color-plunged-into-darkness-950: #29132c;
  --color-pretty-twilight-night: #28476b;
  --color-pretty-twilight-night-50: #eff6ff;
  --color-pretty-twilight-night-100: #deedff;
  --color-pretty-twilight-night-200: #c0dafb;
  --color-pretty-twilight-night-300: #a6c5e9;
  --color-pretty-twilight-night-400: #85a6cd;
  --color-pretty-twilight-night-500: #698bb3;
  --color-pretty-twilight-night-600: #507097;
  --color-pretty-twilight-night-700: #3c5a7d;
  --color-pretty-twilight-night-800: #28476b;
  --color-pretty-twilight-night-900: #203751;
  --color-pretty-twilight-night-950: #122235;
}