Caribbean Blue to Storm Is Coming Color Palette

About this palette

Caribbean Blue to Storm Is Coming is a 4-color palette: #00BBD3 (Caribbean Blue), #9E4328 (Toasted Paprika), #EAD479 (Gold Winged), #353866 (Storm Is Coming). It mixes turquoise, red, yellow, purple tones and feels balanced overall. The strongest text pairing is #EAD479 on #353866 with a contrast ratio of 7.43:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Caribbean Blue	rgb(0, 187, 211)	hsl(187, 100%, 41%)
Toasted Paprika	rgb(158, 67, 40)	hsl(14, 60%, 39%)
Gold Winged	rgb(234, 212, 121)	hsl(48, 73%, 70%)
Storm Is Coming	rgb(53, 56, 102)	hsl(236, 32%, 30%)

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.43:1 Very good#EAD479 on #353866
Aa7.43:1 Very good#353866 on #EAD479
Aa4.74:1 Good#00BBD3 on #353866
Aa4.74:1 Good#353866 on #00BBD3
Aa4.32:1 Poor#9E4328 on #EAD479
Aa4.32:1 Poor#EAD479 on #9E4328

Color blindness preview

CSS variables

/* Caribbean Blue to Storm Is Coming — https://swatchly.xyz/palette/00bbd3-9e4328-ead479-353866 */
:root {
  --caribbean-blue: #00bbd3;
  --toasted-paprika: #9e4328;
  --gold-winged: #ead479;
  --storm-is-coming: #353866;
}

Tailwind CSS v4

/* Caribbean Blue to Storm Is Coming — https://swatchly.xyz/palette/00bbd3-9e4328-ead479-353866 */
@theme {
  --color-caribbean-blue: #00bbd3;
  --color-caribbean-blue-50: #e8fbff;
  --color-caribbean-blue-100: #ccf7ff;
  --color-caribbean-blue-200: #90ecfd;
  --color-caribbean-blue-300: #68d8ec;
  --color-caribbean-blue-400: #00bbd3;
  --color-caribbean-blue-500: #009bb0;
  --color-caribbean-blue-600: #007d8e;
  --color-caribbean-blue-700: #006371;
  --color-caribbean-blue-800: #004d58;
  --color-caribbean-blue-900: #003b44;
  --color-caribbean-blue-950: #00242a;
  --color-toasted-paprika: #9e4328;
  --color-toasted-paprika-50: #fff2ee;
  --color-toasted-paprika-100: #ffe2da;
  --color-toasted-paprika-200: #ffc4b3;
  --color-toasted-paprika-300: #fba288;
  --color-toasted-paprika-400: #dc7e62;
  --color-toasted-paprika-500: #be5f44;
  --color-toasted-paprika-600: #9e4328;
  --color-toasted-paprika-700: #81321a;
  --color-toasted-paprika-800: #68240e;
  --color-toasted-paprika-900: #531907;
  --color-toasted-paprika-950: #370d02;
  --color-gold-winged: #ead479;
  --color-gold-winged-50: #fff3c3;
  --color-gold-winged-100: #f6e9b1;
  --color-gold-winged-200: #ead479;
  --color-gold-winged-300: #d1be72;
  --color-gold-winged-400: #b49f47;
  --color-gold-winged-500: #998423;
  --color-gold-winged-600: #7d6a00;
  --color-gold-winged-700: #645400;
  --color-gold-winged-800: #4f4200;
  --color-gold-winged-900: #3d3200;
  --color-gold-winged-950: #261f00;
  --color-storm-is-coming: #353866;
  --color-storm-is-coming-50: #f3f4ff;
  --color-storm-is-coming-100: #e6eaff;
  --color-storm-is-coming-200: #ced4fe;
  --color-storm-is-coming-300: #b6bcec;
  --color-storm-is-coming-400: #959bcf;
  --color-storm-is-coming-500: #797fb2;
  --color-storm-is-coming-600: #5f6394;
  --color-storm-is-coming-700: #484d78;
  --color-storm-is-coming-800: #353866;
  --color-storm-is-coming-900: #292c4b;
  --color-storm-is-coming-950: #181a30;
}