Peanut Butter Jelly
#ce4a2d
Rich peanut-butter orange with berry undertone
About Peanut Butter Jelly
Peanut Butter Jelly is the orange I see when a UI element looks like it's been stirred, not blared. The tone reads earthy and creamy at the same time, with a peanut-butter undertone that keeps it from turning into the clay-bright snap of Fox or the meatier blushiness of Bloody Salmon. It's also less "caution stripe" orange than Mr. Krabs, more softened, less edge-forward.
Use it for dashboards and finance apps when you want highlights that feel approachable but still directional. I like it for e-commerce order states, billing cycle banners, and analytics filter chips where you need visibility without that crisp, peppery jolt Fox brings. It also works well in admin tables and operations portals for medium-urgency labels, status pills, and call-to-action counters on off-white surfaces, because it holds its warmth without drifting toward wine.
Quick heads-up: pair it with very cool grays and it can start to look a touch muted. Warm neutrals or light tan backgrounds keep it tasting "PB" instead of getting flat.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.
Similar colors
Create a gradient with Peanut Butter Jelly
Open the generator with this color pre-loaded.
Start creating