Peanut Butter to Negroni Color Palette

About this palette

Peanut Butter to Negroni is a 4-color vintage palette: #C28641 (Peanut Butter), #425D7D (Sailor), #152336 (Dark), #EBC8A7 (Negroni). It mixes orange, blue tones and feels balanced overall. The strongest text pairing is #152336 on #EBC8A7 with a contrast ratio of 10.07:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Peanut Butter	rgb(194, 134, 65)	hsl(32, 51%, 51%)
Sailor	rgb(66, 93, 125)	hsl(213, 31%, 37%)
Dark	rgb(21, 35, 54)	hsl(215, 44%, 15%)
Negroni	rgb(235, 200, 167)	hsl(29, 63%, 79%)

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.

Aa10.07:1 Very good#152336 on #EBC8A7
Aa10.07:1 Very good#EBC8A7 on #152336
Aa5.11:1 Good#C28641 on #152336
Aa5.11:1 Good#152336 on #C28641
Aa4.32:1 Poor#425D7D on #EBC8A7
Aa4.32:1 Poor#EBC8A7 on #425D7D

Color blindness preview

CSS variables

/* Peanut Butter to Negroni — https://swatchly.xyz/palette/c28641-425d7d-152336-ebc8a7 */
:root {
  --peanut-butter: #c28641;
  --sailor: #425d7d;
  --dark: #152336;
  --negroni: #ebc8a7;
}

Tailwind CSS v4

/* Peanut Butter to Negroni — https://swatchly.xyz/palette/c28641-425d7d-152336-ebc8a7 */
@theme {
  --color-peanut-butter: #c28641;
  --color-peanut-butter-50: #ffeddb;
  --color-peanut-butter-100: #ffdebc;
  --color-peanut-butter-200: #f6c48f;
  --color-peanut-butter-300: #e1a96d;
  --color-peanut-butter-400: #c28641;
  --color-peanut-butter-500: #a76d25;
  --color-peanut-butter-600: #8c5504;
  --color-peanut-butter-700: #714300;
  --color-peanut-butter-800: #5a3500;
  --color-peanut-butter-900: #482900;
  --color-peanut-butter-950: #301900;
  --color-sailor: #425d7d;
  --color-sailor-50: #eef6ff;
  --color-sailor-100: #deedff;
  --color-sailor-200: #c4dbf6;
  --color-sailor-300: #acc6e5;
  --color-sailor-400: #8ba7c9;
  --color-sailor-500: #708daf;
  --color-sailor-600: #577394;
  --color-sailor-700: #425d7d;
  --color-sailor-800: #324963;
  --color-sailor-900: #25384e;
  --color-sailor-950: #152333;
  --color-dark: #152336;
  --color-dark-50: #eff6ff;
  --color-dark-100: #e0ecfd;
  --color-dark-200: #cbd9ec;
  --color-dark-300: #b3c2d8;
  --color-dark-400: #92a3ba;
  --color-dark-500: #7788a0;
  --color-dark-600: #5e6e85;
  --color-dark-700: #49586d;
  --color-dark-800: #394658;
  --color-dark-900: #2b3646;
  --color-dark-950: #152336;
  --color-negroni: #ebc8a7;
  --color-negroni-50: #ffecda;
  --color-negroni-100: #f7dfc9;
  --color-negroni-200: #ebc8a7;
  --color-negroni-300: #d2b497;
  --color-negroni-400: #b69577;
  --color-negroni-500: #9b7b5d;
  --color-negroni-600: #816345;
  --color-negroni-700: #694e33;
  --color-negroni-800: #553d25;
  --color-negroni-900: #422e1a;
  --color-negroni-950: #2a1c0d;
}