Fleur-De-Lis to Peanut Butter Biscuit color palette

B68BBDFleur-De-Lis 194973Pretty Twilight Night 1C3200Dark Serpent 5F7BBAFlood F2B669Peanut Butter Biscuit

Open in generator Export PNG, PDF, ASE…

About this palette

Fleur-De-Lis to Peanut Butter Biscuit is a 5-color cool palette: #B68BBD (Fleur-De-Lis), #194973 (Pretty Twilight Night), #1C3200 (Dark Serpent), #5F7BBA (Flood), #F2B669 (Peanut Butter Biscuit). It mixes purple, blue, green, orange tones and feels cool overall. The strongest text pairing is #1C3200 on #F2B669 with a contrast ratio of 7.75:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fleur-De-Lis	rgb(182, 139, 189)	hsl(292, 27%, 64%)
Pretty Twilight Night	rgb(25, 73, 115)	hsl(208, 64%, 27%)
Dark Serpent	rgb(28, 50, 0)	hsl(86, 100%, 10%)
Flood	rgb(95, 123, 186)	hsl(222, 40%, 55%)
Peanut Butter Biscuit	rgb(242, 182, 105)	hsl(34, 84%, 68%)

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.75:1 Very good#1C3200 on #F2B669
Aa7.75:1 Very good#F2B669 on #1C3200
Aa5.21:1 Good#194973 on #F2B669
Aa5.21:1 Good#F2B669 on #194973
Aa4.93:1 Good#B68BBD on #1C3200
Aa4.93:1 Good#1C3200 on #B68BBD
Aa3.34:1 Poor#1C3200 on #5F7BBA
Aa3.34:1 Poor#5F7BBA on #1C3200

Color blindness preview

CSS variables

/* Fleur-De-Lis to Peanut Butter Biscuit — https://swatchly.xyz/palette/b68bbd-194973-1c3200-5f7bba-f2b669 */
:root {
  --fleur-de-lis: #b68bbd;
  --pretty-twilight-night: #194973;
  --dark-serpent: #1c3200;
  --flood: #5f7bba;
  --peanut-butter-biscuit: #f2b669;
}

Tailwind CSS v4

/* Fleur-De-Lis to Peanut Butter Biscuit — https://swatchly.xyz/palette/b68bbd-194973-1c3200-5f7bba-f2b669 */
@theme {
  --color-fleur-de-lis: #b68bbd;
  --color-fleur-de-lis-50: #fdeeff;
  --color-fleur-de-lis-100: #faddff;
  --color-fleur-de-lis-200: #e9c7ee;
  --color-fleur-de-lis-300: #d4adda;
  --color-fleur-de-lis-400: #b68bbd;
  --color-fleur-de-lis-500: #9b71a1;
  --color-fleur-de-lis-600: #7f5886;
  --color-fleur-de-lis-700: #67446d;
  --color-fleur-de-lis-800: #523358;
  --color-fleur-de-lis-900: #412745;
  --color-fleur-de-lis-950: #2a172d;
  --color-pretty-twilight-night: #194973;
  --color-pretty-twilight-night-50: #eef6ff;
  --color-pretty-twilight-night-100: #dcedff;
  --color-pretty-twilight-night-200: #b9dcff;
  --color-pretty-twilight-night-300: #9cc6f0;
  --color-pretty-twilight-night-400: #79a8d6;
  --color-pretty-twilight-night-500: #5d8dbb;
  --color-pretty-twilight-night-600: #44739f;
  --color-pretty-twilight-night-700: #315c85;
  --color-pretty-twilight-night-800: #194973;
  --color-pretty-twilight-night-900: #163857;
  --color-pretty-twilight-night-950: #0a2339;
  --color-dark-serpent: #1c3200;
  --color-dark-serpent-50: #ebfcde;
  --color-dark-serpent-100: #e0f2d1;
  --color-dark-serpent-200: #cae0b8;
  --color-dark-serpent-300: #b2ca9d;
  --color-dark-serpent-400: #8faa78;
  --color-dark-serpent-500: #728d5b;
  --color-dark-serpent-600: #577041;
  --color-dark-serpent-700: #41572d;
  --color-dark-serpent-800: #2f421d;
  --color-dark-serpent-900: #1c3200;
  --color-dark-serpent-950: #121d08;
  --color-flood: #5f7bba;
  --color-flood-50: #eef3ff;
  --color-flood-100: #dde8ff;
  --color-flood-200: #bdd2ff;
  --color-flood-300: #9ebaf5;
  --color-flood-400: #7b98d8;
  --color-flood-500: #5f7bba;
  --color-flood-600: #48629d;
  --color-flood-700: #364d82;
  --color-flood-800: #283c6a;
  --color-flood-900: #1e2e55;
  --color-flood-950: #111c39;
  --color-peanut-butter-biscuit: #f2b669;
  --color-peanut-butter-biscuit-50: #fff4e8;
  --color-peanut-butter-biscuit-100: #ffe9ce;
  --color-peanut-butter-biscuit-200: #fdd09a;
  --color-peanut-butter-biscuit-300: #f2b669;
  --color-peanut-butter-biscuit-400: #ce974e;
  --color-peanut-butter-biscuit-500: #b37a29;
  --color-peanut-butter-biscuit-600: #956000;
  --color-peanut-butter-biscuit-700: #774b00;
  --color-peanut-butter-biscuit-800: #5d3a00;
  --color-peanut-butter-biscuit-900: #482c00;
  --color-peanut-butter-biscuit-950: #2e1a00;
}