Stone Harbor

Meet Stone Harbor (#B4AFA8), a sophisticated greige that balances warmth and neutrality. Its muted, earthy quality provides a subtle yet firm foundation, making it a uniquely versatile choice for creating refined and grounded digital interfaces. It's a quiet powerhouse in a designer's palette.

What color is Stone Harbor?

What is the meaning of Stone Harbor?

How do I use Stone Harbor (#B4AFA8) in UI design?

Using Stone Harbor color codes

Stone Harbor

#B4AFA8

Access our full UI & UX library today.

What color is Stone Harbor?

What is the meaning of Stone Harbor?

How do I use Stone Harbor (#B4AFA8) in UI design?

Using Stone Harbor color codes

Stone Harbor Code Conversions

HEX

#B4AFA8

LAB

72, 1, 4

RGB

180, 175, 168

XYZ

41.2, 43.2, 43.2

HSL

35°, 7%, 68%

LCH

72, 4, 83°

HSB

35°, 7%, 71%

LUV

72, 3, 6

CMYK

0, 3, 7, 29

CMYK

0, 3, 7, 29

HWB

35°, 66%, 29%

Stone Harbor Color Harmonies

Analogous

Analogous palettes are created from colors adjacent on the color wheel. With Stone Harbor as a base, these combinations produce a cohesive and serene effect.

#B4A9A8

#B4AFA8

#B3B4A8

#B4A9A8

#B4AFA8

#B3B4A8

Complementary

Complementary colors sit opposite each other on the color wheel. Paired with Stone Harbor, they create a high-contrast and visually striking combination.

#B4AFA8

#A8ADB4

#B4AFA8

#A8ADB4

Split Complementary

For a high-contrast yet harmonious scheme, a split complementary palette pairs Stone Harbor with the two colors adjacent to its direct complement.

#B4AFA8

#A8B3B4

#A9A8B4

#B4AFA8

#A8B3B4

#A9A8B4

Triadic

Triadic color schemes use three hues equally spaced on the color wheel. With Stone Harbor as a base, this method creates a vibrant, high-contrast palette.

#B4AFA8

#A8B4AF

#AFA8B4

#B4AFA8

#A8B4AF

#AFA8B4

Tetradic

A tetradic color scheme for Stone Harbor uses two pairs of complementary colors, creating a rich, four-color palette with built-in visual tension.

#B4AFA8

#A8B4A9

#A8ADB4

#B4A8B3

#B4AFA8

#A8B4A9

#A8ADB4

#B4A8B3

Square

A square scheme pairs Stone Harbor with three other colors, all evenly spaced on the color wheel for a vibrant, high-contrast palette.

#B4AFA8

#A8B4A9

#A8ADB4

#B4A8B3

#B4AFA8

#A8B4A9

#A8ADB4

#B4A8B3

Stone Harbor Contrast Simulation

Text Color

#

Background Color

#

9.64

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.

9.64

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Stone Harbor Color Variations

Shades

Shades of Stone Harbor are darker variants made by adding black for more depth and weight.

#B4AFA8

#9A9690

#817D78

#676460

#4D4B48

#333230

#1A1918

#000000

#B4AFA8

#9A9690

#817D78

#676460

#4D4B48

#333230

#1A1918

#000000

Tints

Adding white to Stone Harbor creates tints, which are lighter, softer versions of the color.

#B4AFA8

#BFBAB4

#C9C6C1

#D4D1CD

#DFDDDA

#EAE8E6

#F4F4F3

#FFFFFF

#B4AFA8

#BFBAB4

#C9C6C1

#D4D1CD

#DFDDDA

#EAE8E6

#F4F4F3

#FFFFFF

Tones

Tones of Stone Harbor are created by adding gray, which softens the color’s saturation.

#B4AFA8

#ADA8A2

#A5A29D

#9E9B97

#969491

#8F8D8B

#878786

#808080

#B4AFA8

#ADA8A2

#A5A29D

#9E9B97

#969491

#8F8D8B

#878786

#808080

Hues

Hues are variations of Stone Harbor, differing in intensity and temperature to create specific moods.

#B4AFA8

#B0B4A8

#A8B4A9

#A8B4B2

#A8ADB4

#ACA8B4

#B4A8B3

#B4A8AA

#B4AFA8

#B0B4A8

#A8B4A9

#A8B4B2

#A8ADB4

#ACA8B4

#B4A8B3

#B4A8AA

What Interfaces Use Colors Like Stone Harbor?

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