Beige

Beige (#F5F5DC) is a study in understated elegance. Its defining quality is a soft, creamy warmth that creates a stable and sophisticated canvas. This particular shade offers a gentle luminosity, making it a compelling neutral for interfaces that require a touch of organic character.

What color is Beige?

What is the meaning of Beige?

How do I use Beige (#F5F5DC) in UI design?

Using Beige color codes

Beige

#F5F5DC

Access our full UI & UX library today.

What color is Beige?

What is the meaning of Beige?

How do I use Beige (#F5F5DC) in UI design?

Using Beige color codes

Beige Code Conversions

HEX

#F5F5DC

LAB

96, -4, 12

RGB

245, 245, 220

XYZ

83.2, 89.9, 80.7

HSL

60°, 56%, 91%

LCH

96, 13, 109°

HSB

60°, 10%, 96%

LUV

96, 1, 19

CMYK

0, 0, 10, 4

CMYK

0, 0, 10, 4

HWB

60°, 86%, 4%

Beige Color Harmonies

Analogous

Created from adjacent hues on the color wheel, analogous schemes for Beige result in a naturally harmonious and serene composition for any design.

#F5E9DC

#F5F5DC

#E9F5DC

#F5E9DC

#F5F5DC

#E9F5DC

Complementary

Complementary colors are direct opposites on the color wheel. Pairing Beige with its counterpart creates a high-contrast combination that makes designs stand out.

#F5F5DC

#DCDCF5

#F5F5DC

#DCDCF5

Split Complementary

For a more nuanced high-contrast palette, Beige's split complementary scheme pairs it with the two colors adjacent to its direct complement on the wheel.

#F5F5DC

#DCE9F5

#E9DCF5

#F5F5DC

#DCE9F5

#E9DCF5

Triadic

A triadic color scheme uses three colors equidistant on the color wheel. With Beige (#F5F5DC) as a base, this creates a vibrant, high-contrast palette.

#F5F5DC

#DCF5F5

#F5DCF5

#F5F5DC

#DCF5F5

#F5DCF5

Tetradic

A tetradic scheme for Beige involves two pairs of complementary colors, resulting in a dynamic four-color palette that offers considerable design flexibility.

#F5F5DC

#DCF5E9

#DCDCF5

#F5DCE9

#F5F5DC

#DCF5E9

#DCDCF5

#F5DCE9

Square

A square color scheme pairs Beige with three other colors, all equidistant on the color wheel, creating a vibrant and high-contrast palette.

#F5F5DC

#DCF5E9

#DCDCF5

#F5DCE9

#F5F5DC

#DCF5E9

#DCDCF5

#F5DCE9

Beige Contrast Simulation

Text Color

#

Background Color

#

18.98

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.

18.98

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Beige Color Variations

Shades

Adding black to Beige creates darker shades that give a design more substance and weight.

#F5F5DC

#D2D2BD

#AFAF9D

#8C8C7E

#69695E

#46463F

#23231F

#000000

#F5F5DC

#D2D2BD

#AFAF9D

#8C8C7E

#69695E

#46463F

#23231F

#000000

Tints

Adding white to Beige produces tints—lighter variations that introduce a softer, more delicate feel.

#F5F5DC

#F6F6E1

#F8F8E6

#F9F9EB

#FBFBF0

#FCFCF5

#FEFEFA

#FFFFFF

#F5F5DC

#F6F6E1

#F8F8E6

#F9F9EB

#FBFBF0

#FCFCF5

#FEFEFA

#FFFFFF

Tones

Adding gray to Beige creates its tones, which offer a muted and sophisticated palette.

#F5F5DC

#E4E4CF

#D4D4C2

#C3C3B5

#B2B2A7

#A1A19A

#91918D

#808080

#F5F5DC

#E4E4CF

#D4D4C2

#C3C3B5

#B2B2A7

#A1A19A

#91918D

#808080

Hues

Beige hues are variations in temperature and intensity, subtly altering a design's mood.

#F5F5DC

#E2F5DC

#DCF5E9

#DCEFF5

#DCDCF5

#EFDCF5

#F5DCE9

#F5E2DC

#F5F5DC

#E2F5DC

#DCF5E9

#DCEFF5

#DCDCF5

#EFDCF5

#F5DCE9

#F5E2DC

What Interfaces Use Colors Like Beige?

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