Armour

Meet Armour (#B8B9BE), a cool, metallic neutral that brings a quiet strength to any palette. Its understated character and balanced tone make it a versatile foundation for creating clean, modern interfaces, offering a subtle alternative to stark whites or darker grays.

What color is Armour?

What is the meaning of Armour?

How do I use Armour (#B8B9BE) in UI design?

Using Armour color codes

Armour

#B8B9BE

Access our full UI & UX library today.

What color is Armour?

What is the meaning of Armour?

How do I use Armour (#B8B9BE) in UI design?

Using Armour color codes

Armour Code Conversions

HEX

#B8B9BE

LAB

75, 1, -3

RGB

184, 185, 190

XYZ

46.4, 48.6, 55.6

HSL

230°, 4%, 73%

LCH

75, 3, 283°

HSB

230°, 3%, 75%

LUV

75, -1, -4

CMYK

3, 3, 0, 25

CMYK

3, 3, 0, 25

HWB

230°, 72%, 25%

Armour Color Harmonies

Analogous

An analogous palette pairs Armour with its neighbors on the color wheel. This approach creates a unified and visually calm composition for your designs.

#B8BCBE

#B8B9BE

#BAB8BE

#B8BCBE

#B8B9BE

#BAB8BE

Complementary

Complementary colors are opposites on the color wheel. When paired with Armour, they create a high-contrast, visually striking effect for your designs.

#B8B9BE

#BEBDB8

#B8B9BE

#BEBDB8

Split Complementary

Split complementary schemes pair Armour with the two colors adjacent to its direct complement, offering a vibrant yet balanced and harmonious color palette.

#B8B9BE

#BEBAB8

#BCBEB8

#B8B9BE

#BEBAB8

#BCBEB8

Triadic

A triadic scheme uses three colors equidistant on the color wheel. Paired with Armour, this combination produces a bold and balanced visual effect.

#B8B9BE

#BEB8B9

#B9BEB8

#B8B9BE

#BEB8B9

#B9BEB8

Tetradic

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

#B8B9BE

#BEB8BC

#BEBDB8

#B8BEBA

#B8B9BE

#BEB8BC

#BEBDB8

#B8BEBA

Square

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

#B8B9BE

#BEB8BC

#BEBDB8

#B8BEBA

#B8B9BE

#BEB8BC

#BEBDB8

#B8BEBA

Armour Contrast Simulation

Text Color

#

Background Color

#

10.72

Excellent

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.

10.72

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Armour Color Variations

Shades

Shades are darker versions of Armour, made by adding black for more depth and weight.

#B8B9BE

#9E9FA3

#838488

#696A6D

#4F4F51

#353536

#1A1A1B

#000000

#B8B9BE

#9E9FA3

#838488

#696A6D

#4F4F51

#353536

#1A1A1B

#000000

Tints

Lighter versions of Armour are called tints, created by adding white for a softer look.

#B8B9BE

#C2C3C7

#CCCDD1

#D6D7DA

#E1E1E3

#EBEBEC

#F5F5F6

#FFFFFF

#B8B9BE

#C2C3C7

#CCCDD1

#D6D7DA

#E1E1E3

#EBEBEC

#F5F5F6

#FFFFFF

Tones

Tones are created by adding gray to Armour, resulting in softer, more muted variations.

#B8B9BE

#B0B1B5

#A8A9AC

#A0A1A3

#98989B

#909092

#888889

#808080

#B8B9BE

#B0B1B5

#A8A9AC

#A0A1A3

#98989B

#909092

#888889

#808080

Hues

Hues are variations of Armour (#B8B9BE), differing in intensity or temperature to create distinct effects.

#B8B9BE

#BCB8BE

#BEB8BC

#BEB9B8

#BEBDB8

#BBBEB8

#B8BEBA

#B8BEBE

#B8B9BE

#BCB8BE

#BEB8BC

#BEB9B8

#BEBDB8

#BBBEB8

#B8BEBA

#B8BEBE

What Interfaces Use Colors Like Armour?

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