Graphite to Frappé color palette

3B391FGraphite 6F81A1English Manor 546484Admiral Blue E3C8BATapioca 4E4E3FKelp CAAB99Frappé

About this palette

Graphite to Frappé is a 6-color muted, vintage palette: #3B391F (Graphite), #6F81A1 (English Manor), #546484 (Admiral Blue), #E3C8BA (Tapioca), #4E4E3F (Kelp), #CAAB99 (Frappé). It mixes brown, blue, orange, gray tones and feels warm overall. The strongest text pairing is #3B391F on #E3C8BA with a contrast ratio of 7.39:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Graphite	rgb(59, 57, 31)	hsl(56, 31%, 18%)
English Manor	rgb(111, 129, 161)	hsl(218, 21%, 53%)
Admiral Blue	rgb(84, 100, 132)	hsl(220, 22%, 42%)
Tapioca	rgb(227, 200, 186)	hsl(20, 42%, 81%)
Kelp	rgb(78, 78, 63)	hsl(60, 11%, 28%)
Frappé	rgb(202, 171, 153)	hsl(22, 32%, 70%)

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.39:1 Very good#3B391F on #E3C8BA
Aa7.39:1 Very good#E3C8BA on #3B391F
Aa5.47:1 Good#3B391F on #CAAB99
Aa5.47:1 Good#CAAB99 on #3B391F
Aa5.33:1 Good#E3C8BA on #4E4E3F
Aa5.33:1 Good#4E4E3F on #E3C8BA
Aa3.94:1 Poor#4E4E3F on #CAAB99
Aa3.94:1 Poor#CAAB99 on #4E4E3F

Color blindness preview

CSS variables

/* Graphite to Frappé — https://swatchly.xyz/palette/3b391f-6f81a1-546484-e3c8ba-4e4e3f-caab99 */
:root {
  --graphite: #3b391f;
  --english-manor: #6f81a1;
  --admiral-blue: #546484;
  --tapioca: #e3c8ba;
  --kelp: #4e4e3f;
  --frapp: #caab99;
}

Tailwind CSS v4

/* Graphite to Frappé — https://swatchly.xyz/palette/3b391f-6f81a1-546484-e3c8ba-4e4e3f-caab99 */
@theme {
  --color-graphite: #3b391f;
  --color-graphite-50: #f7f6e5;
  --color-graphite-100: #edecd9;
  --color-graphite-200: #dad9c2;
  --color-graphite-300: #c4c3a9;
  --color-graphite-400: #a6a488;
  --color-graphite-500: #8c8a6d;
  --color-graphite-600: #727055;
  --color-graphite-700: #5c5a41;
  --color-graphite-800: #494831;
  --color-graphite-900: #3b391f;
  --color-graphite-950: #252415;
  --color-english-manor: #6f81a1;
  --color-english-manor-50: #eef4ff;
  --color-english-manor-100: #deeaff;
  --color-english-manor-200: #c6d5f0;
  --color-english-manor-300: #adbedc;
  --color-english-manor-400: #8b9dbd;
  --color-english-manor-500: #6f81a1;
  --color-english-manor-600: #576886;
  --color-english-manor-700: #43526d;
  --color-english-manor-800: #334057;
  --color-english-manor-900: #263145;
  --color-english-manor-950: #171f2d;
  --color-admiral-blue: #546484;
  --color-admiral-blue-50: #f0f5ff;
  --color-admiral-blue-100: #dfeaff;
  --color-admiral-blue-200: #c7d5f1;
  --color-admiral-blue-300: #adbddc;
  --color-admiral-blue-400: #8b9cbe;
  --color-admiral-blue-500: #6f80a1;
  --color-admiral-blue-600: #546484;
  --color-admiral-blue-700: #414f6b;
  --color-admiral-blue-800: #323d55;
  --color-admiral-blue-900: #252f43;
  --color-admiral-blue-950: #161d2b;
  --color-tapioca: #e3c8ba;
  --color-tapioca-50: #fcebe3;
  --color-tapioca-100: #f2dfd6;
  --color-tapioca-200: #e3c8ba;
  --color-tapioca-300: #cbb4a8;
  --color-tapioca-400: #af9689;
  --color-tapioca-500: #957c6f;
  --color-tapioca-600: #7b6357;
  --color-tapioca-700: #644f44;
  --color-tapioca-800: #503e34;
  --color-tapioca-900: #3e2f27;
  --color-tapioca-950: #281c17;
  --color-kelp: #4e4e3f;
  --color-kelp-50: #f6f6ec;
  --color-kelp-100: #ecece1;
  --color-kelp-200: #d7d7ca;
  --color-kelp-300: #bfbfb0;
  --color-kelp-400: #9e9e8e;
  --color-kelp-500: #818171;
  --color-kelp-600: #666656;
  --color-kelp-700: #4e4e3f;
  --color-kelp-800: #3d3d31;
  --color-kelp-900: #2e2e25;
  --color-kelp-950: #1c1c15;
  --color-frapp: #caab99;
  --color-frapp-50: #fde9de;
  --color-frapp-100: #f2dccf;
  --color-frapp-200: #dfc5b6;
  --color-frapp-300: #caab99;
  --color-frapp-400: #ac8f7e;
  --color-frapp-500: #937665;
  --color-frapp-600: #7a5f4f;
  --color-frapp-700: #634b3d;
  --color-frapp-800: #503b2e;
  --color-frapp-900: #412e23;
  --color-frapp-950: #291c14;
}