Palette

Jute Fibre

Warm, natural browns and tans, evoking the raw, earthy texture and color of jute fibers.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jute Fibre 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 Jute Fibre.

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

Data visualization

#9A7F66#C7A68C#EAD5C2#FBF5EF#7C6652

Palette guide

How to use Jute Fibre

Overview

The Jute Fibre palette captures the raw, earthy texture and warm, natural browns and tans of its namesake. Featuring the deep #7C6652, rich #9A7F66, and lighter #C7A68C, this collection grounds any design in organic authenticity. The airy #EAD5C2 and near-white #FBF5EF provide essential lightness, mimicking unbleached fibers. Designers and developers can utilize this palette to craft inviting, sustainable, and rustic interfaces or branding. It’s perfect for projects that aim to convey natural materials, handmade quality, or an eco-conscious ethos, offering a timeless and comforting visual experience.

Best used for

Eco-friendly product packaging and branding
Craft and artisanal goods websites
Rustic interior design inspirations
Sustainable fashion collections
Natural food and beverage marketing
Blog or portfolio sites with an organic aesthetic

Suggested color roles

primary

Designate #7C6652 as the grounding force for main headings, navigation, or strong brand elements, providing a rich, deep base.

secondary

Employ #9A7F66 for supporting content, subheadings, or as a background for sections that require a warm, mid-tone presence.

accent

Introduce #C7A68C for subtle highlights, decorative patterns, or interactive elements that need a gentle, inviting lift.

background

Utilize #FBF5EF as a clean, airy background, offering maximum readability and a fresh, uncluttered feel.

text

For text on lighter backgrounds, #7C6652 or a deep charcoal black ensures excellent readability. On darker shades like #7C6652, white text provides clear contrast.

Accessibility notes

Ensure dark text (e.g., #7C6652 or black) is used on #FBF5EF and #EAD5C2 for optimal readability and WCAG compliance.
White text on #7C6652 and #9A7F66 will provide strong contrast and be easily readable.
Exercise caution when using #C7A68C for text on #EAD5C2 or #FBF5EF, as the contrast may be insufficient; always verify.
Prioritize clear contrast for all interactive elements to ensure usability, especially for buttons and links.

Recommended combinations

Natural Base

Ideal for a strong dark header, a clean light background, and a warm mid-tone for supporting content or borders.

#7C6652 · #FBF5EF · #9A7F66

Fibre Texture

Layer these browns and tans for content cards or textured backgrounds, creating depth and a natural, tactile feel.

#9A7F66 · #C7A68C · #EAD5C2

Earthy Warmth

Use the deepest shade for primary text, the lightest for the background, and the warm mid-tone for inviting accents.

#7C6652 · #FBF5EF · #C7A68C

CSS variables

:root {
  --jute-fibre-1: #9A7F66;
  --jute-fibre-2: #C7A68C;
  --jute-fibre-3: #EAD5C2;
  --jute-fibre-4: #FBF5EF;
  --jute-fibre-5: #7C6652;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jute-fibre": {
        1: "#9A7F66",
        2: "#C7A68C",
        3: "#EAD5C2",
        4: "#FBF5EF",
        5: "#7C6652",
      }
    }
  }
}

Hex values

Color 1#9A7F66

Color 2#C7A68C

Color 3#EAD5C2

Color 4#FBF5EF

Color 5#7C6652

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

3.5:1AA18

1.4:1Fail

1.7:1Fail

1.6:1Fail

2.1:1Fail

2.4:1Fail

2.6:1Fail

1.6:1Fail

1.3:1Fail

3.8:1AA18