Palette

Raw Earth Pigments

A foundational palette drawn from the unrefined, grounding tones of raw earth pigments.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Raw Earth Pigments 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 Raw Earth Pigments.

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

Data visualization

#5A5A5A#7D7D7D#A3A3A3#C8C8C8#E3E3E3

Palette guide

How to use Raw Earth Pigments

Overview

The Raw Earth Pigments palette offers a foundational collection of versatile grays, inspired by natural, unrefined tones. Ranging from the deep #5A5A5A to the light #E3E3E3, with intermediate shades like #7D7D7D, #A3A3A3, and #C8C8C8, it provides a perfect spectrum for minimalist and elegant designs. This palette is incredibly useful for designers and developers seeking a clean, understated aesthetic that allows content to take center stage. Its neutrality makes it an excellent choice for corporate websites, minimalist portfolios, or as a sophisticated base for incorporating vibrant accent colors. These reliable hex codes ensure consistency across various platforms.

Best used for

Minimalist website and app design
Corporate branding and professional presentations
Architectural visualization and interior design concepts
Photography portfolios (as a neutral backdrop)
E-commerce sites for high-end, understated products
Print materials requiring a clean, modern aesthetic

Suggested color roles

primary

Use #5A5A5A as a strong, grounding base for backgrounds or main content areas, providing a modern, stable feel.

secondary

Employ #7D7D7D for secondary containers, navigation, or subtle dividers, maintaining a cohesive neutral look.

accent

While truly neutral, #C8C8C8 can serve as a soft accent for interactive states or subtle highlights on darker grays.

background

The lightest shade, #E3E3E3, is ideal for clean, breathable backgrounds that offer excellent readability for dark text.

text

For optimal contrast, use #5A5A5A or #7D7D7D for text on lighter backgrounds. For darker backgrounds, white or near-white text is recommended.

Accessibility notes

Ensure sufficient contrast when using mid-tone grays like #A3A3A3 for text against #E3E3E3 backgrounds.
The darkest shades (#5A5A5A, #7D7D7D) provide excellent contrast for white or light gray text.
Avoid using two very similar grays (e.g., #C8C8C8 and #E3E3E3) for adjacent elements if clear separation is needed.
Consider WCAG guidelines for text on interactive elements, ensuring adequate contrast for various states.

Recommended combinations

Clean Base

Excellent for primary page layouts, offering a light background with strong, readable dark text and a subtle secondary.

#E3E3E3 · #5A5A5A · #A3A3A3

Layered Neutral

Creates depth in UI elements like cards or modals, with a clear hierarchy of shades.

#7D7D7D · #C8C8C8 · #5A5A5A

Subtle Contrast

Useful for secondary information or dividers where a gentle visual separation is desired without harshness.

#A3A3A3 · #E3E3E3 · #7D7D7D

CSS variables

:root {
  --raw-earth-pigments-1: #5A5A5A;
  --raw-earth-pigments-2: #7D7D7D;
  --raw-earth-pigments-3: #A3A3A3;
  --raw-earth-pigments-4: #C8C8C8;
  --raw-earth-pigments-5: #E3E3E3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "raw-earth-pigments": {
        1: "#5A5A5A",
        2: "#7D7D7D",
        3: "#A3A3A3",
        4: "#C8C8C8",
        5: "#E3E3E3",
      }
    }
  }
}

Hex values

Color 1#5A5A5A

Color 2#7D7D7D

Color 3#A3A3A3

Color 4#C8C8C8

Color 5#E3E3E3

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4.1:1AA18

5.4:1AA

1.7:1Fail

1.6:1Fail

2.5:1Fail

3.2:1AA18

2.7:1Fail

1.6:1Fail

1.5:1Fail

2:1Fail

4.1:1AA18

2.5:1Fail

1.5:1Fail

1.3:1Fail

5.4:1AA

3.2:1AA18

2:1Fail

1.3:1Fail

Similar palettes

More like Raw Earth Pigments

Cloudy Cobblestone Lane

Dusky Harbor Stone