Babe to Chocolate Kiss Color Palette

About this palette

Babe to Chocolate Kiss is a 5-color warm, vintage palette: #D97C81 (Babe), #217A83 (Jade Jewel), #6C2030 (Merlot Fields), #51D8E7 (Fish Boy), #3B141B (Chocolate Kiss). It mixes red, turquoise, brown tones and feels warm overall. The strongest text pairing is #51D8E7 on #3B141B with a contrast ratio of 9.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Babe	rgb(217, 124, 129)	hsl(357, 55%, 67%)
Jade Jewel	rgb(33, 122, 131)	hsl(186, 60%, 32%)
Merlot Fields	rgb(108, 32, 48)	hsl(347, 54%, 27%)
Fish Boy	rgb(81, 216, 231)	hsl(186, 76%, 61%)
Chocolate Kiss	rgb(59, 20, 27)	hsl(349, 49%, 15%)

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.47:1 Very good#51D8E7 on #3B141B
Aa9.47:1 Very good#3B141B on #51D8E7
Aa6.53:1 Good#6C2030 on #51D8E7
Aa6.53:1 Good#51D8E7 on #6C2030
Aa5.49:1 Good#D97C81 on #3B141B
Aa5.49:1 Good#3B141B on #D97C81
Aa3.79:1 Poor#D97C81 on #6C2030
Aa3.79:1 Poor#6C2030 on #D97C81

Color blindness preview

CSS variables

/* Babe to Chocolate Kiss — https://swatchly.xyz/palette/d97c81-217a83-6c2030-51d8e7-3b141b */
:root {
  --babe: #d97c81;
  --jade-jewel: #217a83;
  --merlot-fields: #6c2030;
  --fish-boy: #51d8e7;
  --chocolate-kiss: #3b141b;
}

Tailwind CSS v4

/* Babe to Chocolate Kiss — https://swatchly.xyz/palette/d97c81-217a83-6c2030-51d8e7-3b141b */
@theme {
  --color-babe: #d97c81;
  --color-babe-50: #ffeeee;
  --color-babe-100: #ffdfdf;
  --color-babe-200: #ffc0c2;
  --color-babe-300: #f5a1a4;
  --color-babe-400: #d97c81;
  --color-babe-500: #bc6268;
  --color-babe-600: #9e4950;
  --color-babe-700: #83363d;
  --color-babe-800: #6a272e;
  --color-babe-900: #551c22;
  --color-babe-950: #390f14;
  --color-jade-jewel: #217a83;
  --color-jade-jewel-50: #defcff;
  --color-jade-jewel-100: #c5f6fb;
  --color-jade-jewel-200: #a9e4eb;
  --color-jade-jewel-300: #8bcfd7;
  --color-jade-jewel-400: #63b0b9;
  --color-jade-jewel-500: #42959e;
  --color-jade-jewel-600: #217a83;
  --color-jade-jewel-700: #07626a;
  --color-jade-jewel-800: #004d53;
  --color-jade-jewel-900: #003b41;
  --color-jade-jewel-950: #002529;
  --color-merlot-fields: #6c2030;
  --color-merlot-fields-50: #fff1f2;
  --color-merlot-fields-100: #ffe3e6;
  --color-merlot-fields-200: #ffc7cc;
  --color-merlot-fields-300: #f5a8b1;
  --color-merlot-fields-400: #d8848f;
  --color-merlot-fields-500: #bb6773;
  --color-merlot-fields-600: #9c4d59;
  --color-merlot-fields-700: #7f3844;
  --color-merlot-fields-800: #6c2030;
  --color-merlot-fields-900: #501c26;
  --color-merlot-fields-950: #340f16;
  --color-fish-boy: #51d8e7;
  --color-fish-boy-50: #e2fcff;
  --color-fish-boy-100: #c0f8ff;
  --color-fish-boy-200: #92eaf4;
  --color-fish-boy-300: #51d8e7;
  --color-fish-boy-400: #2fb6c5;
  --color-fish-boy-500: #0099a6;
  --color-fish-boy-600: #007b86;
  --color-fish-boy-700: #00626a;
  --color-fish-boy-800: #004c53;
  --color-fish-boy-900: #003b40;
  --color-fish-boy-950: #002529;
  --color-chocolate-kiss: #3b141b;
  --color-chocolate-kiss-50: #fff1f2;
  --color-chocolate-kiss-100: #ffe3e6;
  --color-chocolate-kiss-200: #f4ccd0;
  --color-chocolate-kiss-300: #e1b3b8;
  --color-chocolate-kiss-400: #c49398;
  --color-chocolate-kiss-500: #a9787d;
  --color-chocolate-kiss-600: #8d5f64;
  --color-chocolate-kiss-700: #744a4f;
  --color-chocolate-kiss-800: #5e393e;
  --color-chocolate-kiss-900: #4b2c30;
  --color-chocolate-kiss-950: #3b141b;
}