Palette

Marble Dream

Sophisticated greys and whites that emulate the classic, cool beauty and intricate patterns of marble.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Marble Dream 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 Marble Dream.

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

Data visualization

#2C3E50#ECF0F1#BDC3C7#95A5A6#34495E

Palette guide

How to use Marble Dream

Overview

The Marble Dream palette presents sophisticated greys and whites that emulate the classic, cool beauty and intricate patterns of marble. This elegant collection features a very light, almost white (#ECF0F1) for a clean base, complemented by subtle medium greys (#BDC3C7, #95A5A6). Deeper, strong blue-greys (#2C3E50, #34495E) provide essential contrast and a modern, architectural feel. Designers and developers will find this palette excellent for creating minimalist, elegant, and professional designs, perfect for corporate websites, luxury branding, or clean user interfaces where sophistication and clarity are paramount.

Best used for

Luxury branding and high-end product design
Corporate websites and professional service platforms
Modern architecture and interior design presentations
Minimalist user interfaces and clean app designs
Art gallery or museum exhibition graphics
Elegant fashion or jewelry e-commerce sites

Suggested color roles

primary

Utilize #34495E (Dark Blue-Grey) for strong headings, key navigational elements, or brand logos to establish a modern, authoritative presence.

secondary

Employ #95A5A6 (Cadet Blue) for supporting content, secondary buttons, or subtle borders, offering a balanced and elegant contrast.

accent

Apply #2C3E50 (Midnight Blue) for impactful accents, interactive states, or deep shadows to add depth and sophistication.

background

Designate #ECF0F1 (Light Grey) as the primary background color, providing a clean, airy, and expansive canvas that highlights content.

text

Choose #2C3E50 (Midnight Blue) for body text and crucial information, ensuring excellent readability and a refined, professional aesthetic.

Accessibility notes

Ensure #2C3E50 text on #ECF0F1 or #BDC3C7 backgrounds meets WCAG contrast standards for clear readability.
Avoid using #BDC3C7 or #95A5A6 for small text on #ECF0F1 as contrast may be insufficient.
The darker blue-greys (#2C3E50, #34495E) offer optimal contrast for all essential text against lighter backgrounds.
For headings in #34495E, ensure sufficient background luminance to maintain legibility and visual impact.

Recommended combinations

Modern Elegance

Ideal for clean website headers, corporate presentations, or minimalist app interfaces requiring sophistication.

#34495E · #ECF0F1 · #95A5A6

Sculpted Contrast

Excellent for creating depth in UI elements, card designs, or subtle background variations with strong text contrast.

#2C3E50 · #BDC3C7 · #ECF0F1

Cool Serenity

Soft and professional, perfect for informational panels, secondary navigation, or creating a serene user experience.

#95A5A6 · #ECF0F1 · #34495E

CSS variables

:root {
  --marble-dream-1: #2C3E50;
  --marble-dream-2: #ECF0F1;
  --marble-dream-3: #BDC3C7;
  --marble-dream-4: #95A5A6;
  --marble-dream-5: #34495E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "marble-dream": {
        1: "#2C3E50",
        2: "#ECF0F1",
        3: "#BDC3C7",
        4: "#95A5A6",
        5: "#34495E",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#ECF0F1

Color 3#BDC3C7

Color 4#95A5A6

Color 5#34495E

Accessibility

Contrast checker

9.6:1AAA

6.2:1AA

4.3:1AA18

1.2:1Fail

9.6:1AAA

1.6:1Fail

2.2:1Fail

8.1:1AAA

6.2:1AA

1.6:1Fail

1.4:1Fail

5.2:1AA