Fabulous Fawn to Paradiso Color Palette

About this palette

Fabulous Fawn to Paradiso is a 5-color cool, vintage palette: #E2C0A3 (Fabulous Fawn), #09212B (The Count’s Black), #8E89B8 (Magic Carpet), #623E0C (Brown), #488191 (Paradiso). It mixes orange, blue, purple, brown tones and feels cool overall. The strongest text pairing is #E2C0A3 on #09212B with a contrast ratio of 9.73:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fabulous Fawn	rgb(226, 192, 163)	hsl(28, 52%, 76%)
The Count’s Black	rgb(9, 33, 43)	hsl(198, 65%, 10%)
Magic Carpet	rgb(142, 137, 184)	hsl(246, 25%, 63%)
Brown	rgb(98, 62, 12)	hsl(35, 78%, 22%)
Paradiso	rgb(72, 129, 145)	hsl(193, 34%, 43%)

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.73:1 Very good#E2C0A3 on #09212B
Aa9.73:1 Very good#09212B on #E2C0A3
Aa5.56:1 Good#E2C0A3 on #623E0C
Aa5.56:1 Good#623E0C on #E2C0A3
Aa5.08:1 Good#09212B on #8E89B8
Aa5.08:1 Good#8E89B8 on #09212B
Aa3.82:1 Poor#09212B on #488191
Aa3.82:1 Poor#488191 on #09212B

Color blindness preview

CSS variables

/* Fabulous Fawn to Paradiso — https://swatchly.xyz/palette/e2c0a3-09212b-8e89b8-623e0c-488191 */
:root {
  --fabulous-fawn: #e2c0a3;
  --the-count-s-black: #09212b;
  --magic-carpet: #8e89b8;
  --brown: #623e0c;
  --paradiso: #488191;
}

Tailwind CSS v4

/* Fabulous Fawn to Paradiso — https://swatchly.xyz/palette/e2c0a3-09212b-8e89b8-623e0c-488191 */
@theme {
  --color-fabulous-fawn: #e2c0a3;
  --color-fabulous-fawn-50: #fff7f0;
  --color-fabulous-fawn-100: #ffecdb;
  --color-fabulous-fawn-200: #f0d8c3;
  --color-fabulous-fawn-300: #e2c0a3;
  --color-fabulous-fawn-400: #bfa085;
  --color-fabulous-fawn-500: #a38368;
  --color-fabulous-fawn-600: #86684e;
  --color-fabulous-fawn-700: #6c5139;
  --color-fabulous-fawn-800: #553e29;
  --color-fabulous-fawn-900: #422e1c;
  --color-fabulous-fawn-950: #2a1c0f;
  --color-the-count-s-black: #09212b;
  --color-the-count-s-black-50: #e9f8ff;
  --color-the-count-s-black-100: #ddeef7;
  --color-the-count-s-black-200: #c7dbe5;
  --color-the-count-s-black-300: #aec5d1;
  --color-the-count-s-black-400: #8ca6b2;
  --color-the-count-s-black-500: #708a97;
  --color-the-count-s-black-600: #57707b;
  --color-the-count-s-black-700: #425863;
  --color-the-count-s-black-800: #31454e;
  --color-the-count-s-black-900: #24343c;
  --color-the-count-s-black-950: #09212b;
  --color-magic-carpet: #8e89b8;
  --color-magic-carpet-50: #f6f6ff;
  --color-magic-carpet-100: #eeecff;
  --color-magic-carpet-200: #dbd8fc;
  --color-magic-carpet-300: #c6c2eb;
  --color-magic-carpet-400: #a8a3d1;
  --color-magic-carpet-500: #8e89b8;
  --color-magic-carpet-600: #726d9a;
  --color-magic-carpet-700: #5a557e;
  --color-magic-carpet-800: #464165;
  --color-magic-carpet-900: #35314f;
  --color-magic-carpet-950: #201d33;
  --color-brown: #623e0c;
  --color-brown-50: #fff3e6;
  --color-brown-100: #ffe7cd;
  --color-brown-200: #f2d1ae;
  --color-brown-300: #dfbb93;
  --color-brown-400: #c39b6f;
  --color-brown-500: #a88052;
  --color-brown-600: #8d673a;
  --color-brown-700: #745127;
  --color-brown-800: #623e0c;
  --color-brown-900: #4a300e;
  --color-brown-950: #301d05;
  --color-paradiso: #488191;
  --color-paradiso-50: #e6f9ff;
  --color-paradiso-100: #d2f4ff;
  --color-paradiso-200: #bbe4f0;
  --color-paradiso-300: #a1d0df;
  --color-paradiso-400: #7eb4c3;
  --color-paradiso-500: #629aaa;
  --color-paradiso-600: #488191;
  --color-paradiso-700: #316776;
  --color-paradiso-800: #20515e;
  --color-paradiso-900: #133e49;
  --color-paradiso-950: #07272f;
}