Back to palettes

Palette

Quiet Loft Space

A serene, crisp collection of whites and grays, perfect for a peaceful and minimalist interior.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Quiet Loft Space 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 Quiet Loft Space.

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

Data visualization

#F7F7F7#E0E0E0#CCCCCC#B3B3B3#999999

Palette guide

How to use Quiet Loft Space

Overview

The Quiet Loft Space palette is a serene, crisp collection of whites and grays, perfect for a peaceful and minimalist interior. Ranging from the bright #F7F7F7 to the deep #999999, this monochrome scheme offers elegance and sophistication. Designers can leverage these hex codes to create clean, modern environments that emphasize spaciousness and clarity. Developers will find this palette excellent for building minimalist UI/UX designs, ensuring a sleek and professional user experience. The subtle variations in gray, including #E0E0E0, #CCCCCC, and #B3B3B3, provide ample choices for depth and hierarchy without introducing distracting colors.

Best used for

  • Modern architecture and interior design portfolios
  • Minimalist e-commerce websites
  • High-tech startup branding
  • Clean UI/UX design for web and mobile apps
  • Luxury lifestyle and fashion brands
  • Corporate websites requiring a professional, understated look

Suggested color roles

primary

Use #E0E0E0 as a light, versatile neutral for main content panels or secondary backgrounds.

secondary

Employ #CCCCCC for supporting elements, sub-headers, or subtle dividers, providing a balanced mid-grey.

accent

Apply #999999 sparingly for strong contrasts, icons, or calls-to-action, adding depth and grounding.

background

The bright #F7F7F7 serves as an excellent, clean background, ensuring optimal readability for darker text.

text

Utilize #999999 for primary text, offering superb legibility against lighter backgrounds like #F7F7F7, or a true black for maximum contrast.

Accessibility notes

  • Ensure #999999 text has strong contrast against #F7F7F7, meeting WCAG AA requirements for all text sizes.
  • Avoid using #B3B3B3 or #CCCCCC for small text on #F7F7F7 backgrounds; contrast may be insufficient.
  • When placing #E0E0E0 on #F7F7F7, ensure it's only for large decorative elements, not readable text.
  • For critical information, consider using a pure black text on #F7F7F7 for maximum readability and accessibility.

Recommended combinations

Clean Lines

Creates subtle layering for UI elements, perfect for cards or sections where depth is achieved through slight shade differences.

#F7F7F7 · #E0E0E0 · #CCCCCC

Urban Edge

Excellent for defining stronger contrasts, like headings or important buttons, maintaining a modern feel.

#B3B3B3 · #999999 · #F7F7F7

Minimal Core

Provides a balanced, professional look for content blocks, using #E0E0E0 as a base and #999999 for key text.

#E0E0E0 · #CCCCCC · #999999

CSS variables

:root {
  --quiet-loft-space-1: #F7F7F7;
  --quiet-loft-space-2: #E0E0E0;
  --quiet-loft-space-3: #CCCCCC;
  --quiet-loft-space-4: #B3B3B3;
  --quiet-loft-space-5: #999999;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-loft-space": {
        1: "#F7F7F7",
        2: "#E0E0E0",
        3: "#CCCCCC",
        4: "#B3B3B3",
        5: "#999999",
      }
    }
  }
}

Related searches

minimalist grey palettemodern white greyclean UI colorsmonochrome neutralloft interior design

Palette colors

Hex values

Color 1#F7F7F7
·
Color 2#E0E0E0
·
Color 3#CCCCCC
·
Color 4#B3B3B3
·
Color 5#999999
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2:1Fail
2.7:1Fail
2
1.2:1Fail
1.2:1Fail
1.6:1Fail
2.2:1Fail
3
1.5:1Fail
1.2:1Fail
1.3:1Fail
1.8:1Fail
4
2:1Fail
1.6:1Fail
1.3:1Fail
1.4:1Fail
5
2.7:1Fail
2.2:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Quiet Loft Space

View all monochrome
Minimal Loft Living
Minimalist Loft Space
Monochromatic Ink Wash
Monochrome Slate
Abstract Canvas Swirl
Abstract Ink Flow