Mellow Mint to Star of Life color palette

DFEBB5Mellow Mint AA99E1Dreamy Candy Forest 00587EWhale’s Tale 2D1C09Burnt Coffee 0079C5Star of Life

Open in generator Export PNG, PDF, ASE…

About this palette

Mellow Mint to Star of Life is a 5-color cool palette: #DFEBB5 (Mellow Mint), #AA99E1 (Dreamy Candy Forest), #00587E (Whale’s Tale), #2D1C09 (Burnt Coffee), #0079C5 (Star of Life). It mixes green, purple, blue, brown tones and feels cool overall. The strongest text pairing is #DFEBB5 on #2D1C09 with a contrast ratio of 13.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mellow Mint	rgb(223, 235, 181)	hsl(73, 57%, 82%)
Dreamy Candy Forest	rgb(170, 153, 225)	hsl(254, 55%, 74%)
Whale’s Tale	rgb(0, 88, 126)	hsl(198, 100%, 25%)
Burnt Coffee	rgb(45, 28, 9)	hsl(32, 67%, 11%)
Star of Life	rgb(0, 121, 197)	hsl(203, 100%, 39%)

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.

Aa13.02:1 Super#DFEBB5 on #2D1C09
Aa13.02:1 Super#2D1C09 on #DFEBB5
Aa6.52:1 Good#AA99E1 on #2D1C09
Aa6.52:1 Good#2D1C09 on #AA99E1
Aa6.19:1 Good#DFEBB5 on #00587E
Aa6.19:1 Good#00587E on #DFEBB5
Aa3.67:1 Poor#DFEBB5 on #0079C5
Aa3.67:1 Poor#0079C5 on #DFEBB5

Color blindness preview

CSS variables

/* Mellow Mint to Star of Life — https://swatchly.xyz/palette/dfebb5-aa99e1-00587e-2d1c09-0079c5 */
:root {
  --mellow-mint: #dfebb5;
  --dreamy-candy-forest: #aa99e1;
  --whale-s-tale: #00587e;
  --burnt-coffee: #2d1c09;
  --star-of-life: #0079c5;
}

Tailwind CSS v4

/* Mellow Mint to Star of Life — https://swatchly.xyz/palette/dfebb5-aa99e1-00587e-2d1c09-0079c5 */
@theme {
  --color-mellow-mint: #dfebb5;
  --color-mellow-mint-50: #ecf3d4;
  --color-mellow-mint-100: #dfebb5;
  --color-mellow-mint-200: #ced7ae;
  --color-mellow-mint-300: #b8c295;
  --color-mellow-mint-400: #9aa473;
  --color-mellow-mint-500: #808a58;
  --color-mellow-mint-600: #677040;
  --color-mellow-mint-700: #525a2e;
  --color-mellow-mint-800: #3f4720;
  --color-mellow-mint-900: #303615;
  --color-mellow-mint-950: #1d220a;
  --color-dreamy-candy-forest: #aa99e1;
  --color-dreamy-candy-forest-50: #f7f5ff;
  --color-dreamy-candy-forest-100: #eeeaff;
  --color-dreamy-candy-forest-200: #ddd4ff;
  --color-dreamy-candy-forest-300: #c8baf8;
  --color-dreamy-candy-forest-400: #aa99e1;
  --color-dreamy-candy-forest-500: #8e7dc2;
  --color-dreamy-candy-forest-600: #7362a4;
  --color-dreamy-candy-forest-700: #5b4b88;
  --color-dreamy-candy-forest-800: #47396e;
  --color-dreamy-candy-forest-900: #362a57;
  --color-dreamy-candy-forest-950: #211838;
  --color-whale-s-tale: #00587e;
  --color-whale-s-tale-50: #ebf7ff;
  --color-whale-s-tale-100: #d7efff;
  --color-whale-s-tale-200: #abdfff;
  --color-whale-s-tale-300: #8cc8ed;
  --color-whale-s-tale-400: #65a8d1;
  --color-whale-s-tale-500: #458cb4;
  --color-whale-s-tale-600: #297096;
  --color-whale-s-tale-700: #00587e;
  --color-whale-s-tale-800: #044562;
  --color-whale-s-tale-900: #00354e;
  --color-whale-s-tale-950: #002132;
  --color-burnt-coffee: #2d1c09;
  --color-burnt-coffee-50: #fff3e7;
  --color-burnt-coffee-100: #f7e8da;
  --color-burnt-coffee-200: #e6d4c3;
  --color-burnt-coffee-300: #d1bdaa;
  --color-burnt-coffee-400: #b39d88;
  --color-burnt-coffee-500: #97826d;
  --color-burnt-coffee-600: #7c6854;
  --color-burnt-coffee-700: #64523f;
  --color-burnt-coffee-800: #50402f;
  --color-burnt-coffee-900: #3e3123;
  --color-burnt-coffee-950: #2d1c09;
  --color-star-of-life: #0079c5;
  --color-star-of-life-50: #edf6ff;
  --color-star-of-life-100: #dfefff;
  --color-star-of-life-200: #bddfff;
  --color-star-of-life-300: #94ccff;
  --color-star-of-life-400: #56aefa;
  --color-star-of-life-500: #3193e1;
  --color-star-of-life-600: #0079c5;
  --color-star-of-life-700: #00609e;
  --color-star-of-life-800: #004b7d;
  --color-star-of-life-900: #003961;
  --color-star-of-life-950: #00233f;
}