Chocolate

Meet Chocolate (#D2691E), a rich, warm brown that stands out with its noticeable orange-red undertones. This specific quality gives it a unique vibrancy, setting it apart from more muted earth tones and offering a distinctive option for any designer's palette.

What color is Chocolate?

What is the meaning of Chocolate?

How do I use Chocolate (#D2691E) in UI design?

Using Chocolate color codes

Chocolate

#D2691E

Access our full UI & UX library today.

What color is Chocolate?

What is the meaning of Chocolate?

How do I use Chocolate (#D2691E) in UI design?

Using Chocolate color codes

Chocolate Code Conversions

HEX

#D2691E

LAB

56, 37, 57

RGB

210, 105, 30

XYZ

31.9, 23.9, 4.2

HSL

25°, 75%, 47%

LCH

56, 68, 57°

HSB

25°, 86%, 82%

LUV

56, 86, 48

CMYK

0, 50, 86, 18

CMYK

0, 50, 86, 18

HWB

25°, 12%, 18%

Chocolate Color Harmonies

Analogous

Analogous colors are neighbors on the color wheel. When paired with Chocolate, they create a harmonious and serene visual experience for users.

#D21E2D

#D2691E

#D2C31E

#D21E2D

#D2691E

#D2C31E

Complementary

Complementary colors are opposites on the color wheel. When paired with Chocolate, its complement creates a high-contrast, visually striking combination for your designs.

#D2691E

#1E87D2

#D2691E

#1E87D2

Split Complementary

A twist on the complementary scheme, split complementary pairs Chocolate with the two colors adjacent to its direct opposite for a vibrant, balanced look.

#D2691E

#1ED2C3

#1E2DD2

#D2691E

#1ED2C3

#1E2DD2

Triadic

A triadic color scheme pairs Chocolate with two other colors from equidistant points on the color wheel, resulting in a bold, high-contrast look.

#D2691E

#1ED269

#691ED2

#D2691E

#1ED269

#691ED2

Tetradic

A tetradic scheme pairs Chocolate with three other hues, forming two sets of complementary colors for a vibrant and versatile four-color palette.

#D2691E

#2DD21E

#1E87D2

#C31ED2

#D2691E

#2DD21E

#1E87D2

#C31ED2

Square

A square color scheme uses four colors equidistant on the color wheel. With Chocolate, this creates a vibrant, high-contrast palette with balanced tones.

#D2691E

#2DD21E

#1E87D2

#C31ED2

#D2691E

#2DD21E

#1E87D2

#C31ED2

Chocolate Contrast Simulation

Text Color

#

Background Color

#

5.78

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

5.78

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Chocolate Color Variations

Shades

Shades of Chocolate are created by adding black, which gives the color more depth and weight.

#D2691E

#B45A1A

#964B15

#783C11

#5A2D0D

#3C1E09

#1E0F04

#000000

#D2691E

#B45A1A

#964B15

#783C11

#5A2D0D

#3C1E09

#1E0F04

#000000

Tints

Tints are lighter versions of Chocolate made by adding white, resulting in a softer appearance.

#D2691E

#D87E3E

#DF945E

#E5A97E

#ECBF9F

#F2D4BF

#F9EADF

#FFFFFF

#D2691E

#D87E3E

#DF945E

#E5A97E

#ECBF9F

#F2D4BF

#F9EADF

#FFFFFF

Tones

Tones are created by adding gray to Chocolate, softening its saturation for a more muted appearance.

#D2691E

#C66C2C

#BB703A

#AF7348

#A37656

#977964

#8C7D72

#808080

#D2691E

#C66C2C

#BB703A

#AF7348

#A37656

#977964

#8C7D72

#808080

Hues

Hues are variations of Chocolate, differing in intensity or temperature to create distinct moods.

#D2691E

#B4D21E

#2DD21E

#1ED296

#1E87D2

#3C1ED2

#C31ED2

#D21E5A

#D2691E

#B4D21E

#2DD21E

#1ED296

#1E87D2

#3C1ED2

#C31ED2

#D21E5A

What Interfaces Use Colors Like Chocolate?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox