Think Brick to Canadian Tuxedo Color Palette

About this palette

Think Brick to Canadian Tuxedo is a 4-color muted palette: #844B47 (Think Brick), #BCE8DA (Water Leaf), #211615 (Bats Cloak), #5295BD (Canadian Tuxedo). It mixes red, turquoise, black, blue tones and feels cool overall. The strongest text pairing is #BCE8DA on #211615 with a contrast ratio of 13.18:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Think Brick	rgb(132, 75, 71)	hsl(4, 30%, 40%)
Water Leaf	rgb(188, 232, 218)	hsl(161, 49%, 82%)
Bats Cloak	rgb(33, 22, 21)	hsl(5, 22%, 11%)
Canadian Tuxedo	rgb(82, 149, 189)	hsl(202, 45%, 53%)

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.18:1 Super#BCE8DA on #211615
Aa13.18:1 Super#211615 on #BCE8DA
Aa5.37:1 Good#211615 on #5295BD
Aa5.37:1 Good#5295BD on #211615
Aa5.10:1 Good#844B47 on #BCE8DA
Aa5.10:1 Good#BCE8DA on #844B47

Color blindness preview

CSS variables

/* Think Brick to Canadian Tuxedo — https://swatchly.xyz/palette/844b47-bce8da-211615-5295bd */
:root {
  --think-brick: #844b47;
  --water-leaf: #bce8da;
  --bats-cloak: #211615;
  --canadian-tuxedo: #5295bd;
}

Tailwind CSS v4

/* Think Brick to Canadian Tuxedo — https://swatchly.xyz/palette/844b47-bce8da-211615-5295bd */
@theme {
  --color-think-brick: #844b47;
  --color-think-brick-50: #fff2f0;
  --color-think-brick-100: #ffe4e1;
  --color-think-brick-200: #fdcbc6;
  --color-think-brick-300: #ecb4af;
  --color-think-brick-400: #d1948f;
  --color-think-brick-500: #b77974;
  --color-think-brick-600: #9b605c;
  --color-think-brick-700: #844b47;
  --color-think-brick-800: #693936;
  --color-think-brick-900: #532a28;
  --color-think-brick-950: #361917;
  --color-water-leaf: #bce8da;
  --color-water-leaf-50: #e8fff7;
  --color-water-leaf-100: #ddf6ee;
  --color-water-leaf-200: #bce8da;
  --color-water-leaf-300: #abcec3;
  --color-water-leaf-400: #87afa2;
  --color-water-leaf-500: #699386;
  --color-water-leaf-600: #4f776b;
  --color-water-leaf-700: #3a5f54;
  --color-water-leaf-800: #2a4a41;
  --color-water-leaf-900: #1e3931;
  --color-water-leaf-950: #10241e;
  --color-bats-cloak: #211615;
  --color-bats-cloak-50: #fcf3f2;
  --color-bats-cloak-100: #f3e8e7;
  --color-bats-cloak-200: #e0d4d3;
  --color-bats-cloak-300: #cbbdbc;
  --color-bats-cloak-400: #ac9e9c;
  --color-bats-cloak-500: #90817f;
  --color-bats-cloak-600: #736664;
  --color-bats-cloak-700: #5b4e4d;
  --color-bats-cloak-800: #453b3a;
  --color-bats-cloak-900: #342b2a;
  --color-bats-cloak-950: #211615;
  --color-canadian-tuxedo: #5295bd;
  --color-canadian-tuxedo-50: #eef8ff;
  --color-canadian-tuxedo-100: #dcf1ff;
  --color-canadian-tuxedo-200: #b5e2ff;
  --color-canadian-tuxedo-300: #96cef1;
  --color-canadian-tuxedo-400: #71b0d7;
  --color-canadian-tuxedo-500: #5295bd;
  --color-canadian-tuxedo-600: #36799f;
  --color-canadian-tuxedo-700: #1f6083;
  --color-canadian-tuxedo-800: #0e4b69;
  --color-canadian-tuxedo-900: #043953;
  --color-canadian-tuxedo-950: #002336;
}