Palette

Woven Basket Texture

Mimics the organic, rustic feel of hand-woven natural fibers, warm and inviting with subtle variations.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Woven Basket Texture 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 Basket Texture.

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

Data visualization

#5A3B1B#8B6F4C#B9A17C#DCC59B#F0E0C6

Palette guide

How to use Woven Basket Texture

Overview

The Woven Basket Texture palette offers a beautiful array of organic browns and creams, perfectly capturing the essence of natural fibers and handcrafted objects. It features a deep, grounding brown like #5A3B1B, a rich mid-tone #8B6F4C, and the inviting #B9A17C. Lighter shades such as #DCC59B and the delicate, almost white #F0E0C6 complete this versatile collection, providing ample contrast. This palette is incredibly useful for designers and developers aiming to create digital or physical experiences that feel authentic, warm, and comforting. It's ideal for projects celebrating natural textures, sustainable design, and a cozy, rustic charm, reflecting the subtle variations of woven materials.

Best used for

Sustainable fashion brands
Interior design showcases
Organic food and beverage packaging
Craft and DIY project websites
Natural beauty product branding
Eco-tourism websites

Suggested color roles

primary

#5A3B1B - A deep, robust brown, excellent for strong brand elements, main headings, or foundational UI.

secondary

#8B6F4C - A warm, inviting mid-brown, ideal for subheadings, navigation, or significant content blocks.

accent

#B9A17C - A softer, golden-tan, perfect for subtle highlights, interactive elements, or decorative details.

background

#F0E0C6 - A gentle, near-white cream that provides a clean, breathable canvas, enhancing the natural feel.

text

#5A3B1B - Offers strong contrast on light backgrounds like #F0E0C6. For darker backgrounds, use white or a very light cream.

Accessibility notes

Ensure #5A3B1B text on #F0E0C6 background meets WCAG AAA contrast standards.
Avoid using #DCC59B directly on #F0E0C6 for small text to prevent low contrast.
All interactive elements should have clear visual feedback for hover and focus states.
Consider using a slightly darker text shade than #DCC59B for very long paragraphs on light backgrounds.

Recommended combinations

Natural Foundation

A strong base, a warm mid-tone, and a bright background for clear, organic design.

#5A3B1B · #8B6F4C · #F0E0C6

Textured Harmony

Creates depth and softness, ideal for layered UI elements or subtle backgrounds.

#8B6F4C · #B9A17C · #5A3B1B

Gentle Radiance

Excellent for soft gradients, background patterns, or subtle, inviting transitions.

#B9A17C · #DCC59B · #F0E0C6

CSS variables

:root {
  --woven-basket-texture-1: #5A3B1B;
  --woven-basket-texture-2: #8B6F4C;
  --woven-basket-texture-3: #B9A17C;
  --woven-basket-texture-4: #DCC59B;
  --woven-basket-texture-5: #F0E0C6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woven-basket-texture": {
        1: "#5A3B1B",
        2: "#8B6F4C",
        3: "#B9A17C",
        4: "#DCC59B",
        5: "#F0E0C6",
      }
    }
  }
}

Hex values

Color 1#5A3B1B

Color 2#8B6F4C

Color 3#B9A17C

Color 4#DCC59B

Color 5#F0E0C6

Accessibility

Contrast checker

2.2:1Fail

4.1:1AA18

6:1AA

7.8:1AAA

2.2:1Fail

1.9:1Fail

2.8:1Fail

3.6:1AA18

4.1:1AA18

1.9:1Fail

1.5:1Fail

1.9:1Fail

6:1AA

2.8:1Fail

1.5:1Fail

1.3:1Fail

7.8:1AAA

3.6:1AA18

1.9:1Fail

1.3:1Fail

Similar palettes

More like Woven Basket Texture

Woven Basket Texture

See it in context.

Ready when you are.

Built with Woven Basket Texture.

How to use Woven Basket Texture

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Natural Foundation

Textured Harmony

Gentle Radiance

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Woven Basket Texture