Back to palettes

Palette

Pebble Beach Monochrome

A range of sophisticated greys reflecting the smooth, cool stones of a windswept beach.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pebble Beach Monochrome 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 Pebble Beach Monochrome.

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

Data visualization

#4A4A4A#7A7A7A#AFAFAF#D9D9D9#F2F2F2

Palette guide

How to use Pebble Beach Monochrome

Overview

The Pebble Beach Monochrome palette offers a sophisticated range of grays, reflecting the smooth, cool stones of a windswept beach. From the deep #4A4A4A to the airy #F2F2F2, with balanced mid-tones like #7A7A7A and #AFAFAF, this collection provides designers and developers with a versatile foundation for minimalist and modern aesthetics. It's ideal for creating clean user interfaces, robust branding, and impactful visual content where clarity and understated elegance are paramount. The inherent monochrome nature ensures seamless harmony across all elements, allowing focus on typography, layout, and imagery. This palette is perfect for conveying a sense of calm, precision, and timeless style.

Best used for

  • Modern architecture and interior design
  • Tech dashboards and web applications
  • Industrial design and product visualization
  • Minimalist brand identity
  • Photography portfolio websites
  • Clean, professional corporate reports

Suggested color roles

primary

Use #7A7A7A as a balanced, solid foundation for main content areas or prominent design elements, offering clarity.

secondary

Employ #AFAFAF for supporting content, navigation, or secondary backgrounds, providing a lighter contrast.

accent

Apply #4A4A4A for strong emphasis, calls to action, or deep textual elements, ensuring maximum impact.

background

Utilize #F2F2F2 as a crisp, clean background for content areas, enhancing readability and a modern feel.

text

For body text, use #4A4A4A or #7A7A7A on lighter backgrounds to ensure optimal legibility and a sophisticated look.

Accessibility notes

  • Ensure strong contrast between text and background, especially for #D9D9D9 on #F2F2F2; use darker grays for body text.
  • Reserve #4A4A4A for critical text and interactive elements to meet WCAG AA contrast standards.
  • Provide clear visual cues for focus and hover states, as the monochrome nature requires clear differentiation.
  • Avoid using very similar shades for foreground and background elements to prevent visual ambiguity.

Recommended combinations

Clean Base

Excellent for creating light, airy backgrounds, layered panels, or subtle distinctions in UI elements.

#F2F2F2 · #D9D9D9 · #AFAFAF

Deep Contrast

Ideal for establishing strong hierarchy, such as dark headings, primary buttons, or content areas against a lighter backdrop.

#4A4A4A · #7A7A7A · #AFAFAF

Smooth Gradient

Perfect for visual elements that require a smooth, natural transition of tone, like charts or background patterns.

#D9D9D9 · #AFAFAF · #7A7A7A

CSS variables

:root {
  --pebble-beach-monochrome-1: #4A4A4A;
  --pebble-beach-monochrome-2: #7A7A7A;
  --pebble-beach-monochrome-3: #AFAFAF;
  --pebble-beach-monochrome-4: #D9D9D9;
  --pebble-beach-monochrome-5: #F2F2F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pebble-beach-monochrome": {
        1: "#4A4A4A",
        2: "#7A7A7A",
        3: "#AFAFAF",
        4: "#D9D9D9",
        5: "#F2F2F2",
      }
    }
  }
}

Related searches

monochrome grey paletteminimalist stone colorssophisticated neutral designpebble texture colorscool grey branding

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#7A7A7A
·
Color 3#AFAFAF
·
Color 4#D9D9D9
·
Color 5#F2F2F2
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4:1AA18
6.3:1AA
7.9:1AAA
2
2.1:1Fail
2:1Fail
3:1AA18
3.8:1AA18
3
4:1AA18
2:1Fail
1.6:1Fail
2:1Fail
4
6.3:1AA
3:1AA18
1.6:1Fail
1.3:1Fail
5
7.9:1AAA
3.8:1AA18
2:1Fail
1.3:1Fail

Similar palettes

More like Pebble Beach Monochrome

View all monochrome
Monochromatic Granite
Basalt Stream Pebble
Beach Stone Sketch
Calm Stone Meditate
Granite Peak Twilight
Grey Scale Journey