Roman Silver to Hint of Mint color palette

7B8A9CRoman Silver 1C2635Moonless Mystery D7A8AEStrawberry Latte 45553FBroccoli Green DFEED2Hint of Mint

Open in generator Export PNG, PDF, ASE…

About this palette

Roman Silver to Hint of Mint is a 5-color muted palette: #7B8A9C (Roman Silver), #1C2635 (Moonless Mystery), #D7A8AE (Strawberry Latte), #45553F (Broccoli Green), #DFEED2 (Hint of Mint). It mixes gray, red, green tones and feels cool overall. The strongest text pairing is #1C2635 on #DFEED2 with a contrast ratio of 12.55:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Roman Silver	rgb(123, 138, 156)	hsl(213, 14%, 55%)
Moonless Mystery	rgb(28, 38, 53)	hsl(216, 31%, 16%)
Strawberry Latte	rgb(215, 168, 174)	hsl(352, 37%, 75%)
Broccoli Green	rgb(69, 85, 63)	hsl(104, 15%, 29%)
Hint of Mint	rgb(223, 238, 210)	hsl(92, 45%, 88%)

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.

Aa12.55:1 Super#1C2635 on #DFEED2
Aa12.55:1 Super#DFEED2 on #1C2635
Aa7.33:1 Very good#1C2635 on #D7A8AE
Aa7.33:1 Very good#D7A8AE on #1C2635
Aa6.59:1 Good#45553F on #DFEED2
Aa6.59:1 Good#DFEED2 on #45553F
Aa4.32:1 Poor#7B8A9C on #1C2635
Aa4.32:1 Poor#1C2635 on #7B8A9C

Color blindness preview

CSS variables

/* Roman Silver to Hint of Mint — https://swatchly.xyz/palette/7b8a9c-1c2635-d7a8ae-45553f-dfeed2 */
:root {
  --roman-silver: #7b8a9c;
  --moonless-mystery: #1c2635;
  --strawberry-latte: #d7a8ae;
  --broccoli-green: #45553f;
  --hint-of-mint: #dfeed2;
}

Tailwind CSS v4

/* Roman Silver to Hint of Mint — https://swatchly.xyz/palette/7b8a9c-1c2635-d7a8ae-45553f-dfeed2 */
@theme {
  --color-roman-silver: #7b8a9c;
  --color-roman-silver-50: #eff6ff;
  --color-roman-silver-100: #e3edf9;
  --color-roman-silver-200: #cedae8;
  --color-roman-silver-300: #b6c4d4;
  --color-roman-silver-400: #96a5b7;
  --color-roman-silver-500: #7b8a9c;
  --color-roman-silver-600: #616f80;
  --color-roman-silver-700: #4b5867;
  --color-roman-silver-800: #394452;
  --color-roman-silver-900: #2b3440;
  --color-roman-silver-950: #192028;
  --color-moonless-mystery: #1c2635;
  --color-moonless-mystery-50: #eff6ff;
  --color-moonless-mystery-100: #e3ecf9;
  --color-moonless-mystery-200: #ced8e7;
  --color-moonless-mystery-300: #b6c2d3;
  --color-moonless-mystery-400: #96a2b5;
  --color-moonless-mystery-500: #7c889b;
  --color-moonless-mystery-600: #636f81;
  --color-moonless-mystery-700: #4f5a6a;
  --color-moonless-mystery-800: #3e4856;
  --color-moonless-mystery-900: #313945;
  --color-moonless-mystery-950: #1c2635;
  --color-strawberry-latte: #d7a8ae;
  --color-strawberry-latte-50: #ffe9ec;
  --color-strawberry-latte-100: #fbdade;
  --color-strawberry-latte-200: #e9c3c8;
  --color-strawberry-latte-300: #d7a8ae;
  --color-strawberry-latte-400: #b88b91;
  --color-strawberry-latte-500: #9e7278;
  --color-strawberry-latte-600: #835a60;
  --color-strawberry-latte-700: #6b464c;
  --color-strawberry-latte-800: #57363b;
  --color-strawberry-latte-900: #452a2e;
  --color-strawberry-latte-950: #2c191c;
  --color-broccoli-green: #45553f;
  --color-broccoli-green-50: #eef9ea;
  --color-broccoli-green-100: #e3efdf;
  --color-broccoli-green-200: #cddbc8;
  --color-broccoli-green-300: #b4c4ae;
  --color-broccoli-green-400: #93a48d;
  --color-broccoli-green-500: #778870;
  --color-broccoli-green-600: #5c6c56;
  --color-broccoli-green-700: #45553f;
  --color-broccoli-green-800: #364231;
  --color-broccoli-green-900: #283324;
  --color-broccoli-green-950: #181f15;
  --color-hint-of-mint: #dfeed2;
  --color-hint-of-mint-50: #edf6e6;
  --color-hint-of-mint-100: #dfeed2;
  --color-hint-of-mint-200: #ced9c5;
  --color-hint-of-mint-300: #b7c4ad;
  --color-hint-of-mint-400: #98a58c;
  --color-hint-of-mint-500: #7d8a71;
  --color-hint-of-mint-600: #647058;
  --color-hint-of-mint-700: #4e5a44;
  --color-hint-of-mint-800: #3c4633;
  --color-hint-of-mint-900: #2e3626;
  --color-hint-of-mint-950: #1c2216;
}