Cola to Pastel Day color palette

3F2D19Cola 5C4B37Black Power 39776CGreen Sleeves A093BAWizard’s Brew 89C3B5Seaborn DED8EEPastel Day

Open in generator Export PNG, PDF, ASE…

About this palette

Cola to Pastel Day is a 6-color muted palette: #3F2D19 (Cola), #5C4B37 (Black Power), #39776C (Green Sleeves), #A093BA (Wizard’s Brew), #89C3B5 (Seaborn), #DED8EE (Pastel Day). It mixes brown, turquoise, purple, gray tones and feels cool overall. The strongest text pairing is #3F2D19 on #DED8EE with a contrast ratio of 9.47:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cola	rgb(63, 45, 25)	hsl(32, 43%, 17%)
Black Power	rgb(92, 75, 55)	hsl(32, 25%, 29%)
Green Sleeves	rgb(57, 119, 108)	hsl(169, 35%, 35%)
Wizard’s Brew	rgb(160, 147, 186)	hsl(260, 22%, 65%)
Seaborn	rgb(137, 195, 181)	hsl(166, 33%, 65%)
Pastel Day	rgb(222, 216, 238)	hsl(256, 39%, 89%)

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#3F2D19 on #DED8EE
Aa9.47:1 Very good#DED8EE on #3F2D19
Aa6.58:1 Good#3F2D19 on #89C3B5
Aa6.58:1 Good#89C3B5 on #3F2D19
Aa6.02:1 Good#5C4B37 on #DED8EE
Aa6.02:1 Good#DED8EE on #5C4B37
Aa4.61:1 Good#3F2D19 on #A093BA
Aa4.61:1 Good#A093BA on #3F2D19

Color blindness preview

CSS variables

/* Cola to Pastel Day — https://swatchly.xyz/palette/3f2d19-5c4b37-39776c-a093ba-89c3b5-ded8ee */
:root {
  --cola: #3f2d19;
  --black-power: #5c4b37;
  --green-sleeves: #39776c;
  --wizard-s-brew: #a093ba;
  --seaborn: #89c3b5;
  --pastel-day: #ded8ee;
}

Tailwind CSS v4

/* Cola to Pastel Day — https://swatchly.xyz/palette/3f2d19-5c4b37-39776c-a093ba-89c3b5-ded8ee */
@theme {
  --color-cola: #3f2d19;
  --color-cola-50: #fff3e6;
  --color-cola-100: #f7e8d9;
  --color-cola-200: #e6d4c2;
  --color-cola-300: #d1bda9;
  --color-cola-400: #b29d87;
  --color-cola-500: #97816b;
  --color-cola-600: #7b6752;
  --color-cola-700: #62503d;
  --color-cola-800: #4d3e2d;
  --color-cola-900: #3f2d19;
  --color-cola-950: #251c12;
  --color-black-power: #5c4b37;
  --color-black-power-50: #fff3e6;
  --color-black-power-100: #f6e9da;
  --color-black-power-200: #e3d3c2;
  --color-black-power-300: #ccbba7;
  --color-black-power-400: #ad9a85;
  --color-black-power-500: #907e68;
  --color-black-power-600: #74624e;
  --color-black-power-700: #5c4b37;
  --color-black-power-800: #473a2b;
  --color-black-power-900: #372c1f;
  --color-black-power-950: #231b11;
  --color-green-sleeves: #39776c;
  --color-green-sleeves-50: #dcfef6;
  --color-green-sleeves-100: #cef5ec;
  --color-green-sleeves-200: #b4e2d8;
  --color-green-sleeves-300: #98cdc2;
  --color-green-sleeves-400: #73aea2;
  --color-green-sleeves-500: #559287;
  --color-green-sleeves-600: #39776c;
  --color-green-sleeves-700: #275f56;
  --color-green-sleeves-800: #184b43;
  --color-green-sleeves-900: #0e3a33;
  --color-green-sleeves-950: #052520;
  --color-wizard-s-brew: #a093ba;
  --color-wizard-s-brew-50: #f5f0ff;
  --color-wizard-s-brew-100: #ebe2fd;
  --color-wizard-s-brew-200: #d7cdec;
  --color-wizard-s-brew-300: #c0b4d8;
  --color-wizard-s-brew-400: #a093ba;
  --color-wizard-s-brew-500: #86799f;
  --color-wizard-s-brew-600: #6c6084;
  --color-wizard-s-brew-700: #574c6c;
  --color-wizard-s-brew-800: #443b56;
  --color-wizard-s-brew-900: #352d45;
  --color-wizard-s-brew-950: #221c2d;
  --color-seaborn: #89c3b5;
  --color-seaborn-50: #d6f8ef;
  --color-seaborn-100: #c6ede3;
  --color-seaborn-200: #abd9cd;
  --color-seaborn-300: #89c3b5;
  --color-seaborn-400: #6da598;
  --color-seaborn-500: #538c7f;
  --color-seaborn-600: #3c7266;
  --color-seaborn-700: #2a5c52;
  --color-seaborn-800: #1c4a41;
  --color-seaborn-900: #133b33;
  --color-seaborn-950: #08251f;
  --color-pastel-day: #ded8ee;
  --color-pastel-day-50: #f9f7ff;
  --color-pastel-day-100: #f0edfa;
  --color-pastel-day-200: #ded8ee;
  --color-pastel-day-300: #c6c1d3;
  --color-pastel-day-400: #a6a1b5;
  --color-pastel-day-500: #8a8599;
  --color-pastel-day-600: #6f6a7d;
  --color-pastel-day-700: #585364;
  --color-pastel-day-800: #44404e;
  --color-pastel-day-900: #34303d;
  --color-pastel-day-950: #201e27;
}