Bone

Introducing Bone, hex code #E3DAC9. This color distinguishes itself not as a simple off-white, but as a complex neutral with a distinct, quiet warmth. It provides a sophisticated foundation that feels both organic and modern, setting it apart from more common beiges and creams.

What color is Bone?

What is the meaning of Bone?

How do I use Bone (#E3DAC9) in UI design?

Using Bone color codes

Bone

#E3DAC9

Access our full UI & UX library today.

What color is Bone?

What is the meaning of Bone?

How do I use Bone (#E3DAC9) in UI design?

Using Bone color codes

Bone Code Conversions

HEX

#E3DAC9

LAB

87, 0, 9

RGB

227, 218, 201

XYZ

67.3, 70.7, 65.3

HSL

39°, 32%, 84%

LCH

87, 9, 89°

HSB

39°, 11%, 89%

LUV

87, 6, 14

CMYK

0, 4, 11, 11

CMYK

0, 4, 11, 11

HWB

39°, 79%, 11%

Bone Color Harmonies

Analogous

Analogous colors sit side-by-side on the color wheel. With Bone as a base, they produce a naturally calm and unified visual effect.

#E3CDC9

#E3DAC9

#DFE3C9

#E3CDC9

#E3DAC9

#DFE3C9

Complementary

Complementary colors are opposites on the color wheel, creating a high-contrast relationship. Paired with Bone, its complement produces a vibrant, attention-grabbing visual.

#E3DAC9

#C9D2E3

#E3DAC9

#C9D2E3

Split Complementary

A split complementary scheme for Bone uses the two colors adjacent to its direct complement, offering a vibrant yet balanced high-contrast palette.

#E3DAC9

#C9DFE3

#CDC9E3

#E3DAC9

#C9DFE3

#CDC9E3

Triadic

Triadic color schemes pair Bone with two other hues equally spaced on the color wheel, creating a vibrant and balanced high-contrast palette.

#E3DAC9

#C9E3DA

#DAC9E3

#E3DAC9

#C9E3DA

#DAC9E3

Tetradic

A tetradic color scheme for Bone uses two pairs of complementary colors, forming a rectangle on the color wheel for a vibrant, balanced palette.

#E3DAC9

#C9E3CD

#C9D2E3

#E3C9DF

#E3DAC9

#C9E3CD

#C9D2E3

#E3C9DF

Square

Using four colors spaced evenly on the color wheel, a square scheme builds a rich, high-contrast palette around the central color of Bone.

#E3DAC9

#C9E3CD

#C9D2E3

#E3C9DF

#E3DAC9

#C9E3CD

#C9D2E3

#E3C9DF

Bone Contrast Simulation

Text Color

#

Background Color

#

15.14

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.

15.14

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Bone Color Variations

Shades

Adding black to Bone creates its shades, which introduce visual weight and greater dimension.

#E3DAC9

#C3BBAC

#A29C90

#827D73

#615D56

#413E39

#201F1D

#000000

#E3DAC9

#C3BBAC

#A29C90

#827D73

#615D56

#413E39

#201F1D

#000000

Tints

Tints are lighter variations of Bone, made by mixing in white to create a softer feel.

#E3DAC9

#E7DFD1

#EBE5D8

#EFEAE0

#F3EFE8

#F7F4F0

#FBFAF7

#FFFFFF

#E3DAC9

#E7DFD1

#EBE5D8

#EFEAE0

#F3EFE8

#F7F4F0

#FBFAF7

#FFFFFF

Tones

Tones of Bone are created by adding gray, resulting in softer, more muted versions.

#E3DAC9

#D5CDBF

#C7C0B4

#B9B3AA

#AAA79F

#9C9A95

#8E8D8A

#808080

#E3DAC9

#D5CDBF

#C7C0B4

#B9B3AA

#AAA79F

#9C9A95

#8E8D8A

#808080

Hues

Hues are variations of Bone, altering its intensity and temperature to create different moods.

#E3DAC9

#D8E3C9

#C9E3CD

#C9E3E1

#C9D2E3

#D4C9E3

#E3C9DF

#E3C9CB

#E3DAC9

#D8E3C9

#C9E3CD

#C9E3E1

#C9D2E3

#D4C9E3

#E3C9DF

#E3C9CB

What Interfaces Use Colors Like Bone?

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