Seafoam Splashes to Midnight Ocean color palette

AAF4D2Seafoam Splashes DEAB7ECaramel Drizzle C65A9CLlilacquered 8C3067Pink Horror 112D4CMidnight Ocean

Open in generator Export PNG, PDF, ASE…

About this palette

Seafoam Splashes to Midnight Ocean is a 5-color warm palette: #AAF4D2 (Seafoam Splashes), #DEAB7E (Caramel Drizzle), #C65A9C (Llilacquered), #8C3067 (Pink Horror), #112D4C (Midnight Ocean). It mixes green, orange, pink, red, blue tones and feels warm overall. The strongest text pairing is #AAF4D2 on #112D4C with a contrast ratio of 11.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seafoam Splashes	rgb(170, 244, 210)	hsl(152, 77%, 81%)
Caramel Drizzle	rgb(222, 171, 126)	hsl(28, 59%, 68%)
Llilacquered	rgb(198, 90, 156)	hsl(323, 49%, 56%)
Pink Horror	rgb(140, 48, 103)	hsl(324, 49%, 37%)
Midnight Ocean	rgb(17, 45, 76)	hsl(212, 63%, 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.

Aa11.03:1 Very good#AAF4D2 on #112D4C
Aa11.03:1 Very good#112D4C on #AAF4D2
Aa6.81:1 Good#DEAB7E on #112D4C
Aa6.81:1 Good#112D4C on #DEAB7E
Aa6.07:1 Good#AAF4D2 on #8C3067
Aa6.07:1 Good#8C3067 on #AAF4D2
Aa3.74:1 Poor#DEAB7E on #8C3067
Aa3.74:1 Poor#8C3067 on #DEAB7E

Color blindness preview

CSS variables

/* Seafoam Splashes to Midnight Ocean — https://swatchly.xyz/palette/aaf4d2-deab7e-c65a9c-8c3067-112d4c */
:root {
  --seafoam-splashes: #aaf4d2;
  --caramel-drizzle: #deab7e;
  --llilacquered: #c65a9c;
  --pink-horror: #8c3067;
  --midnight-ocean: #112d4c;
}

Tailwind CSS v4

/* Seafoam Splashes to Midnight Ocean — https://swatchly.xyz/palette/aaf4d2-deab7e-c65a9c-8c3067-112d4c */
@theme {
  --color-seafoam-splashes: #aaf4d2;
  --color-seafoam-splashes-50: #f3fff9;
  --color-seafoam-splashes-100: #d6feeb;
  --color-seafoam-splashes-200: #aaf4d2;
  --color-seafoam-splashes-300: #9dd8bd;
  --color-seafoam-splashes-400: #75b89a;
  --color-seafoam-splashes-500: #549b7d;
  --color-seafoam-splashes-600: #367e61;
  --color-seafoam-splashes-700: #20654b;
  --color-seafoam-splashes-800: #0f4e38;
  --color-seafoam-splashes-900: #053d2a;
  --color-seafoam-splashes-950: #012619;
  --color-caramel-drizzle: #deab7e;
  --color-caramel-drizzle-50: #ffecdc;
  --color-caramel-drizzle-100: #ffddc0;
  --color-caramel-drizzle-200: #efc6a2;
  --color-caramel-drizzle-300: #deab7e;
  --color-caramel-drizzle-400: #be8e63;
  --color-caramel-drizzle-500: #a47449;
  --color-caramel-drizzle-600: #895c32;
  --color-caramel-drizzle-700: #704820;
  --color-caramel-drizzle-800: #5b3814;
  --color-caramel-drizzle-900: #492b0b;
  --color-caramel-drizzle-950: #2f1904;
  --color-llilacquered: #c65a9c;
  --color-llilacquered-50: #fff1f8;
  --color-llilacquered-100: #ffe2f1;
  --color-llilacquered-200: #ffc3e4;
  --color-llilacquered-300: #fe9dd5;
  --color-llilacquered-400: #e278b7;
  --color-llilacquered-500: #c65a9c;
  --color-llilacquered-600: #a73f80;
  --color-llilacquered-700: #8a2a68;
  --color-llilacquered-800: #6f1b52;
  --color-llilacquered-900: #591040;
  --color-llilacquered-950: #3a0629;
  --color-pink-horror: #8c3067;
  --color-pink-horror-50: #fff1f7;
  --color-pink-horror-100: #ffe2f0;
  --color-pink-horror-200: #ffc4e2;
  --color-pink-horror-300: #faa2d1;
  --color-pink-horror-400: #de7fb3;
  --color-pink-horror-500: #c36298;
  --color-pink-horror-600: #a5487e;
  --color-pink-horror-700: #8c3067;
  --color-pink-horror-800: #6f2451;
  --color-pink-horror-900: #58183f;
  --color-pink-horror-950: #3a0b28;
  --color-midnight-ocean: #112d4c;
  --color-midnight-ocean-50: #eef6ff;
  --color-midnight-ocean-100: #deedff;
  --color-midnight-ocean-200: #c1daf8;
  --color-midnight-ocean-300: #a8c4e5;
  --color-midnight-ocean-400: #84a3c7;
  --color-midnight-ocean-500: #6786ab;
  --color-midnight-ocean-600: #4d6a8d;
  --color-midnight-ocean-700: #385271;
  --color-midnight-ocean-800: #283e58;
  --color-midnight-ocean-900: #112d4c;
  --color-midnight-ocean-950: #0e1b2a;
}