UI Shades

A study in brown

Chocolate

#D2691E

Family
Brown
L
0.634
C
0.155
H
50°

Notes

Chocolate sits in the brown family at moderate lightness with a strong red-orange undertone. The CSS name was chosen to mark this exact warm cocoa tone, distinct from cooler browns like Saddle Brown or pure Brown. Food and outdoor brands use it as a primary in autumn and holiday campaigns. Cream alongside gives a hot-drink palette; brass and matte black push it into luxury packaging territory. As a UI color it works well for warm-themed buttons but loses contrast quickly on white. Body text against white passes AA at body-text sizes; below 14px it is borderline and should be checked carefully.

#d2691e
Chocolate
Chocolate
#d2691e
oklch(0.634 0.155 50.27)
rgb(210 105 30)
hsl(25 75% 47.1%)
Share
#fff5ea
#ffeddb
#ffd9bc
#ffc196
#fe9657
#d2691e
#b75000
#9c3d00
#742800
#521800
#2e0900

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Chocolate

Cross-reference
Q&A

Frequently asked questions

What is Chocolate?

Chocolate sits in the brown family at moderate lightness with a strong red-orange undertone. The CSS name was chosen to mark this exact warm cocoa tone, distinct from cooler browns like Saddle Brown or pure Brown. Its hex code is #D2691E.

What are the tints and shades of Chocolate?

uishades builds an 11-step OKLCH ramp for Chocolate (#D2691E) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Chocolate?

Its complementary color is #0099D3. Triadic partners are #00A67D and #8B76E0; analogous neighbours are #B97E00 and #D85D62.

What are the OKLCH and RGB values of Chocolate?

Chocolate is #D2691E - OKLCH 0.634 0.155 50°, rgb(210 105 30), in the brown family.