Back to palettes

Palette

Bleached Wood Grain

Subtle, natural tones reflecting the pale, textured beauty of sun-bleached wood grains.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bleached Wood Grain 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 Bleached Wood Grain.

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

Data visualization

#F5DEB3#F0E68C#FFE4B5#D2B48C#DEB887

Palette guide

How to use Bleached Wood Grain

Overview

The Bleached Wood Grain palette showcases subtle, natural tones that reflect the pale, textured beauty of sun-bleached wood. Featuring light, earthy hues like #F5DEB3 (Wheat), #F0E68C (Khaki), #FFE4B5 (Moccasin), #D2B48C (Tan), and #DEB887 (BurlyWood), this palette creates a serene, minimalist, and organic aesthetic. It's an excellent choice for designers aiming to evoke a sense of calm, natural simplicity, and rustic elegance. The harmonious blend of light browns and yellows makes it ideal for projects that require a clean, inviting, and timeless visual language.

Best used for

  • Minimalist website designs and blogs
  • Eco-friendly and sustainable branding
  • Rustic home decor and interior design
  • Natural product packaging
  • Photography portfolios and galleries
  • Serene wedding and event stationery

Suggested color roles

primary

Use #D2B48C as a warm, grounding mid-tone for headings or key visual elements, providing subtle structure.

secondary

Employ #F5DEB3 for larger content blocks or panels, offering a light, airy base that enhances readability.

accent

Apply #F0E68C for subtle, warm highlights, decorative elements, or interactive states, adding a touch of natural glow.

background

Choose #F5DEB3 or #FFE4B5 for a clean, natural canvas, creating an expansive and inviting user experience.

text

For optimal readability on these light backgrounds, use a dark brown, charcoal, or #D2B48C for headings.

Accessibility notes

  • Crucially, ensure text has sufficient contrast against these light, low-contrast backgrounds; darker neutrals are essential.
  • Avoid using light text on light backgrounds; always test contrast ratios for all text sizes.
  • Use darker browns like #D2B48C for main body text to ensure legibility.
  • Clearly define interactive elements with distinct color changes or outlines, as subtle differences may be hard to discern.

Recommended combinations

Sun-Kissed Wood

Creates a light, airy base with subtle warmth, ideal for clean backgrounds or soft hero sections.

#F5DEB3 · #FFE4B5 · #F0E68C

Textured Grain

Offers an earthy depth, perfect for simulating wood textures or providing visual structure.

#D2B48C · #DEB887 · #F5DEB3

Minimalist Warmth

Provides a subtle layering effect for elegant branding or refined content blocks.

#FFE4B5 · #D2B48C · #F0E68C

CSS variables

:root {
  --bleached-wood-grain-1: #F5DEB3;
  --bleached-wood-grain-2: #F0E68C;
  --bleached-wood-grain-3: #FFE4B5;
  --bleached-wood-grain-4: #D2B48C;
  --bleached-wood-grain-5: #DEB887;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bleached-wood-grain": {
        1: "#F5DEB3",
        2: "#F0E68C",
        3: "#FFE4B5",
        4: "#D2B48C",
        5: "#DEB887",
      }
    }
  }
}

Related searches

bleached wood colorsnatural neutral palettelight earthy tonesminimalist rustic designorganic color scheme

Palette colors

Hex values

Color 1#F5DEB3
·
Color 2#F0E68C
·
Color 3#FFE4B5
·
Color 4#D2B48C
·
Color 5#DEB887
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.1:1Fail
1.5:1Fail
1.4:1Fail
2
1:1Fail
1:1Fail
1.5:1Fail
1.5:1Fail
3
1.1:1Fail
1:1Fail
1.6:1Fail
1.5:1Fail
4
1.5:1Fail
1.5:1Fail
1.6:1Fail
1.1:1Fail
5
1.4:1Fail
1.5:1Fail
1.5:1Fail
1.1:1Fail

Similar palettes

More like Bleached Wood Grain

View all neutral
Linen Weave
Minimalist Loft White
Adobe Sunstone Hues
Ancient City Ruins
Ancient Rune Stone
Calm Interior Lines