Bento Box

#cc363c

Bento Box: cooler orange-red block for grid accents

Save
Share

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 , 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
5.05:1AAAAA Large

On Gray 100 #f5f5f5

Aa
4.63:1AAAAA Large

On Gray 900 #18181b

Aa
3.51:1FailAA Large

On Black #000000

Aa
4.16:1FailAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#c93f38
#c9312b
#c33a36

Create a gradient with Bento Box

Open the generator with this color pre-loaded.

Start creating