Palette

Woven Seagrass Basket

The warm, earthy tones of dried seagrass, intricately woven into a sturdy, handmade basket.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#CD853F#F4A460#D2B48C#A0522D

Palette guide

How to use Woven Seagrass Basket

Overview

The "Woven Seagrass Basket" palette captures the warm, earthy tones of dried seagrass, intricately woven into sturdy, handmade items. It features a range from the deep, rich #8B4513 to the vibrant, sunny #F4A460. The robust #A0522D provides a solid anchor, while #CD853F offers a versatile mid-tone. A touch of lighter, sandy #D2B48C completes the set, adding a subtle, natural highlight. This palette is perfect for designers aiming to evoke organic warmth, handcrafted quality, and a connection to natural textures, ideal for projects with a rustic or artisanal focus.

Best used for

Coastal-themed brands
Handmade goods e-commerce
Natural beauty product packaging
Summer lifestyle blogs
Rustic restaurant interiors
Outdoor adventure marketing

Suggested color roles

primary

#A0522D - A rich, warm brown, excellent for dominant sections, main headers, or key graphical elements, conveying strength and earthiness.

secondary

#CD853F - A lighter, inviting orange-brown, suitable for secondary content areas, card backgrounds, or supporting design elements, adding depth.

accent

#F4A460 - A bright, cheerful orange, perfect for call-to-action buttons, interactive elements, or vibrant highlights, drawing attention.

background

#D2B48C - A light, sandy beige, providing a soft, natural canvas that allows the richer colors to stand out beautifully.

text

#8B4513 - The darkest shade, offering excellent contrast and readability for body text against lighter backgrounds like #D2B48C or #F4A460.

Accessibility notes

Ensure #8B4513 has strong contrast against #D2B48C and #F4A460 for all text.
#A0522D should also have good contrast for text on #D2B48C.
Avoid using #CD853F for text on #D2B48C due to potential low contrast.
Always verify text and interactive element contrast with accessibility tools to meet WCAG guidelines.

Recommended combinations

Sunny Earth

Creates a vibrant yet grounded aesthetic, perfect for website hero sections, banners, or product highlights.

#D2B48C · #A0522D · #F4A460

Deep Woven

Excellent for adding depth and richness to design elements, such as footers, sidebars, or textured backgrounds.

#8B4513 · #CD853F · #A0522D

Bright Accent

Use the light beige as a background, with the bright orange as a striking accent for buttons, and the deep brown for clear text.

#D2B48C · #F4A460 · #8B4513

CSS variables

:root {
  --woven-seagrass-basket-1: #8B4513;
  --woven-seagrass-basket-2: #CD853F;
  --woven-seagrass-basket-3: #F4A460;
  --woven-seagrass-basket-4: #D2B48C;
  --woven-seagrass-basket-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woven-seagrass-basket": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#F4A460",
        4: "#D2B48C",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#F4A460

Color 4#D2B48C

Color 5#A0522D

Accessibility

Contrast checker

2.4:1Fail

3.5:1AA18

3.6:1AA18

1.3:1Fail

2.4:1Fail

1.5:1Fail

1.9:1Fail

3.5:1AA18

1.5:1Fail

1:1Fail

2.8:1Fail

3.6:1AA18

1.5:1Fail

1:1Fail

2.8:1Fail

1.3:1Fail

1.9:1Fail

2.8:1Fail

Similar palettes

More like Woven Seagrass Basket

Woven Seagrass Basket

See it in context.

Ready when you are.

Built with Woven Seagrass Basket.

How to use Woven Seagrass Basket

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunny Earth

Deep Woven

Bright Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Woven Seagrass Basket