Pool Table to Choco Chic Color Palette

About this palette

Pool Table to Choco Chic is a 5-color cool, vintage palette: #009481 (Pool Table), #00423B (Botanical Night), #FFDFDA (Pink Glitter), #5FB1FF (Fennel Flower), #992E10 (Choco Chic). It mixes turquoise, pink, blue, red tones and feels cool overall. The strongest text pairing is #00423B on #FFDFDA with a contrast ratio of 9.13:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pool Table	rgb(0, 148, 129)	hsl(172, 100%, 29%)
Botanical Night	rgb(0, 66, 59)	hsl(174, 100%, 13%)
Pink Glitter	rgb(255, 223, 218)	hsl(8, 100%, 93%)
Fennel Flower	rgb(95, 177, 255)	hsl(209, 100%, 69%)
Choco Chic	rgb(153, 46, 16)	hsl(13, 81%, 33%)

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.13:1 Very good#00423B on #FFDFDA
Aa9.13:1 Very good#FFDFDA on #00423B
Aa6.11:1 Good#FFDFDA on #992E10
Aa6.11:1 Good#992E10 on #FFDFDA
Aa5.00:1 Good#00423B on #5FB1FF
Aa5.00:1 Good#5FB1FF on #00423B
Aa3.35:1 Poor#5FB1FF on #992E10
Aa3.35:1 Poor#992E10 on #5FB1FF

Color blindness preview

CSS variables

/* Pool Table to Choco Chic — https://swatchly.xyz/palette/009481-00423b-ffdfda-5fb1ff-992e10 */
:root {
  --pool-table: #009481;
  --botanical-night: #00423b;
  --pink-glitter: #ffdfda;
  --fennel-flower: #5fb1ff;
  --choco-chic: #992e10;
}

Tailwind CSS v4

/* Pool Table to Choco Chic — https://swatchly.xyz/palette/009481-00423b-ffdfda-5fb1ff-992e10 */
@theme {
  --color-pool-table: #009481;
  --color-pool-table-50: #d3fff5;
  --color-pool-table-100: #b6f8ea;
  --color-pool-table-200: #95e6d5;
  --color-pool-table-300: #71d0be;
  --color-pool-table-400: #3fb19d;
  --color-pool-table-500: #009481;
  --color-pool-table-600: #007768;
  --color-pool-table-700: #005f52;
  --color-pool-table-800: #004b40;
  --color-pool-table-900: #003a32;
  --color-pool-table-950: #00251f;
  --color-botanical-night: #00423b;
  --color-botanical-night-50: #defdf7;
  --color-botanical-night-100: #d1f4ed;
  --color-botanical-night-200: #b8e2da;
  --color-botanical-night-300: #9cccc4;
  --color-botanical-night-400: #79afa6;
  --color-botanical-night-500: #5d948c;
  --color-botanical-night-600: #447a72;
  --color-botanical-night-700: #30645c;
  --color-botanical-night-800: #21504a;
  --color-botanical-night-900: #00423b;
  --color-botanical-night-950: #0a2925;
  --color-pink-glitter: #ffdfda;
  --color-pink-glitter-50: #ffedeb;
  --color-pink-glitter-100: #ffdfda;
  --color-pink-glitter-200: #e6ceca;
  --color-pink-glitter-300: #d2b7b3;
  --color-pink-glitter-400: #b59894;
  --color-pink-glitter-500: #9a7d79;
  --color-pink-glitter-600: #7f6460;
  --color-pink-glitter-700: #674e4b;
  --color-pink-glitter-800: #523c39;
  --color-pink-glitter-900: #402e2b;
  --color-pink-glitter-950: #281c1a;
  --color-fennel-flower: #5fb1ff;
  --color-fennel-flower-50: #f4f9ff;
  --color-fennel-flower-100: #e6f2ff;
  --color-fennel-flower-200: #c6e2ff;
  --color-fennel-flower-300: #9fcfff;
  --color-fennel-flower-400: #5fb1ff;
  --color-fennel-flower-500: #4193de;
  --color-fennel-flower-600: #1e75be;
  --color-fennel-flower-700: #005c9e;
  --color-fennel-flower-800: #00477c;
  --color-fennel-flower-900: #003660;
  --color-fennel-flower-950: #00203d;
  --color-choco-chic: #992e10;
  --color-choco-chic-50: #fff2ee;
  --color-choco-chic-100: #ffe4dd;
  --color-choco-chic-200: #ffcabc;
  --color-choco-chic-300: #ffa992;
  --color-choco-chic-400: #ed8064;
  --color-choco-chic-500: #d16246;
  --color-choco-chic-600: #b3482c;
  --color-choco-chic-700: #992e10;
  --color-choco-chic-800: #7a2209;
  --color-choco-chic-900: #611602;
  --color-choco-chic-950: #400a00;
}