Start generating

Seaborn to Stormy Night color palette

8BC6B7Seaborn985210MochaccinoFFF2EAWhat’s Left64457ANeon Violet61A59FParadise Island3D234DStormy Night
Open in generator Export PNG, PDF, ASE…

About this palette

Seaborn to Stormy Night is a 6-color cool palette: #8BC6B7 (Seaborn), #985210 (Mochaccino), #FFF2EA (What’s Left), #64457A (Neon Violet), #61A59F (Paradise Island), #3D234D (Stormy Night). It mixes turquoise, brown, white, purple tones and feels cool overall. The strongest text pairing is #FFF2EA on #3D234D with a contrast ratio of 12.38:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Seabornrgb(139, 198, 183)hsl(165, 34%, 66%)
Mochaccinorgb(152, 82, 16)hsl(29, 81%, 33%)
What’s Leftrgb(255, 242, 234)hsl(23, 100%, 96%)
Neon Violetrgb(100, 69, 122)hsl(275, 28%, 37%)
Paradise Islandrgb(97, 165, 159)hsl(175, 27%, 51%)
Stormy Nightrgb(61, 35, 77)hsl(277, 37%, 22%)

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.38:1 Super#FFF2EA on #3D234D
  • Aa12.38:1 Super#3D234D on #FFF2EA
  • Aa7.16:1 Very good#FFF2EA on #64457A
  • Aa7.16:1 Very good#64457A on #FFF2EA
  • Aa7.02:1 Very good#8BC6B7 on #3D234D
  • Aa7.02:1 Very good#3D234D on #8BC6B7
  • Aa5.39:1 Good#985210 on #FFF2EA
  • Aa5.39:1 Good#FFF2EA on #985210

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Seaborn to Stormy Night — https://swatchly.xyz/palette/8bc6b7-985210-fff2ea-64457a-61a59f-3d234d */
:root {
  --seaborn: #8bc6b7;
  --mochaccino: #985210;
  --what-s-left: #fff2ea;
  --neon-violet: #64457a;
  --paradise-island: #61a59f;
  --stormy-night: #3d234d;
}

Tailwind CSS v4

/* Seaborn to Stormy Night — https://swatchly.xyz/palette/8bc6b7-985210-fff2ea-64457a-61a59f-3d234d */
@theme {
  --color-seaborn: #8bc6b7;
  --color-seaborn-50: #d7f9f0;
  --color-seaborn-100: #c8efe4;
  --color-seaborn-200: #addbcf;
  --color-seaborn-300: #8bc6b7;
  --color-seaborn-400: #6fa799;
  --color-seaborn-500: #548d80;
  --color-seaborn-600: #3c7467;
  --color-seaborn-700: #295d52;
  --color-seaborn-800: #1c4a40;
  --color-seaborn-900: #123b32;
  --color-seaborn-950: #07251f;
  --color-mochaccino: #985210;
  --color-mochaccino-50: #fff2ea;
  --color-mochaccino-100: #ffe4d2;
  --color-mochaccino-200: #ffc9a3;
  --color-mochaccino-300: #f1ad7c;
  --color-mochaccino-400: #d38b53;
  --color-mochaccino-500: #b66d33;
  --color-mochaccino-600: #985210;
  --color-mochaccino-700: #7c3f00;
  --color-mochaccino-800: #623000;
  --color-mochaccino-900: #4c2400;
  --color-mochaccino-950: #311500;
  --color-what-s-left: #fff2ea;
  --color-what-s-left-50: #fff2ea;
  --color-what-s-left-100: #f1e9e4;
  --color-what-s-left-200: #dfd5cf;
  --color-what-s-left-300: #c9beb8;
  --color-what-s-left-400: #aa9f98;
  --color-what-s-left-500: #8f847c;
  --color-what-s-left-600: #746963;
  --color-what-s-left-700: #5d534d;
  --color-what-s-left-800: #49403b;
  --color-what-s-left-900: #38312d;
  --color-what-s-left-950: #231e1b;
  --color-neon-violet: #64457a;
  --color-neon-violet-50: #f9f2ff;
  --color-neon-violet-100: #f3e5ff;
  --color-neon-violet-200: #e5ccf9;
  --color-neon-violet-300: #d0b3e7;
  --color-neon-violet-400: #b292ca;
  --color-neon-violet-500: #9676af;
  --color-neon-violet-600: #7b5c92;
  --color-neon-violet-700: #64457a;
  --color-neon-violet-800: #4e3560;
  --color-neon-violet-900: #3d284c;
  --color-neon-violet-950: #261731;
  --color-paradise-island: #61a59f;
  --color-paradise-island-50: #d4fbf6;
  --color-paradise-island-100: #c4f0eb;
  --color-paradise-island-200: #a7dcd7;
  --color-paradise-island-300: #89c5bf;
  --color-paradise-island-400: #61a59f;
  --color-paradise-island-500: #478b85;
  --color-paradise-island-600: #2f726d;
  --color-paradise-island-700: #1c5c57;
  --color-paradise-island-800: #0f4945;
  --color-paradise-island-900: #063a36;
  --color-paradise-island-950: #022523;
  --color-stormy-night: #3d234d;
  --color-stormy-night-50: #f9f2ff;
  --color-stormy-night-100: #f4e4ff;
  --color-stormy-night-200: #e4cdf4;
  --color-stormy-night-300: #cfb5e1;
  --color-stormy-night-400: #b094c4;
  --color-stormy-night-500: #9578a8;
  --color-stormy-night-600: #795d8b;
  --color-stormy-night-700: #604871;
  --color-stormy-night-800: #4b3659;
  --color-stormy-night-900: #3d234d;
  --color-stormy-night-950: #24172c;
}

Similar palettes