Pepperoni to Rock’n’Rose color palette

A74C00Pepperoni 0088D0Way Beyond the Blue FD6900Safety Orange FF6CD5Nervous Neon Pink FF94B3Rock’n’Rose

Open in generator Export PNG, PDF, ASE…

About this palette

Pepperoni to Rock’n’Rose is a 5-color vibrant, warm palette: #A74C00 (Pepperoni), #0088D0 (Way Beyond the Blue), #FD6900 (Safety Orange), #FF6CD5 (Nervous Neon Pink), #FF94B3 (Rock’n’Rose). It mixes brown, blue, orange, pink tones and feels warm overall. The strongest text pairing is #A74C00 on #FF94B3 with a contrast ratio of 2.76:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pepperoni	rgb(167, 76, 0)	hsl(27, 100%, 33%)
Way Beyond the Blue	rgb(0, 136, 208)	hsl(201, 100%, 41%)
Safety Orange	rgb(253, 105, 0)	hsl(25, 100%, 50%)
Nervous Neon Pink	rgb(255, 108, 213)	hsl(317, 100%, 71%)
Rock’n’Rose	rgb(255, 148, 179)	hsl(343, 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.

Color blindness preview

CSS variables

/* Pepperoni to Rock’n’Rose — https://swatchly.xyz/palette/a74c00-0088d0-fd6900-ff6cd5-ff94b3 */
:root {
  --pepperoni: #a74c00;
  --way-beyond-the-blue: #0088d0;
  --safety-orange: #fd6900;
  --nervous-neon-pink: #ff6cd5;
  --rock-n-rose: #ff94b3;
}

Tailwind CSS v4

/* Pepperoni to Rock’n’Rose — https://swatchly.xyz/palette/a74c00-0088d0-fd6900-ff6cd5-ff94b3 */
@theme {
  --color-pepperoni: #a74c00;
  --color-pepperoni-50: #fff2ec;
  --color-pepperoni-100: #ffe5d7;
  --color-pepperoni-200: #ffcaad;
  --color-pepperoni-300: #fea878;
  --color-pepperoni-400: #e2854e;
  --color-pepperoni-500: #c5682c;
  --color-pepperoni-600: #a74c00;
  --color-pepperoni-700: #863b00;
  --color-pepperoni-800: #6a2d00;
  --color-pepperoni-900: #532200;
  --color-pepperoni-950: #361300;
  --color-way-beyond-the-blue: #0088d0;
  --color-way-beyond-the-blue-50: #ebf6ff;
  --color-way-beyond-the-blue-100: #d6edff;
  --color-way-beyond-the-blue-200: #aedbff;
  --color-way-beyond-the-blue-300: #7bc5ff;
  --color-way-beyond-the-blue-400: #3da5ed;
  --color-way-beyond-the-blue-500: #0088d0;
  --color-way-beyond-the-blue-600: #006da9;
  --color-way-beyond-the-blue-700: #005787;
  --color-way-beyond-the-blue-800: #00446b;
  --color-way-beyond-the-blue-900: #003455;
  --color-way-beyond-the-blue-950: #002137;
  --color-safety-orange: #fd6900;
  --color-safety-orange-50: #fff0ea;
  --color-safety-orange-100: #ffe2d6;
  --color-safety-orange-200: #ffc6ad;
  --color-safety-orange-300: #ffa37a;
  --color-safety-orange-400: #fd6900;
  --color-safety-orange-500: #d45700;
  --color-safety-orange-600: #ac4500;
  --color-safety-orange-700: #8a3600;
  --color-safety-orange-800: #6d2900;
  --color-safety-orange-900: #561e00;
  --color-safety-orange-950: #391100;
  --color-nervous-neon-pink: #ff6cd5;
  --color-nervous-neon-pink-50: #fff6fb;
  --color-nervous-neon-pink-100: #ffeaf7;
  --color-nervous-neon-pink-200: #ffceed;
  --color-nervous-neon-pink-300: #ffabe3;
  --color-nervous-neon-pink-400: #ff6cd5;
  --color-nervous-neon-pink-500: #dd4db6;
  --color-nervous-neon-pink-600: #bb2998;
  --color-nervous-neon-pink-700: #9b067c;
  --color-nervous-neon-pink-800: #7a0061;
  --color-nervous-neon-pink-900: #5e004a;
  --color-nervous-neon-pink-950: #3c002e;
  --color-rock-n-rose: #ff94b3;
  --color-rock-n-rose-50: #ffecf0;
  --color-rock-n-rose-100: #ffdce4;
  --color-rock-n-rose-200: #ffbccd;
  --color-rock-n-rose-300: #ff94b3;
  --color-rock-n-rose-400: #dc7795;
  --color-rock-n-rose-500: #c05c7b;
  --color-rock-n-rose-600: #a24363;
  --color-rock-n-rose-700: #86304e;
  --color-rock-n-rose-800: #6e213d;
  --color-rock-n-rose-900: #58172f;
  --color-rock-n-rose-950: #3a0b1c;
}