Seafoam Splashes to Waikiki color palette

A9EBCESeafoam Splashes 005967Abyssal Waters 0B3240Nordic Noir 46BEAFEmerald Bliss 008EA0Waikiki

About this palette

Seafoam Splashes to Waikiki is a 5-color cool palette: #A9EBCE (Seafoam Splashes), #005967 (Abyssal Waters), #0B3240 (Nordic Noir), #46BEAF (Emerald Bliss), #008EA0 (Waikiki). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #A9EBCE on #0B3240 with a contrast ratio of 10.01:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seafoam Splashes	rgb(169, 235, 206)	hsl(154, 62%, 79%)
Abyssal Waters	rgb(0, 89, 103)	hsl(188, 100%, 20%)
Nordic Noir	rgb(11, 50, 64)	hsl(196, 71%, 15%)
Emerald Bliss	rgb(70, 190, 175)	hsl(172, 48%, 51%)
Waikiki	rgb(0, 142, 160)	hsl(187, 100%, 31%)

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.01:1 Very good#A9EBCE on #0B3240
Aa10.01:1 Very good#0B3240 on #A9EBCE
Aa5.99:1 Good#0B3240 on #46BEAF
Aa5.99:1 Good#46BEAF on #0B3240
Aa5.89:1 Good#A9EBCE on #005967
Aa5.89:1 Good#005967 on #A9EBCE
Aa3.52:1 Poor#005967 on #46BEAF
Aa3.52:1 Poor#46BEAF on #005967

Color blindness preview

CSS variables

/* Seafoam Splashes to Waikiki — https://swatchly.xyz/palette/a9ebce-005967-0b3240-46beaf-008ea0 */
:root {
  --seafoam-splashes: #a9ebce;
  --abyssal-waters: #005967;
  --nordic-noir: #0b3240;
  --emerald-bliss: #46beaf;
  --waikiki: #008ea0;
}

Tailwind CSS v4

/* Seafoam Splashes to Waikiki — https://swatchly.xyz/palette/a9ebce-005967-0b3240-46beaf-008ea0 */
@theme {
  --color-seafoam-splashes: #a9ebce;
  --color-seafoam-splashes-50: #e2fff1;
  --color-seafoam-splashes-100: #d1f8e6;
  --color-seafoam-splashes-200: #a9ebce;
  --color-seafoam-splashes-300: #9bd1b9;
  --color-seafoam-splashes-400: #75b298;
  --color-seafoam-splashes-500: #57967c;
  --color-seafoam-splashes-600: #3c7b62;
  --color-seafoam-splashes-700: #27624c;
  --color-seafoam-splashes-800: #184d3a;
  --color-seafoam-splashes-900: #0e3c2c;
  --color-seafoam-splashes-950: #05261a;
  --color-abyssal-waters: #005967;
  --color-abyssal-waters-50: #e4faff;
  --color-abyssal-waters-100: #c9f4fe;
  --color-abyssal-waters-200: #ace1ec;
  --color-abyssal-waters-300: #8dcad7;
  --color-abyssal-waters-400: #66aab9;
  --color-abyssal-waters-500: #468d9c;
  --color-abyssal-waters-600: #2a717f;
  --color-abyssal-waters-700: #005967;
  --color-abyssal-waters-800: #064550;
  --color-abyssal-waters-900: #00363f;
  --color-abyssal-waters-950: #002128;
  --color-nordic-noir: #0b3240;
  --color-nordic-noir-50: #e9f8ff;
  --color-nordic-noir-100: #d7f0fb;
  --color-nordic-noir-200: #bfddea;
  --color-nordic-noir-300: #a5c7d6;
  --color-nordic-noir-400: #81a7b7;
  --color-nordic-noir-500: #648a9b;
  --color-nordic-noir-600: #4a6f7e;
  --color-nordic-noir-700: #355664;
  --color-nordic-noir-800: #25424e;
  --color-nordic-noir-900: #0b3240;
  --color-nordic-noir-950: #0d1d24;
  --color-emerald-bliss: #46beaf;
  --color-emerald-bliss-50: #e1fffa;
  --color-emerald-bliss-100: #bffdf3;
  --color-emerald-bliss-200: #a1ede1;
  --color-emerald-bliss-300: #7fdacc;
  --color-emerald-bliss-400: #46beaf;
  --color-emerald-bliss-500: #1ca092;
  --color-emerald-bliss-600: #008276;
  --color-emerald-bliss-700: #00675d;
  --color-emerald-bliss-800: #005048;
  --color-emerald-bliss-900: #003d37;
  --color-emerald-bliss-950: #002621;
  --color-waikiki: #008ea0;
  --color-waikiki-50: #defaff;
  --color-waikiki-100: #b9f4ff;
  --color-waikiki-200: #94e2f0;
  --color-waikiki-300: #70cbdb;
  --color-waikiki-400: #3eabbd;
  --color-waikiki-500: #008ea0;
  --color-waikiki-600: #007281;
  --color-waikiki-700: #005b67;
  --color-waikiki-800: #004851;
  --color-waikiki-900: #003840;
  --color-waikiki-950: #002329;
}