Caribbean Blue to Puff of Pink Color Palette

About this palette

Caribbean Blue to Puff of Pink is a 4-color vintage palette: #00BED9 (Caribbean Blue), #6F6B39 (Beat Around the Bush), #004755 (Cold and Dark), #FAD1EF (Puff of Pink). It mixes turquoise, brown, blue, pink tones and feels balanced overall. The strongest text pairing is #004755 on #FAD1EF with a contrast ratio of 7.59:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Caribbean Blue	rgb(0, 190, 217)	hsl(187, 100%, 43%)
Beat Around the Bush	rgb(111, 107, 57)	hsl(56, 32%, 33%)
Cold and Dark	rgb(0, 71, 85)	hsl(190, 100%, 17%)
Puff of Pink	rgb(250, 209, 239)	hsl(316, 80%, 90%)

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.

Aa7.59:1 Very good#004755 on #FAD1EF
Aa7.59:1 Very good#FAD1EF on #004755
Aa4.61:1 Good#00BED9 on #004755
Aa4.61:1 Good#004755 on #00BED9
Aa4.02:1 Poor#6F6B39 on #FAD1EF
Aa4.02:1 Poor#FAD1EF on #6F6B39

Color blindness preview

CSS variables

/* Caribbean Blue to Puff of Pink — https://swatchly.xyz/palette/00bed9-6f6b39-004755-fad1ef */
:root {
  --caribbean-blue: #00bed9;
  --beat-around-the-bush: #6f6b39;
  --cold-and-dark: #004755;
  --puff-of-pink: #fad1ef;
}

Tailwind CSS v4

/* Caribbean Blue to Puff of Pink — https://swatchly.xyz/palette/00bed9-6f6b39-004755-fad1ef */
@theme {
  --color-caribbean-blue: #00bed9;
  --color-caribbean-blue-50: #ebfbff;
  --color-caribbean-blue-100: #d3f7ff;
  --color-caribbean-blue-200: #97edff;
  --color-caribbean-blue-300: #6bdaf0;
  --color-caribbean-blue-400: #00bed9;
  --color-caribbean-blue-500: #009eb5;
  --color-caribbean-blue-600: #007f92;
  --color-caribbean-blue-700: #006473;
  --color-caribbean-blue-800: #004e5a;
  --color-caribbean-blue-900: #003b45;
  --color-caribbean-blue-950: #00242b;
  --color-beat-around-the-bush: #6f6b39;
  --color-beat-around-the-bush-50: #f9f7da;
  --color-beat-around-the-bush-100: #efedcb;
  --color-beat-around-the-bush-200: #dbd9b1;
  --color-beat-around-the-bush-300: #c5c295;
  --color-beat-around-the-bush-400: #a6a270;
  --color-beat-around-the-bush-500: #8a8653;
  --color-beat-around-the-bush-600: #6f6b39;
  --color-beat-around-the-bush-700: #585528;
  --color-beat-around-the-bush-800: #45421a;
  --color-beat-around-the-bush-900: #363311;
  --color-beat-around-the-bush-950: #211f07;
  --color-cold-and-dark: #004755;
  --color-cold-and-dark-50: #e5f9ff;
  --color-cold-and-dark-100: #cef3fd;
  --color-cold-and-dark-200: #b4e0ec;
  --color-cold-and-dark-300: #97cad8;
  --color-cold-and-dark-400: #72aaba;
  --color-cold-and-dark-500: #548e9e;
  --color-cold-and-dark-600: #397381;
  --color-cold-and-dark-700: #255a68;
  --color-cold-and-dark-800: #004755;
  --color-cold-and-dark-900: #0d363f;
  --color-cold-and-dark-950: #052128;
  --color-puff-of-pink: #fad1ef;
  --color-puff-of-pink-50: #fff8fd;
  --color-puff-of-pink-100: #ffebf9;
  --color-puff-of-pink-200: #fad1ef;
  --color-puff-of-pink-300: #ddbcd4;
  --color-puff-of-pink-400: #be99b4;
  --color-puff-of-pink-500: #a17c98;
  --color-puff-of-pink-600: #84617c;
  --color-puff-of-pink-700: #6a4b62;
  --color-puff-of-pink-800: #53384d;
  --color-puff-of-pink-900: #412a3c;
  --color-puff-of-pink-950: #2a1926;
}