Modern Gray

Meet Modern Gray (#D6CEC3), a sophisticated neutral that stands apart with its subtle warmth and earthy undertones. This complex shade offers a quiet yet compelling foundation for any design palette, bridging the gap between a classic gray and a warm, muted beige with remarkable subtlety.

What color is Modern Gray?

What is the meaning of Modern Gray?

How do I use Modern Gray (#D6CEC3) in UI design?

Using Modern Gray color codes

Modern Gray

#D6CEC3

Access our full UI & UX library today.

What color is Modern Gray?

What is the meaning of Modern Gray?

How do I use Modern Gray (#D6CEC3) in UI design?

Using Modern Gray color codes

Modern Gray Code Conversions

HEX

#D6CEC3

LAB

83, 1, 6

RGB

214, 206, 195

XYZ

59.7, 62.4, 60.5

HSL

35°, 19%, 80%

LCH

83, 7, 82°

HSB

35°, 9%, 84%

LUV

83, 5, 9

CMYK

0, 4, 9, 16

CMYK

0, 4, 9, 16

HWB

35°, 76%, 16%

Modern Gray Color Harmonies

Analogous

Analogous colors are found next to Modern Gray on the color wheel. This combination creates a harmonious and serene visual experience for any design.

#D6C5C3

#D6CEC3

#D5D6C3

#D6C5C3

#D6CEC3

#D5D6C3

Complementary

Complementary colors sit directly opposite each other on the color wheel. Paired with Modern Gray, they produce a striking and vibrant visual effect.

#D6CEC3

#C3CBD6

#D6CEC3

#C3CBD6

Split Complementary

Split complementary colors for Modern Gray use the two colors adjacent to its direct complement, offering a vibrant yet balanced palette for your designs.

#D6CEC3

#C3D5D6

#C4C3D6

#D6CEC3

#C3D5D6

#C4C3D6

Triadic

A triadic scheme uses three colors evenly spaced on the color wheel. This creates a high-contrast yet harmonious palette built around Modern Gray.

#D6CEC3

#C3D6CE

#CEC3D6

#D6CEC3

#C3D6CE

#CEC3D6

Tetradic

A tetradic palette for Modern Gray is built from two pairs of complementary colors, creating a rich, four-color harmony.

#D6CEC3

#C3D6C5

#C3CBD6

#D6C3D5

#D6CEC3

#C3D6C5

#C3CBD6

#D6C3D5

Square

A square color scheme uses four colors equidistant on the color wheel, creating a vibrant, high-contrast palette with Modern Gray as its foundation.

#D6CEC3

#C3D6C5

#C3CBD6

#D6C3D5

#D6CEC3

#C3D6C5

#C3CBD6

#D6C3D5

Modern Gray Contrast Simulation

Text Color

#

Background Color

#

13.48

Super

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.

13.48

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Modern Gray Color Variations

Shades

Shades are darker versions of Modern Gray, made by adding black for a weightier feel.

#D6CEC3

#B7B1A7

#99938B

#7A766F

#5C5854

#3D3B38

#1F1D1C

#000000

#D6CEC3

#B7B1A7

#99938B

#7A766F

#5C5854

#3D3B38

#1F1D1C

#000000

Tints

Tints of Modern Gray are created by adding white, resulting in lighter, softer variations.

#D6CEC3

#DCD5CC

#E2DCD4

#E8E3DD

#EDEAE5

#F3F1EE

#F9F8F6

#FFFFFF

#D6CEC3

#DCD5CC

#E2DCD4

#E8E3DD

#EDEAE5

#F3F1EE

#F9F8F6

#FFFFFF

Tones

Adding gray to Modern Gray creates tones, which are softer and less saturated versions.

#D6CEC3

#CAC3B9

#BDB8B0

#B1ADA6

#A5A19D

#999693

#8C8B8A

#808080

#D6CEC3

#CAC3B9

#BDB8B0

#B1ADA6

#A5A19D

#999693

#8C8B8A

#808080

Hues

Hues share Modern Gray's base color but vary in their intensity and temperature.

#D6CEC3

#D0D6C3

#C3D6C5

#C3D6D3

#C3CBD6

#C9C3D6

#D6C3D5

#D6C3C6

#D6CEC3

#D0D6C3

#C3D6C5

#C3D6D3

#C3CBD6

#C9C3D6

#D6C3D5

#D6C3C6

What Interfaces Use Colors Like Modern Gray?

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