Cotton Boll to Inkjet Color Palette

About this palette

Cotton Boll to Inkjet is a 4-color muted palette: #E2F2FF (Cotton Boll), #2A1D11 (Burnt Coffee), #A6977E (Mohalla), #3E5875 (Inkjet). It mixes white, gray, yellow, blue tones and feels balanced overall. The strongest text pairing is #E2F2FF on #2A1D11 with a contrast ratio of 14.33:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Boll	rgb(226, 242, 255)	hsl(207, 100%, 94%)
Burnt Coffee	rgb(42, 29, 17)	hsl(29, 42%, 12%)
Mohalla	rgb(166, 151, 126)	hsl(37, 18%, 57%)
Inkjet	rgb(62, 88, 117)	hsl(212, 31%, 35%)

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.

Aa14.33:1 Super#E2F2FF on #2A1D11
Aa14.33:1 Super#2A1D11 on #E2F2FF
Aa6.43:1 Good#E2F2FF on #3E5875
Aa6.43:1 Good#3E5875 on #E2F2FF
Aa5.73:1 Good#2A1D11 on #A6977E
Aa5.73:1 Good#A6977E on #2A1D11

Color blindness preview

CSS variables

/* Cotton Boll to Inkjet — https://swatchly.xyz/palette/e2f2ff-2a1d11-a6977e-3e5875 */
:root {
  --cotton-boll: #e2f2ff;
  --burnt-coffee: #2a1d11;
  --mohalla: #a6977e;
  --inkjet: #3e5875;
}

Tailwind CSS v4

/* Cotton Boll to Inkjet — https://swatchly.xyz/palette/e2f2ff-2a1d11-a6977e-3e5875 */
@theme {
  --color-cotton-boll: #e2f2ff;
  --color-cotton-boll-50: #f3faff;
  --color-cotton-boll-100: #e2f2ff;
  --color-cotton-boll-200: #d1dde6;
  --color-cotton-boll-300: #b9c6d0;
  --color-cotton-boll-400: #97a6b1;
  --color-cotton-boll-500: #7b8a95;
  --color-cotton-boll-600: #616e79;
  --color-cotton-boll-700: #4b5761;
  --color-cotton-boll-800: #39444d;
  --color-cotton-boll-900: #2b343b;
  --color-cotton-boll-950: #1a2025;
  --color-burnt-coffee: #2a1d11;
  --color-burnt-coffee-50: #fdf3ea;
  --color-burnt-coffee-100: #f4e9df;
  --color-burnt-coffee-200: #e2d5c9;
  --color-burnt-coffee-300: #cdbeb1;
  --color-burnt-coffee-400: #af9e90;
  --color-burnt-coffee-500: #938374;
  --color-burnt-coffee-600: #78695b;
  --color-burnt-coffee-700: #615346;
  --color-burnt-coffee-800: #4d4035;
  --color-burnt-coffee-900: #3c3128;
  --color-burnt-coffee-950: #2a1d11;
  --color-mohalla: #a6977e;
  --color-mohalla-50: #faf1e2;
  --color-mohalla-100: #f0e5d4;
  --color-mohalla-200: #dcd0bc;
  --color-mohalla-300: #c6b8a1;
  --color-mohalla-400: #a6977e;
  --color-mohalla-500: #8c7d65;
  --color-mohalla-600: #72654e;
  --color-mohalla-700: #5c503b;
  --color-mohalla-800: #493e2c;
  --color-mohalla-900: #393021;
  --color-mohalla-950: #251e13;
  --color-inkjet: #3e5875;
  --color-inkjet-50: #eef6ff;
  --color-inkjet-100: #ddedff;
  --color-inkjet-200: #c4daf3;
  --color-inkjet-300: #abc4e0;
  --color-inkjet-400: #89a5c4;
  --color-inkjet-500: #6e89a9;
  --color-inkjet-600: #546f8c;
  --color-inkjet-700: #3e5875;
  --color-inkjet-800: #30455c;
  --color-inkjet-900: #233548;
  --color-inkjet-950: #14202f;
}