Banana Frappé to Robotic Gods Color Palette

About this palette

Banana Frappé to Robotic Gods is a 4-color muted palette: #DBD7B4 (Banana Frappé), #414132 (Deepest Nightmare), #6A6D85 (Dark Prince), #9D9EBC (Robotic Gods). It mixes yellow, gray, purple tones and feels cool overall. The strongest text pairing is #DBD7B4 on #414132 with a contrast ratio of 7.10:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Banana Frappé	rgb(219, 215, 180)	hsl(54, 35%, 78%)
Deepest Nightmare	rgb(65, 65, 50)	hsl(60, 13%, 23%)
Dark Prince	rgb(106, 109, 133)	hsl(233, 11%, 47%)
Robotic Gods	rgb(157, 158, 188)	hsl(238, 19%, 68%)

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.10:1 Very good#DBD7B4 on #414132
Aa7.10:1 Very good#414132 on #DBD7B4
Aa3.97:1 Poor#414132 on #9D9EBC
Aa3.97:1 Poor#9D9EBC on #414132
Aa3.48:1 Poor#DBD7B4 on #6A6D85
Aa3.48:1 Poor#6A6D85 on #DBD7B4

Color blindness preview

CSS variables

/* Banana Frappé to Robotic Gods — https://swatchly.xyz/palette/dbd7b4-414132-6a6d85-9d9ebc */
:root {
  --banana-frapp: #dbd7b4;
  --deepest-nightmare: #414132;
  --dark-prince: #6a6d85;
  --robotic-gods: #9d9ebc;
}

Tailwind CSS v4

/* Banana Frappé to Robotic Gods — https://swatchly.xyz/palette/dbd7b4-414132-6a6d85-9d9ebc */
@theme {
  --color-banana-frapp: #dbd7b4;
  --color-banana-frapp-50: #f7f5e1;
  --color-banana-frapp-100: #edead4;
  --color-banana-frapp-200: #dbd7b4;
  --color-banana-frapp-300: #c4c1a3;
  --color-banana-frapp-400: #a5a281;
  --color-banana-frapp-500: #8a8766;
  --color-banana-frapp-600: #706c4d;
  --color-banana-frapp-700: #5a563a;
  --color-banana-frapp-800: #46432a;
  --color-banana-frapp-900: #36341f;
  --color-banana-frapp-950: #222011;
  --color-deepest-nightmare: #414132;
  --color-deepest-nightmare-50: #f6f6ec;
  --color-deepest-nightmare-100: #ecece1;
  --color-deepest-nightmare-200: #d8d9cb;
  --color-deepest-nightmare-300: #c1c2b2;
  --color-deepest-nightmare-400: #a2a291;
  --color-deepest-nightmare-500: #868675;
  --color-deepest-nightmare-600: #6b6b5b;
  --color-deepest-nightmare-700: #545446;
  --color-deepest-nightmare-800: #414132;
  --color-deepest-nightmare-900: #323227;
  --color-deepest-nightmare-950: #1e1e17;
  --color-dark-prince: #6a6d85;
  --color-dark-prince-50: #f3f4ff;
  --color-dark-prince-100: #e8ebfc;
  --color-dark-prince-200: #d4d7eb;
  --color-dark-prince-300: #bec1d8;
  --color-dark-prince-400: #9fa2ba;
  --color-dark-prince-500: #8487a0;
  --color-dark-prince-600: #6a6d85;
  --color-dark-prince-700: #53566c;
  --color-dark-prince-800: #404355;
  --color-dark-prince-900: #313343;
  --color-dark-prince-950: #1e1f2b;
  --color-robotic-gods: #9d9ebc;
  --color-robotic-gods-50: #f3f4ff;
  --color-robotic-gods-100: #e8e9fd;
  --color-robotic-gods-200: #d4d5ec;
  --color-robotic-gods-300: #bdbed8;
  --color-robotic-gods-400: #9d9ebc;
  --color-robotic-gods-500: #8283a0;
  --color-robotic-gods-600: #686984;
  --color-robotic-gods-700: #52526b;
  --color-robotic-gods-800: #3f4055;
  --color-robotic-gods-900: #303143;
  --color-robotic-gods-950: #1e1e2b;
}