Start generating

Black Olive to Snowy Summit color palette

33403ABlack Olive4B6059Still Waters Run Deep836B55Pastel Brown7F8898Sea LionC9B1C2Monet MagicC6D8EESnowy Summit
Open in generator Export PNG, PDF, ASE…

About this palette

Black Olive to Snowy Summit is a 6-color muted, gradient palette: #33403A (Black Olive), #4B6059 (Still Waters Run Deep), #836B55 (Pastel Brown), #7F8898 (Sea Lion), #C9B1C2 (Monet Magic), #C6D8EE (Snowy Summit). It mixes gray, brown, pink, blue tones and feels warm overall. The strongest text pairing is #33403A on #C6D8EE with a contrast ratio of 7.47:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Black Olivergb(51, 64, 58)hsl(152, 11%, 23%)
Still Waters Run Deeprgb(75, 96, 89)hsl(160, 12%, 34%)
Pastel Brownrgb(131, 107, 85)hsl(29, 21%, 42%)
Sea Lionrgb(127, 136, 152)hsl(218, 11%, 55%)
Monet Magicrgb(201, 177, 194)hsl(318, 18%, 74%)
Snowy Summitrgb(198, 216, 238)hsl(213, 54%, 85%)

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.47:1 Very good#33403A on #C6D8EE
  • Aa7.47:1 Very good#C6D8EE on #33403A
  • Aa5.45:1 Good#33403A on #C9B1C2
  • Aa5.45:1 Good#C9B1C2 on #33403A
  • Aa4.64:1 Good#4B6059 on #C6D8EE
  • Aa4.64:1 Good#C6D8EE on #4B6059
  • Aa3.44:1 Poor#836B55 on #C6D8EE
  • Aa3.44:1 Poor#C6D8EE on #836B55

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Black Olive to Snowy Summit — https://swatchly.xyz/palette/33403a-4b6059-836b55-7f8898-c9b1c2-c6d8ee */
:root {
  --black-olive: #33403a;
  --still-waters-run-deep: #4b6059;
  --pastel-brown: #836b55;
  --sea-lion: #7f8898;
  --monet-magic: #c9b1c2;
  --snowy-summit: #c6d8ee;
}

Tailwind CSS v4

/* Black Olive to Snowy Summit — https://swatchly.xyz/palette/33403a-4b6059-836b55-7f8898-c9b1c2-c6d8ee */
@theme {
  --color-black-olive: #33403a;
  --color-black-olive-50: #eff8f3;
  --color-black-olive-100: #e4eee9;
  --color-black-olive-200: #cfdbd5;
  --color-black-olive-300: #b6c3bd;
  --color-black-olive-400: #95a39c;
  --color-black-olive-500: #788780;
  --color-black-olive-600: #5e6b65;
  --color-black-olive-700: #47534e;
  --color-black-olive-800: #33403a;
  --color-black-olive-900: #28312c;
  --color-black-olive-950: #171d1b;
  --color-still-waters-run-deep: #4b6059;
  --color-still-waters-run-deep-50: #ebf9f4;
  --color-still-waters-run-deep-100: #e0efea;
  --color-still-waters-run-deep-200: #ccddd7;
  --color-still-waters-run-deep-300: #b4c8c1;
  --color-still-waters-run-deep-400: #94aaa3;
  --color-still-waters-run-deep-500: #7a9088;
  --color-still-waters-run-deep-600: #61766f;
  --color-still-waters-run-deep-700: #4b6059;
  --color-still-waters-run-deep-800: #3a4b45;
  --color-still-waters-run-deep-900: #2b3a35;
  --color-still-waters-run-deep-950: #192421;
  --color-pastel-brown: #836b55;
  --color-pastel-brown-50: #fff3e8;
  --color-pastel-brown-100: #fae9da;
  --color-pastel-brown-200: #e9d5c3;
  --color-pastel-brown-300: #d5bfab;
  --color-pastel-brown-400: #b8a089;
  --color-pastel-brown-500: #9e856e;
  --color-pastel-brown-600: #836b55;
  --color-pastel-brown-700: #6a5440;
  --color-pastel-brown-800: #54412f;
  --color-pastel-brown-900: #413122;
  --color-pastel-brown-950: #291e13;
  --color-sea-lion: #7f8898;
  --color-sea-lion-50: #f0f6ff;
  --color-sea-lion-100: #e6ecf7;
  --color-sea-lion-200: #d1d9e5;
  --color-sea-lion-300: #bac2d1;
  --color-sea-lion-400: #9aa3b3;
  --color-sea-lion-500: #7f8898;
  --color-sea-lion-600: #656d7c;
  --color-sea-lion-700: #4f5664;
  --color-sea-lion-800: #3d434f;
  --color-sea-lion-900: #2e333d;
  --color-sea-lion-950: #1c2027;
  --color-monet-magic: #c9b1c2;
  --color-monet-magic-50: #fbecf6;
  --color-monet-magic-100: #f1e0ec;
  --color-monet-magic-200: #decad8;
  --color-monet-magic-300: #c9b1c2;
  --color-monet-magic-400: #aa94a4;
  --color-monet-magic-500: #907a8a;
  --color-monet-magic-600: #766170;
  --color-monet-magic-700: #5f4c5a;
  --color-monet-magic-800: #4c3b47;
  --color-monet-magic-900: #3c2e38;
  --color-monet-magic-950: #261c23;
  --color-snowy-summit: #c6d8ee;
  --color-snowy-summit-50: #edf5ff;
  --color-snowy-summit-100: #e0ebf9;
  --color-snowy-summit-200: #c6d8ee;
  --color-snowy-summit-300: #b2c1d4;
  --color-snowy-summit-400: #92a2b6;
  --color-snowy-summit-500: #77879b;
  --color-snowy-summit-600: #5d6d80;
  --color-snowy-summit-700: #485668;
  --color-snowy-summit-800: #374352;
  --color-snowy-summit-900: #293440;
  --color-snowy-summit-950: #182029;
}

Similar palettes