Tamed Beauty to Cola Color Palette

About this palette

Tamed Beauty to Cola is a 4-color muted, vintage palette: #D6BACD (Tamed Beauty), #70917A (Toad), #466683 (Stellar), #442F1A (Cola). It mixes pink, green, blue, brown tones and feels balanced overall. The strongest text pairing is #D6BACD on #442F1A with a contrast ratio of 7.06:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tamed Beauty	rgb(214, 186, 205)	hsl(319, 25%, 78%)
Toad	rgb(112, 145, 122)	hsl(138, 13%, 50%)
Stellar	rgb(70, 102, 131)	hsl(209, 30%, 39%)
Cola	rgb(68, 47, 26)	hsl(30, 45%, 18%)

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.

Aa7.06:1 Very good#D6BACD on #442F1A
Aa7.06:1 Very good#442F1A on #D6BACD
Aa3.61:1 Poor#70917A on #442F1A
Aa3.61:1 Poor#442F1A on #70917A
Aa3.37:1 Poor#D6BACD on #466683
Aa3.37:1 Poor#466683 on #D6BACD

Color blindness preview

CSS variables

/* Tamed Beauty to Cola — https://swatchly.xyz/palette/d6bacd-70917a-466683-442f1a */
:root {
  --tamed-beauty: #d6bacd;
  --toad: #70917a;
  --stellar: #466683;
  --cola: #442f1a;
}

Tailwind CSS v4

/* Tamed Beauty to Cola — https://swatchly.xyz/palette/d6bacd-70917a-466683-442f1a */
@theme {
  --color-tamed-beauty: #d6bacd;
  --color-tamed-beauty-50: #fff2fb;
  --color-tamed-beauty-100: #f9e7f3;
  --color-tamed-beauty-200: #e8d3e1;
  --color-tamed-beauty-300: #d6bacd;
  --color-tamed-beauty-400: #b59bac;
  --color-tamed-beauty-500: #997f91;
  --color-tamed-beauty-600: #7d6475;
  --color-tamed-beauty-700: #644e5e;
  --color-tamed-beauty-800: #4f3c49;
  --color-tamed-beauty-900: #3d2d38;
  --color-tamed-beauty-950: #271b23;
  --color-toad: #70917a;
  --color-toad-50: #e8fbed;
  --color-toad-100: #dcf2e3;
  --color-toad-200: #c6e0cd;
  --color-toad-300: #adcbb6;
  --color-toad-400: #8cac95;
  --color-toad-500: #70917a;
  --color-toad-600: #567660;
  --color-toad-700: #415e4a;
  --color-toad-800: #314a39;
  --color-toad-900: #24392b;
  --color-toad-950: #142419;
  --color-stellar: #466683;
  --color-stellar-50: #edf6ff;
  --color-stellar-100: #d8ecff;
  --color-stellar-200: #bdd8f1;
  --color-stellar-300: #a1c0dc;
  --color-stellar-400: #7e9fbd;
  --color-stellar-500: #6182a0;
  --color-stellar-600: #466683;
  --color-stellar-700: #35516a;
  --color-stellar-800: #273f55;
  --color-stellar-900: #1c3143;
  --color-stellar-950: #0f1e2b;
  --color-cola: #442f1a;
  --color-cola-50: #fff3e8;
  --color-cola-100: #f9e8d8;
  --color-cola-200: #e8d4c1;
  --color-cola-300: #d3bca7;
  --color-cola-400: #b59d86;
  --color-cola-500: #9a816a;
  --color-cola-600: #7f6751;
  --color-cola-700: #67513d;
  --color-cola-800: #523f2e;
  --color-cola-900: #442f1a;
  --color-cola-950: #291e13;
}