Fleur-De-Lis to Brown Color Palette

About this palette

Fleur-De-Lis to Brown is a 5-color cool, earthy, vintage palette: #AF8FBF (Fleur-De-Lis), #487CBB (Mykonos), #E8BA86 (Cane Sugar), #5A6B2C (Bimi Green), #673908 (Brown). It mixes purple, blue, orange, green, brown tones and feels cool overall. The strongest text pairing is #E8BA86 on #673908 with a contrast ratio of 5.45:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fleur-De-Lis	rgb(175, 143, 191)	hsl(280, 27%, 65%)
Mykonos	rgb(72, 124, 187)	hsl(213, 46%, 51%)
Cane Sugar	rgb(232, 186, 134)	hsl(32, 68%, 72%)
Bimi Green	rgb(90, 107, 44)	hsl(76, 42%, 30%)
Brown	rgb(103, 57, 8)	hsl(31, 86%, 22%)

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.

Aa5.45:1 Good#E8BA86 on #673908
Aa5.45:1 Good#673908 on #E8BA86
Aa3.47:1 Poor#AF8FBF on #673908
Aa3.47:1 Poor#673908 on #AF8FBF
Aa3.30:1 Poor#E8BA86 on #5A6B2C
Aa3.30:1 Poor#5A6B2C on #E8BA86

Color blindness preview

CSS variables

/* Fleur-De-Lis to Brown — https://swatchly.xyz/palette/af8fbf-487cbb-e8ba86-5a6b2c-673908 */
:root {
  --fleur-de-lis: #af8fbf;
  --mykonos: #487cbb;
  --cane-sugar: #e8ba86;
  --bimi-green: #5a6b2c;
  --brown: #673908;
}

Tailwind CSS v4

/* Fleur-De-Lis to Brown — https://swatchly.xyz/palette/af8fbf-487cbb-e8ba86-5a6b2c-673908 */
@theme {
  --color-fleur-de-lis: #af8fbf;
  --color-fleur-de-lis-50: #faefff;
  --color-fleur-de-lis-100: #f5e0ff;
  --color-fleur-de-lis-200: #e3caf0;
  --color-fleur-de-lis-300: #cdb1dc;
  --color-fleur-de-lis-400: #af8fbf;
  --color-fleur-de-lis-500: #9475a3;
  --color-fleur-de-lis-600: #795c88;
  --color-fleur-de-lis-700: #62476f;
  --color-fleur-de-lis-800: #4e3659;
  --color-fleur-de-lis-900: #3d2946;
  --color-fleur-de-lis-950: #27192e;
  --color-mykonos: #487cbb;
  --color-mykonos-50: #ebf4ff;
  --color-mykonos-100: #d7e9ff;
  --color-mykonos-200: #b2d4ff;
  --color-mykonos-300: #8bbcf7;
  --color-mykonos-400: #669ada;
  --color-mykonos-500: #487cbb;
  --color-mykonos-600: #32639e;
  --color-mykonos-700: #224f83;
  --color-mykonos-800: #163d6b;
  --color-mykonos-900: #0d3057;
  --color-mykonos-950: #051e3a;
  --color-cane-sugar: #e8ba86;
  --color-cane-sugar-50: #fff5e9;
  --color-cane-sugar-100: #ffe9d1;
  --color-cane-sugar-200: #f5d3ad;
  --color-cane-sugar-300: #e8ba86;
  --color-cane-sugar-400: #c59b6a;
  --color-cane-sugar-500: #a97e4c;
  --color-cane-sugar-600: #8d6432;
  --color-cane-sugar-700: #724d1e;
  --color-cane-sugar-800: #5b3b10;
  --color-cane-sugar-900: #472c06;
  --color-cane-sugar-950: #2e1a02;
  --color-bimi-green: #5a6b2c;
  --color-bimi-green-50: #effbd7;
  --color-bimi-green-100: #e2f0c6;
  --color-bimi-green-200: #ccdcaa;
  --color-bimi-green-300: #b3c58c;
  --color-bimi-green-400: #91a466;
  --color-bimi-green-500: #758748;
  --color-bimi-green-600: #5a6b2c;
  --color-bimi-green-700: #47551e;
  --color-bimi-green-800: #364312;
  --color-bimi-green-900: #293409;
  --color-bimi-green-950: #192004;
  --color-brown: #673908;
  --color-brown-50: #fff3e9;
  --color-brown-100: #ffe6d2;
  --color-brown-200: #f8cead;
  --color-brown-300: #e6b791;
  --color-brown-400: #ca976d;
  --color-brown-500: #af7c51;
  --color-brown-600: #936238;
  --color-brown-700: #794d25;
  --color-brown-800: #673908;
  --color-brown-900: #4e2d0d;
  --color-brown-950: #331b04;
}