Palette

Linen Canvas Grain

A subtle, textured palette inspired by the raw, natural tones of an artist's blank canvas.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Linen Canvas 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 Linen Canvas Grain.

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

Data visualization

#F5F5DC#F0F8FF#DCDCDC#A9A9A9#708090

Palette guide

How to use Linen Canvas Grain

Overview

The 'Linen Canvas Grain' palette offers a sophisticated range of subtle, natural neutrals, perfect for evoking a sense of calm and organic minimalism. With its soft beige #F5F5DC, airy light blue #F0F8FF, versatile light grey #DCDCDC, solid dark grey #A9A9A9, and grounding slate grey #708090, this collection is ideal for designers seeking an understated yet rich foundation. These tones are reminiscent of raw artistic materials, providing a serene backdrop that highlights content without overpowering it. Developers will find these hex codes easy to implement for creating clean, professional interfaces that exude quiet elegance and natural texture.

Best used for

Minimalist website designs
Art gallery or museum branding
Eco-friendly product packaging
Interior design visualization
Serene mobile app interfaces
Editorial layouts for lifestyle blogs

Suggested color roles

primary

#F5F5DC - A warm, creamy off-white, excellent as a primary background for web pages or large content blocks, providing a soft, natural base.

secondary

#F0F8FF - A very light, airy blue, perfect for subtle section separators, inactive states, or as a secondary background to add depth without strong contrast.

accent

#708090 - A deep, calming blue-grey, effective for calls-to-action, important icons, or key graphical elements that need a gentle anchor.

background

#DCDCDC - A clean, light grey, serving as a versatile canvas for user interfaces or as a base for text, offering good readability with darker shades.

text

#A9A9A9 - A mid-tone grey, suitable for secondary text, captions, or placeholder text. For primary body text, consider a darker grey or charcoal for better readability.

Accessibility notes

Ensure sufficient contrast when pairing lighter colors like #F5F5DC or #F0F8FF with text; darker text is often required.
Use #A9A9A9 for large text or decorative elements, but prefer darker shades like black or very dark grey for essential body text.
Pair #708090 with light backgrounds (e.g., #F5F5DC) for good contrast on interactive elements.
Avoid using #DCDCDC as a text color on #F0F8FF as the contrast will be extremely low.

Recommended combinations

Earthy Base

Ideal for foundational layouts, backgrounds, and subtle branding elements.

#F5F5DC · #DCDCDC · #A9A9A9

Cool Contrast

Creates a refreshing, calm aesthetic, suitable for headers, navigation, and interactive components.

#F0F8FF · #708090 · #DCDCDC

Depth & Detail

Provides strong contrast for text, icons, and calls-to-action against a soft background.

#A9A9A9 · #708090 · #F5F5DC

CSS variables

:root {
  --linen-canvas-grain-1: #F5F5DC;
  --linen-canvas-grain-2: #F0F8FF;
  --linen-canvas-grain-3: #DCDCDC;
  --linen-canvas-grain-4: #A9A9A9;
  --linen-canvas-grain-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "linen-canvas-grain": {
        1: "#F5F5DC",
        2: "#F0F8FF",
        3: "#DCDCDC",
        4: "#A9A9A9",
        5: "#708090",
      }
    }
  }
}

Hex values

Color 1#F5F5DC

Color 2#F0F8FF

Color 3#DCDCDC

Color 4#A9A9A9

Color 5#708090

Accessibility

Contrast checker

1:1Fail

1.2:1Fail

2.1:1Fail

3.7:1AA18

1:1Fail

1.3:1Fail

2.2:1Fail

3.8:1AA18

1.2:1Fail

1.3:1Fail

1.7:1Fail

3:1Fail

2.1:1Fail

2.2:1Fail

1.7:1Fail

3.7:1AA18

3.8:1AA18

3:1Fail

1.7:1Fail

Similar palettes

More like Linen Canvas Grain

Linen Canvas Grain

See it in context.

Ready when you are.

Built with Linen Canvas Grain.

How to use Linen Canvas Grain

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Earthy Base

Cool Contrast

Depth & Detail

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Linen Canvas Grain