#7B3F00
Brown family

Chocolate

Also known as: earthy · rich · warm · luxurious · comforting
Save
Hex #7B3F00
RGB rgb(123, 63, 0)
HSL hsl(31°, 100%, 24%)
CMYK 0 · 49 · 100 · 52

Meaning

In Western cultures, chocolate often symbolizes luxury and indulgence, while in some indigenous cultures of Central America, it was revered as a sacred beverage, representing wealth and power. Contrastingly, in Eastern cultures, it can signify grounding and stability.

The term 'chocolate' originates from the Nahuatl word 'xocolātl', used by the Aztecs in the 15th century, where cacao was consumed as a bitter drink. Initially, chocolate was a luxury item in Europe, accessible only to the affluent, before becoming a staple commodity by the 19th century.

earthyrichwarmluxuriouscomforting

Similar colors

Ranked by CIE76 ΔE — the perceptual distance from Chocolate. Lower ΔE means a closer match (below ~2 is barely distinguishable).

All 35 Browns →

Shades & tints

Nine steps of Chocolate by lightness — from #402100 (darkest) to #BA9B7A (lightest). Click any to copy.

-40% #402100
-30% #4F2800
-20% #5D3000
-10% #6C3700
BASE #7B3F00
+15% #8B561F
+30% #9B6D3D
+50% #AB845C
+70% #BA9B7A

Complementary

Sitting opposite Chocolate at 211° on the color wheel, these give the highest-contrast pairings.

Palettes

Curated 5-color combinations featuring Chocolate.

#7B3F00
#FFA500
#F5F5F5
#8B4513
#C0C0C0

Autumn Harvest

Cozy Comfort
#7B3F00
#3E2723
#FFFFFF
#D2691E
#8B0000

Cafe Mocha

Warm Indulgence
#7B3F00
#4B8B3B
#BEBEBE
#2F4F4F
#FFD700

Woodland Retreat

Natural Serenity

Chocolate scale

A 50–900 tonal scale with Chocolate anchored at 500 — ready to drop into a design system. Click any step to copy.

50 #F4F0EB
100 #E7DCD1
200 #CDB69E
300 #B2906B
400 #976736
500 #7B3F00
600 #653400
700 #512A00
800 #3E2000
900 #2A1500

Accessibility

Works well as text on light backgrounds; fails on dark.

Aa Best text color: #FFFFFF · 8.22:1
Chocolate as text on… Ratio AA AAA
Aa White background 8.22:1 Pass Pass
Aa Black background 2.55:1 Fail Fail

Thresholds: AA needs 4.5:1 (normal text) / 3:1 (large); AAA needs 7:1 / 4.5:1. Large = 18pt+ or 14pt+ bold.

How to use #7B3F00

Copy-ready values for CSS, screen and print, plus the extra conversions designers reach for.

CSS color: #7B3F00;
CSS color-mix (lighten 30%) color-mix(in srgb, #7B3F00 70%, white)
HSV / HSB 31°, 100%, 48%
CMYK (print) 0, 49, 100, 52
Decimal 8077056
Nearest web-safe #663300

Color vision

How Chocolate appears to viewers with the three main types of color blindness (~1 in 12 men, 1 in 200 women). Simulated approximations.

Normal vision

#7B3F00

Protanopia (no red)

#61600F

Deuteranopia (no green)

#656913

Tritanopia (no blue)

#781B1E
Brown
2 / 35 Browns Tan
Copied!