Back to palettes

Palette

Forest Bark Texture

The rugged, textured browns and greys of tree bark in an ancient forest, providing a sense of grounding and strength.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Forest Bark 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 Forest Bark Texture.

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

Data visualization

#4A3E3E#6B5B5B#8C7B7B#2D2525#B1A49B

Palette guide

How to use Forest Bark Texture

Overview

The Forest Bark Texture palette captures the rugged, grounded essence of ancient tree bark with its rich blend of textured browns and muted grays. From the deep, foundational #2D2525 to the warm, inviting #B1A49B, and the mid-tone #6B5B5B, this collection exudes strength, authenticity, and natural elegance. Designers and developers will find these hues exceptional for creating sophisticated, minimalist designs, rustic websites, or branding that emphasizes durability and a connection to natural elements. The palette's earthy tones provide a sturdy, comforting foundation for projects seeking a grounded yet refined aesthetic.

Best used for

  • Masculine and sophisticated brands
  • Natural product packaging
  • Rustic and minimalist websites
  • Interior design (wood, stone themes)
  • Historical or heritage branding
  • Photography portfolios with natural themes

Suggested color roles

primary

Use #2D2525 as a deep, foundational brown-gray for strong headers, main navigation, or immersive backgrounds.

secondary

Employ #4A3E3E for supporting content blocks, subheadings, or to add subtle depth to UI elements.

accent

Apply #8C7B7B for subtle highlights, decorative elements, or to create a gentle contrast on darker tones.

background

Utilize #B1A49B as a light, textured base for main content, offering a soft, natural canvas.

text

For optimal readability, use #2D2525 or a deep charcoal/black for body text on lighter backgrounds like #B1A49B.

Accessibility notes

  • Ensure #2D2525 text on #B1A49B background meets WCAG AAA contrast for excellent readability.
  • Test #6B5B5B on #B1A49B carefully for body text contrast; it may be better suited for larger headings.
  • Avoid using #8C7B7B as text on #B1A49B due to insufficient contrast; reserve it for decorative elements.
  • Use darker shades like #2D2525 and #4A3E3E for critical information and interactive elements.

Recommended combinations

Deep Bark

Ideal for elegant dark mode UI, sophisticated branding, and strong visual hierarchy.

#2D2525 · #4A3E3E · #B1A49B

Muted Woods

Perfect for soft background textures, subtle UI elements, and natural photography backdrops.

#6B5B5B · #8C7B7B · #B1A49B

Textured Ground

Excellent for layered graphics, section dividers, and creating depth in minimalist designs.

#2D2525 · #6B5B5B · #8C7B7B

CSS variables

:root {
  --forest-bark-texture-1: #4A3E3E;
  --forest-bark-texture-2: #6B5B5B;
  --forest-bark-texture-3: #8C7B7B;
  --forest-bark-texture-4: #2D2525;
  --forest-bark-texture-5: #B1A49B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-bark-texture": {
        1: "#4A3E3E",
        2: "#6B5B5B",
        3: "#8C7B7B",
        4: "#2D2525",
        5: "#B1A49B",
      }
    }
  }
}

Related searches

dark brown gray palettenatural bark colorsrustic earth tonesmuted forest designtextured neutral palette

Palette colors

Hex values

Color 1#4A3E3E
·
Color 2#6B5B5B
·
Color 3#8C7B7B
·
Color 4#2D2525
·
Color 5#B1A49B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
1.5:1Fail
4.2:1AA18
2
1.6:1Fail
1.6:1Fail
2.3:1Fail
2.6:1Fail
3
2.6:1Fail
1.6:1Fail
3.7:1AA18
1.7:1Fail
4
1.5:1Fail
2.3:1Fail
3.7:1AA18
6.2:1AA
5
4.2:1AA18
2.6:1Fail
1.7:1Fail
6.2:1AA

Similar palettes

More like Forest Bark Texture

View all earth