Wood Bark to Sweetly Color Palette

About this palette

Wood Bark to Sweetly is a 4-color muted, gradient palette: #2D2612 (Wood Bark), #466F64 (Moonlit Forest), #A3A7CC (Old World), #FFE6F0 (Sweetly). It mixes gray, turquoise, purple, white tones and feels cool overall. The strongest text pairing is #2D2612 on #FFE6F0 with a contrast ratio of 12.76:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wood Bark	rgb(45, 38, 18)	hsl(44, 43%, 12%)
Moonlit Forest	rgb(70, 111, 100)	hsl(164, 23%, 35%)
Old World	rgb(163, 167, 204)	hsl(234, 29%, 72%)
Sweetly	rgb(255, 230, 240)	hsl(336, 100%, 95%)

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.

Aa12.76:1 Super#2D2612 on #FFE6F0
Aa12.76:1 Super#FFE6F0 on #2D2612
Aa6.41:1 Good#2D2612 on #A3A7CC
Aa6.41:1 Good#A3A7CC on #2D2612
Aa4.80:1 Good#466F64 on #FFE6F0
Aa4.80:1 Good#FFE6F0 on #466F64

Color blindness preview

CSS variables

/* Wood Bark to Sweetly — https://swatchly.xyz/palette/2d2612-466f64-a3a7cc-ffe6f0 */
:root {
  --wood-bark: #2d2612;
  --moonlit-forest: #466f64;
  --old-world: #a3a7cc;
  --sweetly: #ffe6f0;
}

Tailwind CSS v4

/* Wood Bark to Sweetly — https://swatchly.xyz/palette/2d2612-466f64-a3a7cc-ffe6f0 */
@theme {
  --color-wood-bark: #2d2612;
  --color-wood-bark-50: #faf5e7;
  --color-wood-bark-100: #f0ebdb;
  --color-wood-bark-200: #ded7c5;
  --color-wood-bark-300: #c8c1ac;
  --color-wood-bark-400: #a9a18a;
  --color-wood-bark-500: #8f8770;
  --color-wood-bark-600: #766e58;
  --color-wood-bark-700: #605945;
  --color-wood-bark-800: #4e4735;
  --color-wood-bark-900: #3f3929;
  --color-wood-bark-950: #2d2612;
  --color-moonlit-forest: #466f64;
  --color-moonlit-forest-50: #e3fcf4;
  --color-moonlit-forest-100: #d6f1e9;
  --color-moonlit-forest-200: #bdded4;
  --color-moonlit-forest-300: #a1c7bc;
  --color-moonlit-forest-400: #7ea79b;
  --color-moonlit-forest-500: #618b7f;
  --color-moonlit-forest-600: #466f64;
  --color-moonlit-forest-700: #34584f;
  --color-moonlit-forest-800: #26463d;
  --color-moonlit-forest-900: #1b362f;
  --color-moonlit-forest-950: #0e221d;
  --color-old-world: #a3a7cc;
  --color-old-world-50: #f7f8ff;
  --color-old-world-100: #ecefff;
  --color-old-world-200: #d8dbf7;
  --color-old-world-300: #c2c6e5;
  --color-old-world-400: #a3a7cc;
  --color-old-world-500: #868aae;
  --color-old-world-600: #6b6e90;
  --color-old-world-700: #535675;
  --color-old-world-800: #40425d;
  --color-old-world-900: #303248;
  --color-old-world-950: #1c1e2e;
  --color-sweetly: #ffe6f0;
  --color-sweetly-50: #fff4f8;
  --color-sweetly-100: #ffe6f0;
  --color-sweetly-200: #e6d4db;
  --color-sweetly-300: #d1bcc4;
  --color-sweetly-400: #b29ca5;
  --color-sweetly-500: #968089;
  --color-sweetly-600: #7a656e;
  --color-sweetly-700: #624f57;
  --color-sweetly-800: #4d3d44;
  --color-sweetly-900: #3c2e34;
  --color-sweetly-950: #261c20;
}