Icy Breeze to Royal Neptune Color Palette

About this palette

Icy Breeze to Royal Neptune is a 4-color muted, vintage palette: #BFECF4 (Icy Breeze), #C89882 (Beauty and the Beach), #715662 (Hibernation), #17383A (Royal Neptune). It mixes turquoise, orange, red tones and feels balanced overall. The strongest text pairing is #BFECF4 on #17383A with a contrast ratio of 9.93:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Breeze	rgb(191, 236, 244)	hsl(189, 71%, 85%)
Beauty and the Beach	rgb(200, 152, 130)	hsl(19, 39%, 65%)
Hibernation	rgb(113, 86, 98)	hsl(333, 14%, 39%)
Royal Neptune	rgb(23, 56, 58)	hsl(183, 43%, 16%)

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.

Aa9.93:1 Very good#BFECF4 on #17383A
Aa9.93:1 Very good#17383A on #BFECF4
Aa5.15:1 Good#BFECF4 on #715662
Aa5.15:1 Good#715662 on #BFECF4
Aa4.97:1 Good#C89882 on #17383A
Aa4.97:1 Good#17383A on #C89882

Color blindness preview

CSS variables

/* Icy Breeze to Royal Neptune — https://swatchly.xyz/palette/bfecf4-c89882-715662-17383a */
:root {
  --icy-breeze: #bfecf4;
  --beauty-and-the-beach: #c89882;
  --hibernation: #715662;
  --royal-neptune: #17383a;
}

Tailwind CSS v4

/* Icy Breeze to Royal Neptune — https://swatchly.xyz/palette/bfecf4-c89882-715662-17383a */
@theme {
  --color-icy-breeze: #bfecf4;
  --color-icy-breeze-50: #d9f4f8;
  --color-icy-breeze-100: #bfecf4;
  --color-icy-breeze-200: #b6d8de;
  --color-icy-breeze-300: #9dc3ca;
  --color-icy-breeze-400: #7ca6ad;
  --color-icy-breeze-500: #628c93;
  --color-icy-breeze-600: #4a7279;
  --color-icy-breeze-700: #375c63;
  --color-icy-breeze-800: #27484e;
  --color-icy-breeze-900: #1c383d;
  --color-icy-breeze-950: #0e2326;
  --color-beauty-and-the-beach: #c89882;
  --color-beauty-and-the-beach-50: #fff3ee;
  --color-beauty-and-the-beach-100: #ffe7dc;
  --color-beauty-and-the-beach-200: #f6d0c0;
  --color-beauty-and-the-beach-300: #e3b9a6;
  --color-beauty-and-the-beach-400: #c89882;
  --color-beauty-and-the-beach-500: #aa7c67;
  --color-beauty-and-the-beach-600: #8d624d;
  --color-beauty-and-the-beach-700: #734c39;
  --color-beauty-and-the-beach-800: #5c3a29;
  --color-beauty-and-the-beach-900: #482b1d;
  --color-beauty-and-the-beach-950: #2e1910;
  --color-hibernation: #715662;
  --color-hibernation-50: #fff1f7;
  --color-hibernation-100: #f9e5ed;
  --color-hibernation-200: #e9d2dc;
  --color-hibernation-300: #d7bcc7;
  --color-hibernation-400: #ba9eaa;
  --color-hibernation-500: #a18490;
  --color-hibernation-600: #876b77;
  --color-hibernation-700: #715662;
  --color-hibernation-800: #59434d;
  --color-hibernation-900: #46323b;
  --color-hibernation-950: #2d1f25;
  --color-royal-neptune: #17383a;
  --color-royal-neptune-50: #e6fafb;
  --color-royal-neptune-100: #daf0f2;
  --color-royal-neptune-200: #c3dedf;
  --color-royal-neptune-300: #a9c8c9;
  --color-royal-neptune-400: #87a9ab;
  --color-royal-neptune-500: #6b8d8f;
  --color-royal-neptune-600: #517274;
  --color-royal-neptune-700: #3d5b5d;
  --color-royal-neptune-800: #2d4749;
  --color-royal-neptune-900: #17383a;
  --color-royal-neptune-950: #122223;
}