Deep Sea Base to Mystery Mint color palette

292D55Deep Sea Base 733933Crown of Thorns 377C40Cucumber Queen 7F8CBFGalactic Gossamer F7B19CWax Flower C1EBCBMystery Mint

Open in generator Export PNG, PDF, ASE…

About this palette

Deep Sea Base to Mystery Mint is a 6-color cool palette: #292D55 (Deep Sea Base), #733933 (Crown of Thorns), #377C40 (Cucumber Queen), #7F8CBF (Galactic Gossamer), #F7B19C (Wax Flower), #C1EBCB (Mystery Mint). It mixes purple, brown, green, blue, pink tones and feels cool overall. The strongest text pairing is #292D55 on #C1EBCB with a contrast ratio of 10.00:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Deep Sea Base	rgb(41, 45, 85)	hsl(235, 35%, 25%)
Crown of Thorns	rgb(115, 57, 51)	hsl(6, 39%, 33%)
Cucumber Queen	rgb(55, 124, 64)	hsl(128, 39%, 35%)
Galactic Gossamer	rgb(127, 140, 191)	hsl(228, 33%, 62%)
Wax Flower	rgb(247, 177, 156)	hsl(14, 85%, 79%)
Mystery Mint	rgb(193, 235, 203)	hsl(134, 51%, 84%)

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.

Aa10.00:1 Very good#292D55 on #C1EBCB
Aa10.00:1 Very good#C1EBCB on #292D55
Aa7.32:1 Very good#292D55 on #F7B19C
Aa7.32:1 Very good#F7B19C on #292D55
Aa6.78:1 Good#733933 on #C1EBCB
Aa6.78:1 Good#C1EBCB on #733933
Aa4.96:1 Good#733933 on #F7B19C
Aa4.96:1 Good#F7B19C on #733933

Color blindness preview

CSS variables

/* Deep Sea Base to Mystery Mint — https://swatchly.xyz/palette/292d55-733933-377c40-7f8cbf-f7b19c-c1ebcb */
:root {
  --deep-sea-base: #292d55;
  --crown-of-thorns: #733933;
  --cucumber-queen: #377c40;
  --galactic-gossamer: #7f8cbf;
  --wax-flower: #f7b19c;
  --mystery-mint: #c1ebcb;
}

Tailwind CSS v4

/* Deep Sea Base to Mystery Mint — https://swatchly.xyz/palette/292d55-733933-377c40-7f8cbf-f7b19c-c1ebcb */
@theme {
  --color-deep-sea-base: #292d55;
  --color-deep-sea-base-50: #f2f4ff;
  --color-deep-sea-base-100: #e6eaff;
  --color-deep-sea-base-200: #ced5fb;
  --color-deep-sea-base-300: #b7bee9;
  --color-deep-sea-base-400: #969ecc;
  --color-deep-sea-base-500: #7b82b1;
  --color-deep-sea-base-600: #616793;
  --color-deep-sea-base-700: #4b5179;
  --color-deep-sea-base-800: #393e61;
  --color-deep-sea-base-900: #292d55;
  --color-deep-sea-base-950: #1a1c31;
  --color-crown-of-thorns: #733933;
  --color-crown-of-thorns-50: #fff2f0;
  --color-crown-of-thorns-100: #ffe4e0;
  --color-crown-of-thorns-200: #fcc7c0;
  --color-crown-of-thorns-300: #e8aca4;
  --color-crown-of-thorns-400: #ca8981;
  --color-crown-of-thorns-500: #ac6c65;
  --color-crown-of-thorns-600: #8c514b;
  --color-crown-of-thorns-700: #733933;
  --color-crown-of-thorns-800: #592d28;
  --color-crown-of-thorns-900: #46211d;
  --color-crown-of-thorns-950: #2d1310;
  --color-cucumber-queen: #377c40;
  --color-cucumber-queen-50: #e0ffe1;
  --color-cucumber-queen-100: #cdf9cf;
  --color-cucumber-queen-200: #b3e7b6;
  --color-cucumber-queen-300: #96d29a;
  --color-cucumber-queen-400: #71b377;
  --color-cucumber-queen-500: #53985a;
  --color-cucumber-queen-600: #377c40;
  --color-cucumber-queen-700: #24642e;
  --color-cucumber-queen-800: #164f20;
  --color-cucumber-queen-900: #0c3d15;
  --color-cucumber-queen-950: #04270a;
  --color-galactic-gossamer: #7f8cbf;
  --color-galactic-gossamer-50: #f4f6ff;
  --color-galactic-gossamer-100: #e9eeff;
  --color-galactic-gossamer-200: #d1dbff;
  --color-galactic-gossamer-300: #b9c5f2;
  --color-galactic-gossamer-400: #99a7d8;
  --color-galactic-gossamer-500: #7f8cbf;
  --color-galactic-gossamer-600: #6470a0;
  --color-galactic-gossamer-700: #4d5884;
  --color-galactic-gossamer-800: #3a436a;
  --color-galactic-gossamer-900: #2b3354;
  --color-galactic-gossamer-950: #191f36;
  --color-wax-flower: #f7b19c;
  --color-wax-flower-50: #fff4f1;
  --color-wax-flower-100: #ffe8e1;
  --color-wax-flower-200: #ffcebf;
  --color-wax-flower-300: #f7b19c;
  --color-wax-flower-400: #d3927f;
  --color-wax-flower-500: #b67562;
  --color-wax-flower-600: #985b48;
  --color-wax-flower-700: #7d4534;
  --color-wax-flower-800: #643325;
  --color-wax-flower-900: #4e261a;
  --color-wax-flower-950: #33160d;
  --color-mystery-mint: #c1ebcb;
  --color-mystery-mint-50: #effff2;
  --color-mystery-mint-100: #e0f9e6;
  --color-mystery-mint-200: #c1ebcb;
  --color-mystery-mint-300: #afd1b7;
  --color-mystery-mint-400: #8bb194;
  --color-mystery-mint-500: #6d9577;
  --color-mystery-mint-600: #53785d;
  --color-mystery-mint-700: #3d6047;
  --color-mystery-mint-800: #2c4a35;
  --color-mystery-mint-900: #203a27;
  --color-mystery-mint-950: #122417;
}