Cosy Summer Sunset to Midnight Ocean color palette

EBA1A4Cosy Summer Sunset EBFFEBSnow White 75936EPaying Mantis 234A6BSeafarer 102A4BMidnight Ocean

About this palette

Cosy Summer Sunset to Midnight Ocean is a 5-color cool palette: #EBA1A4 (Cosy Summer Sunset), #EBFFEB (Snow White), #75936E (Paying Mantis), #234A6B (Seafarer), #102A4B (Midnight Ocean). It mixes pink, white, green, blue tones and feels cool overall. The strongest text pairing is #EBFFEB on #102A4B with a contrast ratio of 13.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cosy Summer Sunset	rgb(235, 161, 164)	hsl(358, 65%, 78%)
Snow White	rgb(235, 255, 235)	hsl(120, 100%, 96%)
Paying Mantis	rgb(117, 147, 110)	hsl(109, 15%, 50%)
Seafarer	rgb(35, 74, 107)	hsl(207, 51%, 28%)
Midnight Ocean	rgb(16, 42, 75)	hsl(214, 65%, 18%)

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.77:1 Super#EBFFEB on #102A4B
Aa13.77:1 Super#102A4B on #EBFFEB
Aa8.85:1 Very good#EBFFEB on #234A6B
Aa8.85:1 Very good#234A6B on #EBFFEB
Aa6.99:1 Good#EBA1A4 on #102A4B
Aa6.99:1 Good#102A4B on #EBA1A4
Aa4.49:1 Poor#EBA1A4 on #234A6B
Aa4.49:1 Poor#234A6B on #EBA1A4

Color blindness preview

CSS variables

/* Cosy Summer Sunset to Midnight Ocean — https://swatchly.xyz/palette/eba1a4-ebffeb-75936e-234a6b-102a4b */
:root {
  --cosy-summer-sunset: #eba1a4;
  --snow-white: #ebffeb;
  --paying-mantis: #75936e;
  --seafarer: #234a6b;
  --midnight-ocean: #102a4b;
}

Tailwind CSS v4

/* Cosy Summer Sunset to Midnight Ocean — https://swatchly.xyz/palette/eba1a4-ebffeb-75936e-234a6b-102a4b */
@theme {
  --color-cosy-summer-sunset: #eba1a4;
  --color-cosy-summer-sunset-50: #ffebeb;
  --color-cosy-summer-sunset-100: #ffdbdb;
  --color-cosy-summer-sunset-200: #fabec0;
  --color-cosy-summer-sunset-300: #eba1a4;
  --color-cosy-summer-sunset-400: #ca8487;
  --color-cosy-summer-sunset-500: #af6a6e;
  --color-cosy-summer-sunset-600: #935256;
  --color-cosy-summer-sunset-700: #793f43;
  --color-cosy-summer-sunset-800: #622f33;
  --color-cosy-summer-sunset-900: #4f2327;
  --color-cosy-summer-sunset-950: #331417;
  --color-snow-white: #ebffeb;
  --color-snow-white-50: #ebffeb;
  --color-snow-white-100: #e6f2e6;
  --color-snow-white-200: #d0ded0;
  --color-snow-white-300: #b8c8b8;
  --color-snow-white-400: #96a897;
  --color-snow-white-500: #7a8c7b;
  --color-snow-white-600: #607160;
  --color-snow-white-700: #4b5a4b;
  --color-snow-white-800: #394739;
  --color-snow-white-900: #2b362b;
  --color-snow-white-950: #1a221a;
  --color-paying-mantis: #75936e;
  --color-paying-mantis-50: #eafce6;
  --color-paying-mantis-100: #dff3da;
  --color-paying-mantis-200: #cae1c4;
  --color-paying-mantis-300: #b1ccab;
  --color-paying-mantis-400: #90ae8a;
  --color-paying-mantis-500: #75936e;
  --color-paying-mantis-600: #5b7754;
  --color-paying-mantis-700: #455f3f;
  --color-paying-mantis-800: #344b2f;
  --color-paying-mantis-900: #263a22;
  --color-paying-mantis-950: #162413;
  --color-seafarer: #234a6b;
  --color-seafarer-50: #edf6ff;
  --color-seafarer-100: #dbeeff;
  --color-seafarer-200: #bcdcf9;
  --color-seafarer-300: #a2c6e7;
  --color-seafarer-400: #80a8cc;
  --color-seafarer-500: #658db2;
  --color-seafarer-600: #4c7396;
  --color-seafarer-700: #385d7d;
  --color-seafarer-800: #234a6b;
  --color-seafarer-900: #1d3951;
  --color-seafarer-950: #0f2435;
  --color-midnight-ocean: #102a4b;
  --color-midnight-ocean-50: #eff6ff;
  --color-midnight-ocean-100: #dfedff;
  --color-midnight-ocean-200: #c2daf9;
  --color-midnight-ocean-300: #a8c3e7;
  --color-midnight-ocean-400: #84a2c9;
  --color-midnight-ocean-500: #6785ac;
  --color-midnight-ocean-600: #4d688d;
  --color-midnight-ocean-700: #385070;
  --color-midnight-ocean-800: #273b57;
  --color-midnight-ocean-900: #102a4b;
  --color-midnight-ocean-950: #0d1928;
}