Palette

Gneiss Strata

Layered greys with a subtle cool undertone, reflecting the banded textures of gneiss rock strata.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gneiss Strata 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 Gneiss Strata.

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

Data visualization

#3C4A4A#6E7D7D#A3B2B2#D2E0E0#2E3A3A

Palette guide

How to use Gneiss Strata

Overview

The "Gneiss Strata" palette offers a sophisticated range of cool, layered greys, inspired by natural rock formations. With shades spanning from the deep `#2E3A3A` to the light `#D2E0E0`, and mid-tones like `#6E7D7D` and `#A3B2B2`, this palette provides a versatile foundation for minimalist and elegant designs. Its subtle cool undertone makes it perfect for creating a sense of calm, professionalism, and understated luxury. Designers can utilize this palette for clean interfaces, architectural visualizations, or branding that emphasizes stability and timelessness, with `#3C4A4A` offering solid depth.

Best used for

Corporate and professional websites
Architectural and interior design presentations
Minimalist branding and packaging
Tech and software UI/UX design
Photography portfolios and galleries
Luxury product marketing

Suggested color roles

primary

Use `#3C4A4A` for main headers, prominent UI elements, or as a strong brand anchor, providing depth and professionalism.

secondary

Employ `#6E7D7D` for supporting content, subheadings, or secondary navigation, offering a balanced mid-tone.

accent

Utilize `#A3B2B2` for subtle accents, inactive states, or to add a refined textural contrast within the grey scale.

background

The light `#D2E0E0` serves as an excellent clean and airy background, ensuring content stands out clearly.

text

Choose `#2E3A3A` for primary body text against lighter backgrounds like `#D2E0E0` to ensure optimal readability and a cohesive look.

Accessibility notes

Ensure sufficient contrast between text and background, particularly when using `#A3B2B2` or `#6E7D7D` for text on lighter backgrounds.
The lighter shades like `#D2E0E0` may require very dark text (e.g., `#2E3A3A` or black) to meet WCAG contrast guidelines.
Avoid using similar mid-tones (e.g., `#6E7D7D` and `#A3B2B2`) for adjacent interactive elements to prevent confusion.
Test all color combinations across different screen types and lighting conditions for consistent legibility.

Recommended combinations

Clean Professional

A light background with dark text and a mid-grey for secondary elements, ideal for corporate sites.

#D2E0E0 · #3C4A4A · #6E7D7D

Subtle Depth

Creates a sophisticated, layered effect suitable for background graphics or complex data visualizations.

#2E3A3A · #A3B2B2 · #6E7D7D

Minimalist UI

Provides a clean, uncluttered look for user interfaces with clear hierarchy.

#D2E0E0 · #A3B2B2 · #3C4A4A

CSS variables

:root {
  --gneiss-strata-1: #3C4A4A;
  --gneiss-strata-2: #6E7D7D;
  --gneiss-strata-3: #A3B2B2;
  --gneiss-strata-4: #D2E0E0;
  --gneiss-strata-5: #2E3A3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gneiss-strata": {
        1: "#3C4A4A",
        2: "#6E7D7D",
        3: "#A3B2B2",
        4: "#D2E0E0",
        5: "#2E3A3A",
      }
    }
  }
}

Hex values

Color 1#3C4A4A

Color 2#6E7D7D

Color 3#A3B2B2

Color 4#D2E0E0

Color 5#2E3A3A

Accessibility

Contrast checker

2.2:1Fail

4.2:1AA18

6.8:1AA

1.3:1Fail

2.2:1Fail

2:1Fail

3.2:1AA18

2.7:1Fail

4.2:1AA18

2:1Fail

1.6:1Fail

5.4:1AA

6.8:1AA

3.2:1AA18

1.6:1Fail

8.7:1AAA

1.3:1Fail

2.7:1Fail

5.4:1AA

8.7:1AAA

Similar palettes

More like Gneiss Strata