Bruised Plum to Caramel Finish color palette

39181EBruised Plum 4B3800Pineapple 974700Brownie EA294CChe Guevara Red EC9164Warm Welcome FFD294Caramel Finish

Open in generator Export PNG, PDF, ASE…

About this palette

Bruised Plum to Caramel Finish is a 6-color warm, earthy, gradient palette: #39181E (Bruised Plum), #4B3800 (Pineapple), #974700 (Brownie), #EA294C (Che Guevara Red), #EC9164 (Warm Welcome), #FFD294 (Caramel Finish). It mixes brown, red, orange tones and feels warm overall. The strongest text pairing is #39181E on #FFD294 with a contrast ratio of 11.26:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bruised Plum	rgb(57, 24, 30)	hsl(349, 41%, 16%)
Pineapple	rgb(75, 56, 0)	hsl(45, 100%, 15%)
Brownie	rgb(151, 71, 0)	hsl(28, 100%, 30%)
Che Guevara Red	rgb(234, 41, 76)	hsl(349, 82%, 54%)
Warm Welcome	rgb(236, 145, 100)	hsl(20, 78%, 66%)
Caramel Finish	rgb(255, 210, 148)	hsl(35, 100%, 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.

Aa11.26:1 Very good#39181E on #FFD294
Aa11.26:1 Very good#FFD294 on #39181E
Aa7.99:1 Very good#4B3800 on #FFD294
Aa7.99:1 Very good#FFD294 on #4B3800
Aa6.65:1 Good#39181E on #EC9164
Aa6.65:1 Good#EC9164 on #39181E
Aa4.72:1 Good#4B3800 on #EC9164
Aa4.72:1 Good#EC9164 on #4B3800

Color blindness preview

CSS variables

/* Bruised Plum to Caramel Finish — https://swatchly.xyz/palette/39181e-4b3800-974700-ea294c-ec9164-ffd294 */
:root {
  --bruised-plum: #39181e;
  --pineapple: #4b3800;
  --brownie: #974700;
  --che-guevara-red: #ea294c;
  --warm-welcome: #ec9164;
  --caramel-finish: #ffd294;
}

Tailwind CSS v4

/* Bruised Plum to Caramel Finish — https://swatchly.xyz/palette/39181e-4b3800-974700-ea294c-ec9164-ffd294 */
@theme {
  --color-bruised-plum: #39181e;
  --color-bruised-plum-50: #fff1f3;
  --color-bruised-plum-100: #ffe3e6;
  --color-bruised-plum-200: #f0cdd1;
  --color-bruised-plum-300: #dcb6ba;
  --color-bruised-plum-400: #bf959a;
  --color-bruised-plum-500: #a47a80;
  --color-bruised-plum-600: #896167;
  --color-bruised-plum-700: #714d52;
  --color-bruised-plum-800: #5b3c40;
  --color-bruised-plum-900: #492e32;
  --color-bruised-plum-950: #39181e;
  --color-pineapple: #4b3800;
  --color-pineapple-50: #fff4dc;
  --color-pineapple-100: #f8eaca;
  --color-pineapple-200: #e7d6b0;
  --color-pineapple-300: #d0be92;
  --color-pineapple-400: #b19c6c;
  --color-pineapple-500: #94804e;
  --color-pineapple-600: #786435;
  --color-pineapple-700: #5e4d21;
  --color-pineapple-800: #4b3800;
  --color-pineapple-900: #382b0b;
  --color-pineapple-950: #221a04;
  --color-brownie: #974700;
  --color-brownie-50: #fff2eb;
  --color-brownie-100: #ffe3d2;
  --color-brownie-200: #ffc5a3;
  --color-brownie-300: #f4a677;
  --color-brownie-400: #d6824d;
  --color-brownie-500: #b7642b;
  --color-brownie-600: #974700;
  --color-brownie-700: #793700;
  --color-brownie-800: #602a00;
  --color-brownie-900: #4b2000;
  --color-brownie-950: #311200;
  --color-che-guevara-red: #ea294c;
  --color-che-guevara-red-50: #fff1f0;
  --color-che-guevara-red-100: #ffe2e2;
  --color-che-guevara-red-200: #ffc5c5;
  --color-che-guevara-red-300: #ffa0a2;
  --color-che-guevara-red-400: #ff616f;
  --color-che-guevara-red-500: #ea294c;
  --color-che-guevara-red-600: #c50037;
  --color-che-guevara-red-700: #9e002a;
  --color-che-guevara-red-800: #7d0020;
  --color-che-guevara-red-900: #630017;
  --color-che-guevara-red-950: #41000c;
  --color-warm-welcome: #ec9164;
  --color-warm-welcome-50: #fff7f3;
  --color-warm-welcome-100: #ffece3;
  --color-warm-welcome-200: #ffd4c0;
  --color-warm-welcome-300: #ffb693;
  --color-warm-welcome-400: #ec9164;
  --color-warm-welcome-500: #cb7448;
  --color-warm-welcome-600: #ab572a;
  --color-warm-welcome-700: #8d4013;
  --color-warm-welcome-800: #712e02;
  --color-warm-welcome-900: #582100;
  --color-warm-welcome-950: #381200;
  --color-caramel-finish: #ffd294;
  --color-caramel-finish-50: #fff6e9;
  --color-caramel-finish-100: #ffeacf;
  --color-caramel-finish-200: #ffd294;
  --color-caramel-finish-300: #e2bc8a;
  --color-caramel-finish-400: #c49b62;
  --color-caramel-finish-500: #a87f43;
  --color-caramel-finish-600: #8c6427;
  --color-caramel-finish-700: #714e12;
  --color-caramel-finish-800: #5a3b03;
  --color-caramel-finish-900: #472d00;
  --color-caramel-finish-950: #2d1b00;
}