Gunmetal to Muted Berry Color Palette

About this palette

Gunmetal to Muted Berry is a 5-color muted palette: #4F606D (Gunmetal), #50412A (Turtle), #D5E4F4 (New Heights), #9FC0AF (Meadow Morn), #8F7482 (Muted Berry). It mixes gray, brown, green, red tones and feels warm overall. The strongest text pairing is #50412A on #D5E4F4 with a contrast ratio of 7.62:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gunmetal	rgb(79, 96, 109)	hsl(206, 16%, 37%)
Turtle	rgb(80, 65, 42)	hsl(36, 31%, 24%)
New Heights	rgb(213, 228, 244)	hsl(211, 58%, 90%)
Meadow Morn	rgb(159, 192, 175)	hsl(149, 21%, 69%)
Muted Berry	rgb(143, 116, 130)	hsl(329, 11%, 51%)

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.62:1 Very good#50412A on #D5E4F4
Aa7.62:1 Very good#D5E4F4 on #50412A
Aa5.03:1 Good#4F606D on #D5E4F4
Aa5.03:1 Good#D5E4F4 on #4F606D
Aa4.99:1 Good#50412A on #9FC0AF
Aa4.99:1 Good#9FC0AF on #50412A
Aa3.30:1 Poor#4F606D on #9FC0AF
Aa3.30:1 Poor#9FC0AF on #4F606D

Color blindness preview

CSS variables

/* Gunmetal to Muted Berry — https://swatchly.xyz/palette/4f606d-50412a-d5e4f4-9fc0af-8f7482 */
:root {
  --gunmetal: #4f606d;
  --turtle: #50412a;
  --new-heights: #d5e4f4;
  --meadow-morn: #9fc0af;
  --muted-berry: #8f7482;
}

Tailwind CSS v4

/* Gunmetal to Muted Berry — https://swatchly.xyz/palette/4f606d-50412a-d5e4f4-9fc0af-8f7482 */
@theme {
  --color-gunmetal: #4f606d;
  --color-gunmetal-50: #ecf7ff;
  --color-gunmetal-100: #e1edf7;
  --color-gunmetal-200: #cddbe6;
  --color-gunmetal-300: #b7c7d3;
  --color-gunmetal-400: #97a9b6;
  --color-gunmetal-500: #7d8f9d;
  --color-gunmetal-600: #647683;
  --color-gunmetal-700: #4f606d;
  --color-gunmetal-800: #3d4b56;
  --color-gunmetal-900: #2d3a43;
  --color-gunmetal-950: #1b242b;
  --color-turtle: #50412a;
  --color-turtle-50: #fef4e5;
  --color-turtle-100: #f5e9d9;
  --color-turtle-200: #e3d5c2;
  --color-turtle-300: #cebfa8;
  --color-turtle-400: #b09f87;
  --color-turtle-500: #95846b;
  --color-turtle-600: #7a6a52;
  --color-turtle-700: #62543e;
  --color-turtle-800: #50412a;
  --color-turtle-900: #3d3222;
  --color-turtle-950: #261f13;
  --color-new-heights: #d5e4f4;
  --color-new-heights-50: #e6eff8;
  --color-new-heights-100: #d5e4f4;
  --color-new-heights-200: #c6d1de;
  --color-new-heights-300: #b0bdca;
  --color-new-heights-400: #919fad;
  --color-new-heights-500: #778594;
  --color-new-heights-600: #5f6c7a;
  --color-new-heights-700: #4b5763;
  --color-new-heights-800: #39444e;
  --color-new-heights-900: #2b343d;
  --color-new-heights-950: #1a2026;
  --color-meadow-morn: #9fc0af;
  --color-meadow-morn-50: #e2f6eb;
  --color-meadow-morn-100: #d4ebdf;
  --color-meadow-morn-200: #bcd6c9;
  --color-meadow-morn-300: #9fc0af;
  --color-meadow-morn-400: #83a292;
  --color-meadow-morn-500: #698878;
  --color-meadow-morn-600: #516f60;
  --color-meadow-morn-700: #3e594c;
  --color-meadow-morn-800: #2f473b;
  --color-meadow-morn-900: #24382e;
  --color-meadow-morn-950: #14231c;
  --color-muted-berry: #8f7482;
  --color-muted-berry-50: #ffeef6;
  --color-muted-berry-100: #f5e1eb;
  --color-muted-berry-200: #e2cbd7;
  --color-muted-berry-300: #ccb2bf;
  --color-muted-berry-400: #ac919f;
  --color-muted-berry-500: #8f7482;
  --color-muted-berry-600: #755c69;
  --color-muted-berry-700: #5e4854;
  --color-muted-berry-800: #4b3842;
  --color-muted-berry-900: #3b2b33;
  --color-muted-berry-950: #261a20;
}