Bento Box
#cc363c
Bento Box: cooler orange-red block for grid accents
About Bento Box
Bento Box is the one that actually sits in the middle without splitting the difference. It's slightly darker and less saturated than Chef's Kiss, which means it won't scream from every surface, but it's also warmer and more confident than 100 Mph, no red undertone pulling it toward alarm, no apology hiding underneath. This is orange that knows what it wants without broadcasting it.
Reach for it in product interfaces, restaurant and food apps, and dashboards where you need a color that reads as active and present without the urgency of warnings or the playfulness of notifications. Progress bars, status indicators, accent elements on card-based layouts. It pairs naturally with warm backgrounds, cream, tan, soft beige, without getting swallowed the way sharper oranges do. It also holds its own on white or cool gray, which means you're not locked into a particular palette direction to make it work.
The thing: it's got enough saturation that it'll anchor attention, but enough restraint that it won't dominate. It works harder than it looks, which is exactly when you know a color's doing its job.
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.