Brown Color Family

Chocolate Color Hex Code, RGB & HSL Values

Browse all Brown Colors

What is the meaning of the Chocolate color?

Chocolate is a deep, warm brown color named after the cacao confection. It represents comfort, warmth, and indulgence, frequently used by food manufacturers and artisanal brands.

How to use the Chocolate color hex code in HTML & CSS?

Developers can invoke Chocolate color codes in stylesheets using color: #D2691E;. For modern CSS frameworks, set it as a variable --color-chocolate: #D2691E;, or implement it in Tailwind using bg-[#D2691E].

What are the RGB and HSL codes of Chocolate?

The RGB breakdown for Chocolate is rgb(210, 105, 30). In HSL space, it translates to 25° hue, 75% saturation, and 47% lightness, rendering a highly vivid, intense, and brilliant shade.

CMYK print profiles for Chocolate color

For print design projects using CMYK ink models, Chocolate corresponds to Cyan: 0%, Magenta: 50%, Yellow: 86%, and Black: 18%. Orange balances warmth and friendliness, serving as a bright focal accent in active user interfaces.

Red Channel 210
Green Channel 105
Blue Channel 30
Luminance 0.239

Chocolate Color Space Conversions

Click to copy format
HEX Color Code #D2691E
RGB (Red Green Blue) rgb(210, 105, 30)
HSL (Hue Sat Light) hsl(25°, 75%, 47%)
CMYK (Commercial Print) cmyk(0%, 50%, 86%, 18%)
HSV / HSB Values hsv(25°, 86%, 82%)
Decimal Color Code 13789470
CSS Custom Variable --color-hex: #D2691E;
Tailwind CSS Utility bg-[#D2691E]
CSS Named Color chocolate

Contrast & Accessibility (WCAG 2.1) Check

White Text on Background

White text readability test with #D2691E

Small body copy preview

Black Text on Background

Black text readability test with #D2691E

Small body copy preview

Complementary & Analogous Harmonies

Computed dynamically

Shades & Tints Generator Matrix

Copy shade hex values instantly

Darker Shades (Adding Black)

Lighter Tints (Adding White)

{ } CSS Custom Properties (Variables)

Copy CSS Styles
/* CSS Custom Properties for Chocolate */
--color-hex: #D2691E;
--color-rgb: rgb(210, 105, 30);
--color-hsl: hsl(25deg, 75%, 47%);
--color-name: chocolate;

Aa Known Color Aliases

Chocolate chocolate (CSS Identifier) Chocolate BrownWarm ChocolateDark Chocolate Orange

Chocolate Color Meaning

Representing the brown color family, Chocolate carries the intrinsic characteristics of this organic hue. This color group is the color of the earth itself — soil, tree bark, and natural stone. This foundational connection gives brown a deep sense of reliability, stability, and authenticity. It is associated with honest, no-nonsense quality and natural materials. In branding, brown signals craftsmanship, heritage, and organic authenticity — coffee brands, chocolate companies, and artisan goods all leverage brown's earthy credibility. Unlike the coolness of gray, brown is intrinsically warm, making spaces feel cozy and inviting. Dark rich browns communicate luxury and premium quality, while lighter tans and beiges suggest simplicity and naturalness. Brown is experiencing a design renaissance as consumers prioritize authenticity over artificiality.

Emotions & Associations

WarmthReliabilityHonestyStability

Industries

Artisan GoodsFood & CoffeeLuxury

Adjacent HEX Color Codes

Color Comparisons & Differences

🎨 Cohesive Color Combinations & Palettes

Copied!