Start generating

Savoy Blue to Brass Buttons color palette

4164D3Savoy Blue3A5692Glimpse of Void483100Moelleux au ChocolatC8D5FFIcy PlainsBD9400Moutarde de BénichonE1AB43Brass Buttons
Open in generator Export PNG, PDF, ASE…

About this palette

Savoy Blue to Brass Buttons is a 6-color palette: #4164D3 (Savoy Blue), #3A5692 (Glimpse of Void), #483100 (Moelleux au Chocolat), #C8D5FF (Icy Plains), #BD9400 (Moutarde de Bénichon), #E1AB43 (Brass Buttons). It mixes blue, brown, yellow tones and feels balanced overall. The strongest text pairing is #483100 on #C8D5FF with a contrast ratio of 8.41:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Savoy Bluergb(65, 100, 211)hsl(226, 62%, 54%)
Glimpse of Voidrgb(58, 86, 146)hsl(221, 43%, 40%)
Moelleux au Chocolatrgb(72, 49, 0)hsl(41, 100%, 14%)
Icy Plainsrgb(200, 213, 255)hsl(226, 100%, 89%)
Moutarde de Bénichonrgb(189, 148, 0)hsl(47, 100%, 37%)
Brass Buttonsrgb(225, 171, 67)hsl(39, 72%, 57%)

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.

  • Aa8.41:1 Very good#483100 on #C8D5FF
  • Aa8.41:1 Very good#C8D5FF on #483100
  • Aa5.89:1 Good#483100 on #E1AB43
  • Aa5.89:1 Good#E1AB43 on #483100
  • Aa4.93:1 Good#3A5692 on #C8D5FF
  • Aa4.93:1 Good#C8D5FF on #3A5692
  • Aa4.32:1 Poor#483100 on #BD9400
  • Aa4.32:1 Poor#BD9400 on #483100

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Savoy Blue to Brass Buttons — https://swatchly.xyz/palette/4164d3-3a5692-483100-c8d5ff-bd9400-e1ab43 */
:root {
  --savoy-blue: #4164d3;
  --glimpse-of-void: #3a5692;
  --moelleux-au-chocolat: #483100;
  --icy-plains: #c8d5ff;
  --moutarde-de-b-nichon: #bd9400;
  --brass-buttons: #e1ab43;
}

Tailwind CSS v4

/* Savoy Blue to Brass Buttons — https://swatchly.xyz/palette/4164d3-3a5692-483100-c8d5ff-bd9400-e1ab43 */
@theme {
  --color-savoy-blue: #4164d3;
  --color-savoy-blue-50: #f1f5ff;
  --color-savoy-blue-100: #e3ecff;
  --color-savoy-blue-200: #c8d8ff;
  --color-savoy-blue-300: #a8c1ff;
  --color-savoy-blue-400: #7a9fff;
  --color-savoy-blue-500: #5980f1;
  --color-savoy-blue-600: #4164d3;
  --color-savoy-blue-700: #2f4db1;
  --color-savoy-blue-800: #213992;
  --color-savoy-blue-900: #172a76;
  --color-savoy-blue-950: #0b194f;
  --color-glimpse-of-void: #3a5692;
  --color-glimpse-of-void-50: #f0f5ff;
  --color-glimpse-of-void-100: #e2ecff;
  --color-glimpse-of-void-200: #c5d9ff;
  --color-glimpse-of-void-300: #a5c2fc;
  --color-glimpse-of-void-400: #84a3e2;
  --color-glimpse-of-void-500: #6887c7;
  --color-glimpse-of-void-600: #506daa;
  --color-glimpse-of-void-700: #3a5692;
  --color-glimpse-of-void-800: #2c4374;
  --color-glimpse-of-void-900: #20335d;
  --color-glimpse-of-void-950: #111f3d;
  --color-moelleux-au-chocolat: #483100;
  --color-moelleux-au-chocolat-50: #fff4e1;
  --color-moelleux-au-chocolat-100: #fae9cc;
  --color-moelleux-au-chocolat-200: #e9d5b2;
  --color-moelleux-au-chocolat-300: #d5bd96;
  --color-moelleux-au-chocolat-400: #b89e73;
  --color-moelleux-au-chocolat-500: #9d8357;
  --color-moelleux-au-chocolat-600: #82693e;
  --color-moelleux-au-chocolat-700: #6a532b;
  --color-moelleux-au-chocolat-800: #55411d;
  --color-moelleux-au-chocolat-900: #483100;
  --color-moelleux-au-chocolat-950: #2c1f08;
  --color-icy-plains: #c8d5ff;
  --color-icy-plains-50: #f1f4ff;
  --color-icy-plains-100: #e3eaff;
  --color-icy-plains-200: #c8d5ff;
  --color-icy-plains-300: #b4bfe2;
  --color-icy-plains-400: #949fc6;
  --color-icy-plains-500: #7984aa;
  --color-icy-plains-600: #5f6a8e;
  --color-icy-plains-700: #4a5374;
  --color-icy-plains-800: #39415d;
  --color-icy-plains-900: #2b314a;
  --color-icy-plains-950: #191e30;
  --color-moutarde-de-b-nichon: #bd9400;
  --color-moutarde-de-b-nichon-50: #fff2d0;
  --color-moutarde-de-b-nichon-100: #ffe5a3;
  --color-moutarde-de-b-nichon-200: #efcf7d;
  --color-moutarde-de-b-nichon-300: #dbb654;
  --color-moutarde-de-b-nichon-400: #bd9400;
  --color-moutarde-de-b-nichon-500: #9e7b00;
  --color-moutarde-de-b-nichon-600: #806300;
  --color-moutarde-de-b-nichon-700: #664e00;
  --color-moutarde-de-b-nichon-800: #513d00;
  --color-moutarde-de-b-nichon-900: #3f2f00;
  --color-moutarde-de-b-nichon-950: #291e00;
  --color-brass-buttons: #e1ab43;
  --color-brass-buttons-50: #ffecce;
  --color-brass-buttons-100: #ffdea6;
  --color-brass-buttons-200: #f2c67a;
  --color-brass-buttons-300: #e1ab43;
  --color-brass-buttons-400: #c18e21;
  --color-brass-buttons-500: #a47500;
  --color-brass-buttons-600: #855f00;
  --color-brass-buttons-700: #6b4b00;
  --color-brass-buttons-800: #563b00;
  --color-brass-buttons-900: #442e00;
  --color-brass-buttons-950: #2b1c00;
}

Similar palettes