Start generating

Royal Decree to Ghost White color palette

3F364ARoyal Decree6E647DRum8D859BDusty ChimneyB6A8C6Novel LilacDAD3E2Iron MaidenFBF6FFGhost White
Open in generator Export PNG, PDF, ASE…

About this palette

Royal Decree to Ghost White is a 6-color muted, gradient palette: #3F364A (Royal Decree), #6E647D (Rum), #8D859B (Dusty Chimney), #B6A8C6 (Novel Lilac), #DAD3E2 (Iron Maiden), #FBF6FF (Ghost White). It mixes purple, gray, white tones and feels cool overall. The strongest text pairing is #3F364A on #FBF6FF with a contrast ratio of 10.73:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Royal Decreergb(63, 54, 74)hsl(267, 16%, 25%)
Rumrgb(110, 100, 125)hsl(264, 11%, 44%)
Dusty Chimneyrgb(141, 133, 155)hsl(262, 10%, 56%)
Novel Lilacrgb(182, 168, 198)hsl(268, 21%, 72%)
Iron Maidenrgb(218, 211, 226)hsl(268, 21%, 86%)
Ghost Whitergb(251, 246, 255)hsl(273, 100%, 98%)

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.

  • Aa10.73:1 Very good#3F364A on #FBF6FF
  • Aa10.73:1 Very good#FBF6FF on #3F364A
  • Aa7.83:1 Very good#3F364A on #DAD3E2
  • Aa7.83:1 Very good#DAD3E2 on #3F364A
  • Aa5.22:1 Good#6E647D on #FBF6FF
  • Aa5.22:1 Good#FBF6FF on #6E647D
  • Aa5.12:1 Good#3F364A on #B6A8C6
  • Aa5.12:1 Good#B6A8C6 on #3F364A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Royal Decree to Ghost White — https://swatchly.xyz/palette/3f364a-6e647d-8d859b-b6a8c6-dad3e2-fbf6ff */
:root {
  --royal-decree: #3f364a;
  --rum: #6e647d;
  --dusty-chimney: #8d859b;
  --novel-lilac: #b6a8c6;
  --iron-maiden: #dad3e2;
  --ghost-white: #fbf6ff;
}

Tailwind CSS v4

/* Royal Decree to Ghost White — https://swatchly.xyz/palette/3f364a-6e647d-8d859b-b6a8c6-dad3e2-fbf6ff */
@theme {
  --color-royal-decree: #3f364a;
  --color-royal-decree-50: #f8f2ff;
  --color-royal-decree-100: #eee8f8;
  --color-royal-decree-200: #dbd3e6;
  --color-royal-decree-300: #c4bbd0;
  --color-royal-decree-400: #a399b0;
  --color-royal-decree-500: #877d94;
  --color-royal-decree-600: #6b6177;
  --color-royal-decree-700: #534a5d;
  --color-royal-decree-800: #3f364a;
  --color-royal-decree-900: #302a37;
  --color-royal-decree-950: #1d1922;
  --color-rum: #6e647d;
  --color-rum-50: #f7f3ff;
  --color-rum-100: #eee7f9;
  --color-rum-200: #dad2e7;
  --color-rum-300: #c4bbd3;
  --color-rum-400: #a59ab4;
  --color-rum-500: #897f99;
  --color-rum-600: #6e647d;
  --color-rum-700: #574f65;
  --color-rum-800: #443d50;
  --color-rum-900: #352e3e;
  --color-rum-950: #211c28;
  --color-dusty-chimney: #8d859b;
  --color-dusty-chimney-50: #f7f3ff;
  --color-dusty-chimney-100: #efe9f8;
  --color-dusty-chimney-200: #dcd6e7;
  --color-dusty-chimney-300: #c6bfd3;
  --color-dusty-chimney-400: #a8a0b6;
  --color-dusty-chimney-500: #8d859b;
  --color-dusty-chimney-600: #726a7f;
  --color-dusty-chimney-700: #5a5366;
  --color-dusty-chimney-800: #474051;
  --color-dusty-chimney-900: #36313f;
  --color-dusty-chimney-950: #211e28;
  --color-novel-lilac: #b6a8c6;
  --color-novel-lilac-50: #fbf8ff;
  --color-novel-lilac-100: #f6efff;
  --color-novel-lilac-200: #e6dcf2;
  --color-novel-lilac-300: #d2c7e0;
  --color-novel-lilac-400: #b6a8c6;
  --color-novel-lilac-500: #988aa7;
  --color-novel-lilac-600: #7b6e89;
  --color-novel-lilac-700: #61556e;
  --color-novel-lilac-800: #4b4157;
  --color-novel-lilac-900: #393043;
  --color-novel-lilac-950: #221c29;
  --color-iron-maiden: #dad3e2;
  --color-iron-maiden-50: #f6f2fb;
  --color-iron-maiden-100: #ece8f2;
  --color-iron-maiden-200: #dad3e2;
  --color-iron-maiden-300: #c3bdca;
  --color-iron-maiden-400: #a49eab;
  --color-iron-maiden-500: #898390;
  --color-iron-maiden-600: #6f6875;
  --color-iron-maiden-700: #58525e;
  --color-iron-maiden-800: #45404a;
  --color-iron-maiden-900: #353139;
  --color-iron-maiden-950: #211e24;
  --color-ghost-white: #fbf6ff;
  --color-ghost-white-50: #fbf6ff;
  --color-ghost-white-100: #efecf2;
  --color-ghost-white-200: #dbd8de;
  --color-ghost-white-300: #c5c0c8;
  --color-ghost-white-400: #a5a0a8;
  --color-ghost-white-500: #89858d;
  --color-ghost-white-600: #6e6a71;
  --color-ghost-white-700: #57535a;
  --color-ghost-white-800: #444147;
  --color-ghost-white-900: #343237;
  --color-ghost-white-950: #201e22;
}

Similar palettes