Palette

Woven Fiber Earth

A comforting array of soft, natural hues, inspired by the organic texture of woven fibers.

NeutralNatural5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Woven Fiber Earth reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Woven Fiber Earth.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#C4BBAF#E7E3DD#9A9188#716962#B2A99E

Palette guide

How to use Woven Fiber Earth

Overview

The "Woven Fiber Earth" palette is a comforting array of soft, natural hues, deeply inspired by the organic texture of woven fibers. Featuring hex codes like #716962 (a deep, grounding grey-brown), #9A9188 (a rich, muted taupe), and #E7E3DD (a very light, creamy off-white), this palette evokes a sense of natural serenity and subtle sophistication. It's ideal for designers aiming to create understated, organic, and warm aesthetics, perfect for projects requiring a connection to natural elements and a calm, inviting visual experience across various design applications.

Best used for

Eco-friendly branding and products
Natural skincare packaging
Minimalist interior design concepts
Organic food websites and menus
Calm meditation app interfaces
Sustainable fashion blogs

Suggested color roles

primary

Use #716962 as a deep, grounding grey-brown, excellent for main headings, strong brand elements, or foundational UI components, conveying stability.

secondary

Apply #9A9188, a rich, muted taupe, suitable for subheadings, navigation, or larger content blocks, offering a soft, textured presence.

accent

Utilize #B2A99E, a warm, light taupe, perfect for subtle highlights, interactive elements, or adding gentle visual interest without being loud.

background

Employ #E7E3DD, a very light, creamy off-white, providing a clean, expansive, and tranquil canvas that allows other colors to breathe.

text

For primary body text, use #716962 or black, ensuring excellent readability against the lighter backgrounds.

Accessibility notes

Ensure #716962 text on #E7E3DD background meets WCAG AA contrast standards.
Avoid using #C4BBAF for small text on #B2A99E due to insufficient contrast.
Use #9A9188 for larger text elements or headings against lighter backgrounds for legibility.
Consider a very dark text color, like charcoal, for any copy placed on #C4BBAF.

Recommended combinations

Fiber Base

Creates a clean, organic, and sophisticated core aesthetic for branding or web foundations.

#716962 · #E7E3DD · #9A9188

Soft Layers

Ideal for adding subtle depth to UI elements, background patterns, or visual textures.

#9A9188 · #C4BBAF · #B2A99E

Earth & Light

Offers a balanced, minimalist, and naturally appealing visual for serene designs.

#E7E3DD · #B2A99E · #716962

CSS variables

:root {
  --woven-fiber-earth-1: #C4BBAF;
  --woven-fiber-earth-2: #E7E3DD;
  --woven-fiber-earth-3: #9A9188;
  --woven-fiber-earth-4: #716962;
  --woven-fiber-earth-5: #B2A99E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woven-fiber-earth": {
        1: "#C4BBAF",
        2: "#E7E3DD",
        3: "#9A9188",
        4: "#716962",
        5: "#B2A99E",
      }
    }
  }
}

Hex values

Color 1#C4BBAF

Color 2#E7E3DD

Color 3#9A9188

Color 4#716962

Color 5#B2A99E

Accessibility

Contrast checker

1.5:1Fail

1.6:1Fail

2.8:1Fail

1.2:1Fail

1.5:1Fail

2.4:1Fail

4.2:1AA18

1.8:1Fail

1.6:1Fail

2.4:1Fail

1.7:1Fail

1.3:1Fail

2.8:1Fail

4.2:1AA18

1.7:1Fail

2.3:1Fail

1.2:1Fail

1.8:1Fail

1.3:1Fail

2.3:1Fail

Similar palettes

More like Woven Fiber Earth

View all Neutral

Boho Earth Weave

Mountain Ridge

Whispering Canyon Wall

Coffee Cream Blend

Woven Basket Weave

Artisan Ceramic Glaze