Start generating

Melanzane to Cosmic Latte color palette

33262FMelanzane3E5A44Plantation608C67KashmirA6967DSaddle UpBFCAECFrost FairyFFF8E9Cosmic Latte
Open in generator Export PNG, PDF, ASE…

About this palette

Melanzane to Cosmic Latte is a 6-color muted palette: #33262F (Melanzane), #3E5A44 (Plantation), #608C67 (Kashmir), #A6967D (Saddle Up), #BFCAEC (Frost Fairy), #FFF8E9 (Cosmic Latte). It mixes gray, green, yellow, blue, white tones and feels cool overall. The strongest text pairing is #33262F on #FFF8E9 with a contrast ratio of 13.61:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Melanzanergb(51, 38, 47)hsl(318, 15%, 17%)
Plantationrgb(62, 90, 68)hsl(133, 18%, 30%)
Kashmirrgb(96, 140, 103)hsl(130, 19%, 46%)
Saddle Uprgb(166, 150, 125)hsl(37, 19%, 57%)
Frost Fairyrgb(191, 202, 236)hsl(225, 54%, 84%)
Cosmic Lattergb(255, 248, 233)hsl(41, 100%, 96%)

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.

  • Aa13.61:1 Super#33262F on #FFF8E9
  • Aa13.61:1 Super#FFF8E9 on #33262F
  • Aa8.82:1 Very good#33262F on #BFCAEC
  • Aa8.82:1 Very good#BFCAEC on #33262F
  • Aa7.22:1 Very good#3E5A44 on #FFF8E9
  • Aa7.22:1 Very good#FFF8E9 on #3E5A44
  • Aa4.99:1 Good#33262F on #A6967D
  • Aa4.99:1 Good#A6967D on #33262F

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Melanzane to Cosmic Latte — https://swatchly.xyz/palette/33262f-3e5a44-608c67-a6967d-bfcaec-fff8e9 */
:root {
  --melanzane: #33262f;
  --plantation: #3e5a44;
  --kashmir: #608c67;
  --saddle-up: #a6967d;
  --frost-fairy: #bfcaec;
  --cosmic-latte: #fff8e9;
}

Tailwind CSS v4

/* Melanzane to Cosmic Latte — https://swatchly.xyz/palette/33262f-3e5a44-608c67-a6967d-bfcaec-fff8e9 */
@theme {
  --color-melanzane: #33262f;
  --color-melanzane-50: #fcf2f8;
  --color-melanzane-100: #f2e7ef;
  --color-melanzane-200: #e0d3dc;
  --color-melanzane-300: #cbbcc6;
  --color-melanzane-400: #aa9aa5;
  --color-melanzane-500: #8d7d88;
  --color-melanzane-600: #71626c;
  --color-melanzane-700: #584b54;
  --color-melanzane-800: #42373f;
  --color-melanzane-900: #33262f;
  --color-melanzane-950: #1d171b;
  --color-plantation: #3e5a44;
  --color-plantation-50: #e9fbec;
  --color-plantation-100: #ddf1e1;
  --color-plantation-200: #c6decb;
  --color-plantation-300: #adc8b2;
  --color-plantation-400: #8ba991;
  --color-plantation-500: #6f8d75;
  --color-plantation-600: #55715b;
  --color-plantation-700: #3e5a44;
  --color-plantation-800: #304635;
  --color-plantation-900: #233627;
  --color-plantation-950: #142217;
  --color-kashmir: #608c67;
  --color-kashmir-50: #e2fce5;
  --color-kashmir-100: #d4f2d8;
  --color-kashmir-200: #bbdfc0;
  --color-kashmir-300: #a0c8a6;
  --color-kashmir-400: #7da983;
  --color-kashmir-500: #608c67;
  --color-kashmir-600: #48724f;
  --color-kashmir-700: #355b3c;
  --color-kashmir-800: #27482d;
  --color-kashmir-900: #1c3821;
  --color-kashmir-950: #0f2413;
  --color-saddle-up: #a6967d;
  --color-saddle-up-50: #faf0e1;
  --color-saddle-up-100: #f0e5d3;
  --color-saddle-up-200: #dccfbb;
  --color-saddle-up-300: #c6b7a0;
  --color-saddle-up-400: #a6967d;
  --color-saddle-up-500: #8c7c64;
  --color-saddle-up-600: #72644d;
  --color-saddle-up-700: #5c4f3a;
  --color-saddle-up-800: #493e2c;
  --color-saddle-up-900: #3a3020;
  --color-saddle-up-950: #251e13;
  --color-frost-fairy: #bfcaec;
  --color-frost-fairy-50: #f9faff;
  --color-frost-fairy-100: #edf2ff;
  --color-frost-fairy-200: #d8dff7;
  --color-frost-fairy-300: #bfcaec;
  --color-frost-fairy-400: #9fa9c8;
  --color-frost-fairy-500: #818bab;
  --color-frost-fairy-600: #666f8d;
  --color-frost-fairy-700: #4f5772;
  --color-frost-fairy-800: #3b435a;
  --color-frost-fairy-900: #2c3246;
  --color-frost-fairy-950: #1a1f2d;
  --color-cosmic-latte: #fff8e9;
  --color-cosmic-latte-50: #fff8e9;
  --color-cosmic-latte-100: #f2eee5;
  --color-cosmic-latte-200: #ded9cf;
  --color-cosmic-latte-300: #c8c2b6;
  --color-cosmic-latte-400: #a8a295;
  --color-cosmic-latte-500: #8c8679;
  --color-cosmic-latte-600: #716b5e;
  --color-cosmic-latte-700: #5a5549;
  --color-cosmic-latte-800: #474238;
  --color-cosmic-latte-900: #36322a;
  --color-cosmic-latte-950: #221f19;
}

Similar palettes