Back to palettes

Palette

Clerestory Beam

Clean, pure whites and subtle greys, reflecting the soft, natural light entering through clerestory windows.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Clerestory Beam 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 Clerestory Beam.

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

Data visualization

#E0E8E8#F0F4F4#FCFCFC#FFFFFF#C0C8C8

Palette guide

How to use Clerestory Beam

Overview

The Clerestory Beam palette captures the essence of soft, natural light, offering a pristine and minimalist aesthetic. Dominated by pure whites like #FFFFFF and #FCFCFC, it's complemented by subtle greys such as #E0E8E8 and #C0C8C8. This collection is ideal for creating clean, airy designs that evoke a sense of architectural purity and serene spaciousness. Designers will find these shades perfect for backgrounds, typography, and UI elements where understated elegance and clarity are paramount, reflecting the quiet sophistication of modern spaces.

Best used for

  • Modern architectural visualizations
  • Minimalist web design and interfaces
  • High-end art gallery branding
  • Clean, corporate identity projects
  • Luxury product packaging
  • Interior design mood boards

Suggested color roles

primary

Use #FFFFFF or #FCFCFC as your main canvas, providing a clean, expansive base for content.

secondary

Employ #F0F4F4 or #E0E8E8 for subtle section breaks, hover states, or background patterns to add depth without distraction.

accent

Apply #C0C8C8 for very fine details, thin lines, or subtle iconography, ensuring a muted accent.

background

Opt for #FFFFFF or #FCFCFC to establish a pristine, airy, and bright environment.

text

For optimal readability, use a dark charcoal or black text color (e.g., #333333) on these very light backgrounds.

Accessibility notes

  • Always ensure sufficient contrast for text, especially when using lighter grey shades.
  • Reserve the darkest grey (#C0C8C8) for interactive elements to improve visibility.
  • Avoid using light grey text on white backgrounds for essential information due to poor readability.
  • Use a contrast checker to verify legibility for all text sizes and weights.

Recommended combinations

Pure & Subtle

Excellent for primary page layouts with a clean white base, soft grey sections, and subtle grey accents.

#FFFFFF · #E0E8E8 · #C0C8C8

Airy Depth

Creates a delicate layering effect, perfect for backgrounds and content blocks that need slight differentiation.

#FCFCFC · #F0F4F4 · #E0E8E8

Crisp Contrast

Ideal for a clean background with the darkest palette grey providing a grounding element or subtle border.

#FFFFFF · #C0C8C8 · #F0F4F4

CSS variables

:root {
  --clerestory-beam-1: #E0E8E8;
  --clerestory-beam-2: #F0F4F4;
  --clerestory-beam-3: #FCFCFC;
  --clerestory-beam-4: #FFFFFF;
  --clerestory-beam-5: #C0C8C8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clerestory-beam": {
        1: "#E0E8E8",
        2: "#F0F4F4",
        3: "#FCFCFC",
        4: "#FFFFFF",
        5: "#C0C8C8",
      }
    }
  }
}

Related searches

minimalist white grey palettearchitectural neutral colorsclean light color schemesubtle grey and white designairy interior palette

Palette colors

Hex values

Color 1#E0E8E8
·
Color 2#F0F4F4
·
Color 3#FCFCFC
·
Color 4#FFFFFF
·
Color 5#C0C8C8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
2
1.1:1Fail
1.1:1Fail
1.1:1Fail
1.5:1Fail
3
1.2:1Fail
1.1:1Fail
1:1Fail
1.7:1Fail
4
1.2:1Fail
1.1:1Fail
1:1Fail
1.7:1Fail
5
1.4:1Fail
1.5:1Fail
1.7:1Fail
1.7:1Fail

Similar palettes

More like Clerestory Beam

View all neutral
Architectural Concrete Edge
Arctic Fox Fur
Arctic Fox Whisper
Calm Interior Lines
Clean Canvas White
Cool Linen Breeze