Ballerina to Siren color palette

F8CCE0Ballerina C08894Punched Pink 8EC0AFSeaborn 007763Tropical Rainforest 0C312DElite Teal 673448Siren

Open in generator Export PNG, PDF, ASE…

About this palette

Ballerina to Siren is a 6-color vintage palette: #F8CCE0 (Ballerina), #C08894 (Punched Pink), #8EC0AF (Seaborn), #007763 (Tropical Rainforest), #0C312D (Elite Teal), #673448 (Siren). It mixes pink, turquoise, red tones and feels balanced overall. The strongest text pairing is #F8CCE0 on #0C312D with a contrast ratio of 9.85:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ballerina	rgb(248, 204, 224)	hsl(333, 76%, 89%)
Punched Pink	rgb(192, 136, 148)	hsl(347, 31%, 64%)
Seaborn	rgb(142, 192, 175)	hsl(160, 28%, 65%)
Tropical Rainforest	rgb(0, 119, 99)	hsl(170, 100%, 23%)
Elite Teal	rgb(12, 49, 45)	hsl(174, 61%, 12%)
Siren	rgb(103, 52, 72)	hsl(336, 33%, 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.

Aa9.85:1 Very good#F8CCE0 on #0C312D
Aa9.85:1 Very good#0C312D on #F8CCE0
Aa6.91:1 Good#8EC0AF on #0C312D
Aa6.91:1 Good#0C312D on #8EC0AF
Aa6.80:1 Good#F8CCE0 on #673448
Aa6.80:1 Good#673448 on #F8CCE0
Aa4.82:1 Good#C08894 on #0C312D
Aa4.82:1 Good#0C312D on #C08894

Color blindness preview

CSS variables

/* Ballerina to Siren — https://swatchly.xyz/palette/f8cce0-c08894-8ec0af-007763-0c312d-673448 */
:root {
  --ballerina: #f8cce0;
  --punched-pink: #c08894;
  --seaborn: #8ec0af;
  --tropical-rainforest: #007763;
  --elite-teal: #0c312d;
  --siren: #673448;
}

Tailwind CSS v4

/* Ballerina to Siren — https://swatchly.xyz/palette/f8cce0-c08894-8ec0af-007763-0c312d-673448 */
@theme {
  --color-ballerina: #f8cce0;
  --color-ballerina-50: #fff3f8;
  --color-ballerina-100: #ffe6f1;
  --color-ballerina-200: #f8cce0;
  --color-ballerina-300: #dcb7c8;
  --color-ballerina-400: #be96a8;
  --color-ballerina-500: #a27a8d;
  --color-ballerina-600: #856072;
  --color-ballerina-700: #6c4a5a;
  --color-ballerina-800: #553846;
  --color-ballerina-900: #432a36;
  --color-ballerina-950: #2b1922;
  --color-punched-pink: #c08894;
  --color-punched-pink-50: #ffedf0;
  --color-punched-pink-100: #ffdde4;
  --color-punched-pink-200: #f2c4cd;
  --color-punched-pink-300: #deaab5;
  --color-punched-pink-400: #c08894;
  --color-punched-pink-500: #a46e7a;
  --color-punched-pink-600: #895662;
  --color-punched-pink-700: #70434d;
  --color-punched-pink-800: #5a333c;
  --color-punched-pink-900: #48262e;
  --color-punched-pink-950: #2f171d;
  --color-seaborn: #8ec0af;
  --color-seaborn-50: #d8f6eb;
  --color-seaborn-100: #c9ebdf;
  --color-seaborn-200: #aed6c8;
  --color-seaborn-300: #8ec0af;
  --color-seaborn-400: #72a292;
  --color-seaborn-500: #59897a;
  --color-seaborn-600: #427062;
  --color-seaborn-700: #305b4e;
  --color-seaborn-800: #23493d;
  --color-seaborn-900: #193a30;
  --color-seaborn-950: #0c241d;
  --color-tropical-rainforest: #007763;
  --color-tropical-rainforest-50: #d9fff4;
  --color-tropical-rainforest-100: #c1f8e8;
  --color-tropical-rainforest-200: #a2e5d3;
  --color-tropical-rainforest-300: #81cfbb;
  --color-tropical-rainforest-400: #56b09a;
  --color-tropical-rainforest-500: #32937e;
  --color-tropical-rainforest-600: #007763;
  --color-tropical-rainforest-700: #005f4e;
  --color-tropical-rainforest-800: #004a3d;
  --color-tropical-rainforest-900: #00392f;
  --color-tropical-rainforest-950: #00241d;
  --color-elite-teal: #0c312d;
  --color-elite-teal-50: #e5fbf7;
  --color-elite-teal-100: #d9f1ed;
  --color-elite-teal-200: #c2dfda;
  --color-elite-teal-300: #a8c9c4;
  --color-elite-teal-400: #84a8a3;
  --color-elite-teal-500: #668b86;
  --color-elite-teal-600: #4c6f6a;
  --color-elite-teal-700: #375652;
  --color-elite-teal-800: #26413d;
  --color-elite-teal-900: #0c312d;
  --color-elite-teal-950: #0d1c1a;
  --color-siren: #673448;
  --color-siren-50: #fff1f5;
  --color-siren-100: #ffe2ec;
  --color-siren-200: #f8c9d8;
  --color-siren-300: #e6b1c3;
  --color-siren-400: #c990a4;
  --color-siren-500: #af758a;
  --color-siren-600: #935c70;
  --color-siren-700: #79485a;
  --color-siren-800: #673448;
  --color-siren-900: #4e2937;
  --color-siren-950: #331823;
}