Tropical Turquoise to Rapeseed Color Palette

About this palette

Tropical Turquoise to Rapeseed is a 5-color vibrant, cool, neon palette: #00D0FC (Tropical Turquoise), #FF4891 (Pansy), #0090B4 (Munsell Blue), #8C43DF (Dreamscape Purple), #BD9F00 (Rapeseed). It mixes blue, pink, purple, yellow tones and feels cool overall. The strongest text pairing is #00D0FC on #8C43DF with a contrast ratio of 2.87:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Turquoise	rgb(0, 208, 252)	hsl(190, 100%, 49%)
Pansy	rgb(255, 72, 145)	hsl(336, 100%, 64%)
Munsell Blue	rgb(0, 144, 180)	hsl(192, 100%, 35%)
Dreamscape Purple	rgb(140, 67, 223)	hsl(268, 71%, 57%)
Rapeseed	rgb(189, 159, 0)	hsl(50, 100%, 37%)

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.

Color blindness preview

CSS variables

/* Tropical Turquoise to Rapeseed — https://swatchly.xyz/palette/00d0fc-ff4891-0090b4-8c43df-bd9f00 */
:root {
  --tropical-turquoise: #00d0fc;
  --pansy: #ff4891;
  --munsell-blue: #0090b4;
  --dreamscape-purple: #8c43df;
  --rapeseed: #bd9f00;
}

Tailwind CSS v4

/* Tropical Turquoise to Rapeseed — https://swatchly.xyz/palette/00d0fc-ff4891-0090b4-8c43df-bd9f00 */
@theme {
  --color-tropical-turquoise: #00d0fc;
  --color-tropical-turquoise-50: #e0f7ff;
  --color-tropical-turquoise-100: #c4f0ff;
  --color-tropical-turquoise-200: #87e2ff;
  --color-tropical-turquoise-300: #00d0fc;
  --color-tropical-turquoise-400: #00afd4;
  --color-tropical-turquoise-500: #0091b1;
  --color-tropical-turquoise-600: #007590;
  --color-tropical-turquoise-700: #005e73;
  --color-tropical-turquoise-800: #004a5b;
  --color-tropical-turquoise-900: #003948;
  --color-tropical-turquoise-950: #00242e;
  --color-pansy: #ff4891;
  --color-pansy-50: #ffedf1;
  --color-pansy-100: #ffdce5;
  --color-pansy-200: #ffbcce;
  --color-pansy-300: #ff94b5;
  --color-pansy-400: #ff4891;
  --color-pansy-500: #e02378;
  --color-pansy-600: #bb0060;
  --color-pansy-700: #97004c;
  --color-pansy-800: #78003b;
  --color-pansy-900: #60002e;
  --color-pansy-950: #40001c;
  --color-munsell-blue: #0090b4;
  --color-munsell-blue-50: #e6f8ff;
  --color-munsell-blue-100: #ccf1ff;
  --color-munsell-blue-200: #95e2ff;
  --color-munsell-blue-300: #71cced;
  --color-munsell-blue-400: #3fadd0;
  --color-munsell-blue-500: #0090b4;
  --color-munsell-blue-600: #007492;
  --color-munsell-blue-700: #005c74;
  --color-munsell-blue-800: #00485c;
  --color-munsell-blue-900: #003848;
  --color-munsell-blue-950: #00232e;
  --color-dreamscape-purple: #8c43df;
  --color-dreamscape-purple-50: #f7f3ff;
  --color-dreamscape-purple-100: #f0e8ff;
  --color-dreamscape-purple-200: #e1d1ff;
  --color-dreamscape-purple-300: #d0b6ff;
  --color-dreamscape-purple-400: #b98bff;
  --color-dreamscape-purple-500: #a561fc;
  --color-dreamscape-purple-600: #8c43df;
  --color-dreamscape-purple-700: #722abd;
  --color-dreamscape-purple-800: #5b159c;
  --color-dreamscape-purple-900: #47067e;
  --color-dreamscape-purple-950: #2e0055;
  --color-rapeseed: #bd9f00;
  --color-rapeseed-50: #fff5d0;
  --color-rapeseed-100: #fdeba5;
  --color-rapeseed-200: #edd782;
  --color-rapeseed-300: #d9c05a;
  --color-rapeseed-400: #bd9f00;
  --color-rapeseed-500: #9d8400;
  --color-rapeseed-600: #7f6a00;
  --color-rapeseed-700: #655400;
  --color-rapeseed-800: #4f4100;
  --color-rapeseed-900: #3d3200;
  --color-rapeseed-950: #271f00;
}