Palette

Woven Canvas Hues

A sophisticated palette of soft, muted tones, evoking the serene and subtle beauty of aged linen fabrics.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Woven Canvas Hues 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 Canvas Hues.

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

Data visualization

#4A6B7C#7B9A9A#B3C1BF#E6E6E1#5A5A52

Palette guide

How to use Woven Canvas Hues

Overview

The "Woven Canvas Hues" palette presents a sophisticated collection of soft, muted tones, reminiscent of elegant aged linen fabrics. Key hex codes include #4A6B7C (a deep, muted teal-grey), #7B9A9A (a calming sage-grey), and #E6E6E1 (a subtle, near-white linen). This palette is perfect for designers aiming to create serene, understated, and refined aesthetics. Its gentle contrasts and harmonious blend evoke a sense of calm sophistication, making it highly versatile for both modern and classic design applications in digital interfaces, print, or branding projects.

Best used for

High-end minimalist branding
Elegant lifestyle websites
Interior design portfolios
Sophisticated editorial layouts
Luxury product packaging
Serene app interfaces

Suggested color roles

primary

Use #4A6B7C as a deep, sophisticated teal-grey, excellent for brand logos, main headings, or strong, elegant statements.

secondary

Apply #7B9A9A, a calming sage-grey, for subheadings, navigation, or larger content blocks, providing a soft, refined feel.

accent

Utilize #5A5A52, a deep, earthy grey, perfect for subtle highlights, interactive elements, or adding grounded detail.

background

Employ #E6E6E1, a very soft, near-white linen tone, providing a clean, expansive, and tranquil canvas.

text

For primary body text, use #4A6B7C or black, ensuring excellent readability against the lighter backgrounds.

Accessibility notes

Ensure #4A6B7C text on #E6E6E1 background meets WCAG AA contrast for readability.
Avoid placing #B3C1BF text on #7B9A9A as contrast will be insufficient for most uses.
Use #5A5A52 for important text elements or headings against very light backgrounds.
Consider using a darker text color like charcoal for any copy placed on #B3C1BF to improve legibility.

Recommended combinations

Elegant Core

Creates a sophisticated, calm, and minimalist brand identity with a refined touch.

#4A6B7C · #E6E6E1 · #7B9A9A

Soft Depth

Ideal for layered backgrounds, subtle UI components, or decorative elements.

#7B9A9A · #B3C1BF · #5A5A52

Muted Contrast

Offers a clean look with understated yet effective contrast for a modern aesthetic.

#E6E6E1 · #5A5A52 · #4A6B7C

CSS variables

:root {
  --woven-canvas-hues-1: #4A6B7C;
  --woven-canvas-hues-2: #7B9A9A;
  --woven-canvas-hues-3: #B3C1BF;
  --woven-canvas-hues-4: #E6E6E1;
  --woven-canvas-hues-5: #5A5A52;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woven-canvas-hues": {
        1: "#4A6B7C",
        2: "#7B9A9A",
        3: "#B3C1BF",
        4: "#E6E6E1",
        5: "#5A5A52",
      }
    }
  }
}

Hex values

Color 1#4A6B7C

Color 2#7B9A9A

Color 3#B3C1BF

Color 4#E6E6E1

Color 5#5A5A52

Accessibility

Contrast checker

1.9:1Fail

3.1:1AA18

4.6:1AA

1.2:1Fail

1.9:1Fail

1.6:1Fail

2.4:1Fail

2.3:1Fail

3.1:1AA18

1.6:1Fail

1.5:1Fail

3.7:1AA18

4.6:1AA

2.4:1Fail

1.5:1Fail

5.6:1AA

1.2:1Fail

2.3:1Fail

3.7:1AA18

5.6:1AA

Similar palettes

More like Woven Canvas Hues

View all neutral

Cashmere Cloud

Vintage Linen Charm

Ancient Marble Sculpture

Ancient Papyrus Scrolls

Antique Parchment Quill

Antique Silk Damask