Palette

Zen Cairn Sands

A harmonious selection of subtle greys, reflecting the peaceful simplicity of a raked zen garden.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Zen Cairn Sands 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 Zen Cairn Sands.

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

Data visualization

#778899#A9A9A9#D3D3D3#46505A#C0C0C0

Palette guide

How to use Zen Cairn Sands

Overview

The Zen Cairn Sands palette presents a harmonious selection of subtle grays, reflecting the peaceful simplicity of a raked zen garden. From the deep #46505A and the balanced #778899, it transitions through the versatile #A9A9A9 and the soft #C0C0C0, culminating in the airy #D3D3D3. This monochrome palette is an exceptional choice for designers and developers seeking to create clean, sophisticated, and minimalist experiences. Its range of grays allows for elegant depth and subtle contrast, making it highly adaptable for corporate branding, modern web interfaces, or any project where a sense of calm, precision, and understated elegance is paramount.

Best used for

Corporate and professional websites
Minimalist UI/UX design
High-tech product branding
Architectural and interior design portfolios
Photography and art gallery sites
Luxury brand packaging

Suggested color roles

primary

Utilize #46505A (Dark Slate Gray) as a strong, sophisticated primary color for impactful elements like headers, navigation, or dominant brand features.

secondary

Employ #778899 (Light Slate Gray) for supporting content areas, subheadings, or as a balanced complementary tone that maintains elegance.

accent

Introduce #A9A9A9 (Dark Gray) for subtle accents, interactive states, or to add a touch of definition without disrupting the calm aesthetic.

background

Choose #D3D3D3 (Light Gray) as a clean, expansive background that creates a sense of openness and allows darker elements to stand out crisply.

text

For optimal readability, #46505A (Dark Slate Gray) or a pure black provides excellent contrast for body text against lighter backgrounds like #D3D3D3. #778899 also works well.

Accessibility notes

Ensure sufficient contrast when using #C0C0C0 (Silver) text on #D3D3D3 (Light Gray) backgrounds, especially for smaller fonts.
#46505A (Dark Slate Gray) provides excellent readability for text against #D3D3D3 (Light Gray) and #C0C0C0 (Silver) backgrounds.
Avoid using #D3D3D3 (Light Gray) text directly on white or very light backgrounds due to low visibility and poor contrast.
For interactive elements, use #46505A or #778899 on #D3D3D3 to ensure clear visibility and user interaction.

Recommended combinations

Rock Solid

A robust combination for branding, pairing a deep gray with a light background and a balanced mid-tone for professionalism and clarity.

#46505A · #D3D3D3 · #778899

Cairn Layers

Creates a smooth, monochromatic gray gradient, ideal for backgrounds, subtle textures, or visual depth in minimalist designs.

#778899 · #A9A9A9 · #C0C0C0

Zen Highlight

Perfect for clean, minimalist interfaces, leveraging a strong dark gray with a very light background and a subtle accent for focus.

#46505A · #D3D3D3 · #A9A9A9

CSS variables

:root {
  --zen-cairn-sands-1: #778899;
  --zen-cairn-sands-2: #A9A9A9;
  --zen-cairn-sands-3: #D3D3D3;
  --zen-cairn-sands-4: #46505A;
  --zen-cairn-sands-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-cairn-sands": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#46505A",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#778899

Color 2#A9A9A9

Color 3#D3D3D3

Color 4#46505A

Color 5#C0C0C0

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

2.3:1Fail

2:1Fail

1.5:1Fail

1.6:1Fail

3.5:1AA18

1.3:1Fail

2.4:1Fail

1.6:1Fail

5.5:1AA

1.2:1Fail