Cotton Ball to Noble Black color palette

EDF6FFCotton Ball B8B48EGreen Tea 9F7F75Hemp 52433CEspresso Macchiato 1D2228Noble Black

About this palette

Cotton Ball to Noble Black is a 5-color muted, gradient palette: #EDF6FF (Cotton Ball), #B8B48E (Green Tea), #9F7F75 (Hemp), #52433C (Espresso Macchiato), #1D2228 (Noble Black). It mixes white, yellow, red, gray tones and feels warm overall. The strongest text pairing is #EDF6FF on #1D2228 with a contrast ratio of 14.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cotton Ball	rgb(237, 246, 255)	hsl(210, 100%, 96%)
Green Tea	rgb(184, 180, 142)	hsl(54, 23%, 64%)
Hemp	rgb(159, 127, 117)	hsl(14, 18%, 54%)
Espresso Macchiato	rgb(82, 67, 60)	hsl(19, 15%, 28%)
Noble Black	rgb(29, 34, 40)	hsl(213, 16%, 14%)

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.66:1 Super#EDF6FF on #1D2228
Aa14.66:1 Super#1D2228 on #EDF6FF
Aa8.63:1 Very good#EDF6FF on #52433C
Aa8.63:1 Very good#52433C on #EDF6FF
Aa7.59:1 Very good#B8B48E on #1D2228
Aa7.59:1 Very good#1D2228 on #B8B48E
Aa4.47:1 Poor#B8B48E on #52433C
Aa4.47:1 Poor#52433C on #B8B48E

Color blindness preview

CSS variables

/* Cotton Ball to Noble Black — https://swatchly.xyz/palette/edf6ff-b8b48e-9f7f75-52433c-1d2228 */
:root {
  --cotton-ball: #edf6ff;
  --green-tea: #b8b48e;
  --hemp: #9f7f75;
  --espresso-macchiato: #52433c;
  --noble-black: #1d2228;
}

Tailwind CSS v4

/* Cotton Ball to Noble Black — https://swatchly.xyz/palette/edf6ff-b8b48e-9f7f75-52433c-1d2228 */
@theme {
  --color-cotton-ball: #edf6ff;
  --color-cotton-ball-50: #edf6ff;
  --color-cotton-ball-100: #e6ecf1;
  --color-cotton-ball-200: #d2d8df;
  --color-cotton-ball-300: #bac2c9;
  --color-cotton-ball-400: #9aa2aa;
  --color-cotton-ball-500: #7f878f;
  --color-cotton-ball-600: #656d74;
  --color-cotton-ball-700: #4f565d;
  --color-cotton-ball-800: #3d4349;
  --color-cotton-ball-900: #2e3339;
  --color-cotton-ball-950: #1c2023;
  --color-green-tea: #b8b48e;
  --color-green-tea-50: #f1efd7;
  --color-green-tea-100: #e5e2c8;
  --color-green-tea-200: #d0cdad;
  --color-green-tea-300: #b8b48e;
  --color-green-tea-400: #9b9773;
  --color-green-tea-500: #837f5a;
  --color-green-tea-600: #6a6744;
  --color-green-tea-700: #565233;
  --color-green-tea-800: #454126;
  --color-green-tea-900: #36341c;
  --color-green-tea-950: #22200f;
  --color-hemp: #9f7f75;
  --color-hemp-50: #fff2ee;
  --color-hemp-100: #fce6df;
  --color-hemp-200: #ecd2c9;
  --color-hemp-300: #d8bab1;
  --color-hemp-400: #ba9a90;
  --color-hemp-500: #9f7f75;
  --color-hemp-600: #83655b;
  --color-hemp-700: #6a4f46;
  --color-hemp-800: #543c35;
  --color-hemp-900: #422e27;
  --color-hemp-950: #2a1b17;
  --color-espresso-macchiato: #52433c;
  --color-espresso-macchiato-50: #fdf3ee;
  --color-espresso-macchiato-100: #f4e8e3;
  --color-espresso-macchiato-200: #e2d4ce;
  --color-espresso-macchiato-300: #cebeb7;
  --color-espresso-macchiato-400: #b09f97;
  --color-espresso-macchiato-500: #95857d;
  --color-espresso-macchiato-600: #7b6b64;
  --color-espresso-macchiato-700: #64554f;
  --color-espresso-macchiato-800: #52433c;
  --color-espresso-macchiato-900: #3f342e;
  --color-espresso-macchiato-950: #28201c;
  --color-noble-black: #1d2228;
  --color-noble-black-50: #f2f5fa;
  --color-noble-black-100: #e7ecf1;
  --color-noble-black-200: #d3d8de;
  --color-noble-black-300: #bcc1c8;
  --color-noble-black-400: #9ca2aa;
  --color-noble-black-500: #81878f;
  --color-noble-black-600: #676d74;
  --color-noble-black-700: #52575e;
  --color-noble-black-800: #40454a;
  --color-noble-black-900: #31353a;
  --color-noble-black-950: #1d2228;
}