Tuscan to Midnight Ocean Color Palette

About this palette

Tuscan to Midnight Ocean is a 4-color cool palette: #F9D3A9 (Tuscan), #B293D4 (Fleur-De-Lis), #567605 (Topiary Green), #002F49 (Midnight Ocean). It mixes orange, purple, green, blue tones and feels cool overall. The strongest text pairing is #F9D3A9 on #002F49 with a contrast ratio of 9.93:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tuscan	rgb(249, 211, 169)	hsl(31, 87%, 82%)
Fleur-De-Lis	rgb(178, 147, 212)	hsl(269, 43%, 70%)
Topiary Green	rgb(86, 118, 5)	hsl(77, 92%, 24%)
Midnight Ocean	rgb(0, 47, 73)	hsl(201, 100%, 14%)

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.93:1 Very good#F9D3A9 on #002F49
Aa9.93:1 Very good#002F49 on #F9D3A9
Aa5.33:1 Good#B293D4 on #002F49
Aa5.33:1 Good#002F49 on #B293D4
Aa3.74:1 Poor#F9D3A9 on #567605
Aa3.74:1 Poor#567605 on #F9D3A9

Color blindness preview

CSS variables

/* Tuscan to Midnight Ocean — https://swatchly.xyz/palette/f9d3a9-b293d4-567605-002f49 */
:root {
  --tuscan: #f9d3a9;
  --fleur-de-lis: #b293d4;
  --topiary-green: #567605;
  --midnight-ocean: #002f49;
}

Tailwind CSS v4

/* Tuscan to Midnight Ocean — https://swatchly.xyz/palette/f9d3a9-b293d4-567605-002f49 */
@theme {
  --color-tuscan: #f9d3a9;
  --color-tuscan-50: #fff5eb;
  --color-tuscan-100: #ffead3;
  --color-tuscan-200: #f9d3a9;
  --color-tuscan-300: #ddbd9b;
  --color-tuscan-400: #bf9c76;
  --color-tuscan-500: #a38059;
  --color-tuscan-600: #87663f;
  --color-tuscan-700: #6d4f2c;
  --color-tuscan-800: #563c1d;
  --color-tuscan-900: #442e13;
  --color-tuscan-950: #2b1c08;
  --color-fleur-de-lis: #b293d4;
  --color-fleur-de-lis-50: #f8f3ff;
  --color-fleur-de-lis-100: #f1e7ff;
  --color-fleur-de-lis-200: #e4cdff;
  --color-fleur-de-lis-300: #cfb5ee;
  --color-fleur-de-lis-400: #b293d4;
  --color-fleur-de-lis-500: #9678b6;
  --color-fleur-de-lis-600: #7b5d99;
  --color-fleur-de-lis-700: #62487e;
  --color-fleur-de-lis-800: #4e3665;
  --color-fleur-de-lis-900: #3c2850;
  --color-fleur-de-lis-950: #261734;
  --color-topiary-green: #567605;
  --color-topiary-green-50: #e9ffca;
  --color-topiary-green-100: #ddf5ba;
  --color-topiary-green-200: #c6e39c;
  --color-topiary-green-300: #adcd7b;
  --color-topiary-green-400: #8cae51;
  --color-topiary-green-500: #70922f;
  --color-topiary-green-600: #567605;
  --color-topiary-green-700: #435e00;
  --color-topiary-green-800: #344900;
  --color-topiary-green-900: #273900;
  --color-topiary-green-950: #172300;
  --color-midnight-ocean: #002f49;
  --color-midnight-ocean-50: #ecf7ff;
  --color-midnight-ocean-100: #d9efff;
  --color-midnight-ocean-200: #bbddf5;
  --color-midnight-ocean-300: #a0c7e2;
  --color-midnight-ocean-400: #7ba6c4;
  --color-midnight-ocean-500: #5e89a7;
  --color-midnight-ocean-600: #436d89;
  --color-midnight-ocean-700: #2f546e;
  --color-midnight-ocean-800: #1f4055;
  --color-midnight-ocean-900: #002f49;
  --color-midnight-ocean-950: #091c28;
}