Infinity to Cotton Boll Color Palette

About this palette

Infinity to Cotton Boll is a 5-color muted, gradient palette: #232734 (Infinity), #675D49 (Ivy Topiary), #7C84A8 (English Manor), #BDB19C (Warm Neutral), #EBF1FF (Cotton Boll). It mixes gray, blue, white tones and feels cool overall. The strongest text pairing is #232734 on #EBF1FF with a contrast ratio of 13.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Infinity	rgb(35, 39, 52)	hsl(226, 20%, 17%)
Ivy Topiary	rgb(103, 93, 73)	hsl(40, 17%, 35%)
English Manor	rgb(124, 132, 168)	hsl(229, 20%, 57%)
Warm Neutral	rgb(189, 177, 156)	hsl(38, 20%, 68%)
Cotton Boll	rgb(235, 241, 255)	hsl(222, 100%, 96%)

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.

Aa13.15:1 Super#232734 on #EBF1FF
Aa13.15:1 Super#EBF1FF on #232734
Aa7.04:1 Very good#232734 on #BDB19C
Aa7.04:1 Very good#BDB19C on #232734
Aa5.73:1 Good#675D49 on #EBF1FF
Aa5.73:1 Good#EBF1FF on #675D49
Aa4.06:1 Poor#232734 on #7C84A8
Aa4.06:1 Poor#7C84A8 on #232734

Color blindness preview

CSS variables

/* Infinity to Cotton Boll — https://swatchly.xyz/palette/232734-675d49-7c84a8-bdb19c-ebf1ff */
:root {
  --infinity: #232734;
  --ivy-topiary: #675d49;
  --english-manor: #7c84a8;
  --warm-neutral: #bdb19c;
  --cotton-boll: #ebf1ff;
}

Tailwind CSS v4

/* Infinity to Cotton Boll — https://swatchly.xyz/palette/232734-675d49-7c84a8-bdb19c-ebf1ff */
@theme {
  --color-infinity: #232734;
  --color-infinity-50: #f2f5ff;
  --color-infinity-100: #e7ebf6;
  --color-infinity-200: #d3d7e4;
  --color-infinity-300: #bcc0cf;
  --color-infinity-400: #9ca1b1;
  --color-infinity-500: #828797;
  --color-infinity-600: #6a6f7e;
  --color-infinity-700: #555a68;
  --color-infinity-800: #444855;
  --color-infinity-900: #363a45;
  --color-infinity-950: #232734;
  --color-ivy-topiary: #675d49;
  --color-ivy-topiary-50: #fbf4e8;
  --color-ivy-topiary-100: #f2eadc;
  --color-ivy-topiary-200: #e1d8c8;
  --color-ivy-topiary-300: #cdc3b1;
  --color-ivy-topiary-400: #b0a591;
  --color-ivy-topiary-500: #968b76;
  --color-ivy-topiary-600: #7d725e;
  --color-ivy-topiary-700: #675d49;
  --color-ivy-topiary-800: #514838;
  --color-ivy-topiary-900: #3f3729;
  --color-ivy-topiary-950: #282218;
  --color-english-manor: #7c84a8;
  --color-english-manor-50: #f2f5ff;
  --color-english-manor-100: #e5eaff;
  --color-english-manor-200: #cfd6f3;
  --color-english-manor-300: #b7bfe0;
  --color-english-manor-400: #979fc3;
  --color-english-manor-500: #7c84a8;
  --color-english-manor-600: #626a8c;
  --color-english-manor-700: #4d5372;
  --color-english-manor-800: #3b405b;
  --color-english-manor-900: #2d3148;
  --color-english-manor-950: #1b1e2e;
  --color-warm-neutral: #bdb19c;
  --color-warm-neutral-50: #f4eddf;
  --color-warm-neutral-100: #e9e0d1;
  --color-warm-neutral-200: #d4cab9;
  --color-warm-neutral-300: #bdb19c;
  --color-warm-neutral-400: #a09480;
  --color-warm-neutral-500: #877c68;
  --color-warm-neutral-600: #6e6451;
  --color-warm-neutral-700: #59503f;
  --color-warm-neutral-800: #483f30;
  --color-warm-neutral-900: #393225;
  --color-warm-neutral-950: #241e15;
  --color-cotton-boll: #ebf1ff;
  --color-cotton-boll-50: #ebf1ff;
  --color-cotton-boll-100: #e4e8f1;
  --color-cotton-boll-200: #d0d5df;
  --color-cotton-boll-300: #babfca;
  --color-cotton-boll-400: #9ba0ad;
  --color-cotton-boll-500: #808592;
  --color-cotton-boll-600: #676c78;
  --color-cotton-boll-700: #515560;
  --color-cotton-boll-800: #3e424c;
  --color-cotton-boll-900: #2f333b;
  --color-cotton-boll-950: #1d1f25;
}