Palette

Arctic Shore Pebble

A cool, subtle array of grays and whites, reflecting smooth pebbles on an icy shore.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Shore Pebble 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 Arctic Shore Pebble.

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

Data visualization

#5A6D7D#8C9CA6#C2CCD1#DFE4E6#EDF0F2

Palette guide

How to use Arctic Shore Pebble

Overview

The Arctic Shore Pebble palette is a cool, subtle array of grays and whites, reflecting smooth pebbles on an icy shore. It features a grounding dark grey #5A6D7D, a balanced mid-tone #8C9CA6, and lighter shades like #C2CCD1 and #DFE4E6, culminating in the almost-white #EDF0F2. This neutral yet distinctly cool palette is ideal for designers and developers seeking to create sophisticated, clean, and modern aesthetics. It offers excellent versatility for professional interfaces, minimalist branding, or any project where a refined, understated, and timeless feel is desired, allowing content to take center stage.

Best used for

Corporate and professional websites
Modern architecture portfolios
Luxury fashion e-commerce
Minimalist app interfaces
High-end product packaging
Museum or gallery digital presence

Suggested color roles

primary

The deep #5A6D7D serves as a strong primary for foundational elements, headings, or important calls-to-action.

secondary

Use #8C9CA6 for subheadings, secondary information, or to provide a subtle visual break in content.

accent

The lightest shade, #EDF0F2, can act as a clean accent for interactive elements or delicate highlights.

background

Employ #EDF0F2 or #DFE4E6 as a pristine, neutral background, providing a clean canvas for content.

text

For optimal readability, use #5A6D7D for primary text on light backgrounds. Black or very dark charcoal is also highly recommended.

Accessibility notes

Ensure strong contrast between the darker greys (#5A6D7D, #8C9CA6) and the lighter shades (#DFE4E6, #EDF0F2) for text.
Avoid using #C2CCD1 for text against #DFE4E6 due to insufficient contrast for readability.
Verify that all text and interactive element contrasts meet WCAG AA standards, especially for smaller font sizes.
Consider using a slightly darker grey for body text than #8C9CA6 to ensure maximum legibility on all screens.

Recommended combinations

Shoreline Contrast

Excellent for clean layouts, using the dark grey for headings/buttons and the light for content areas.

#5A6D7D · #8C9CA6 · #EDF0F2

Pebble Layers

Ideal for subtle background textures, layered cards, or soft gradients that need to feel clean and airy.

#C2CCD1 · #DFE4E6 · #EDF0F2

Cool Foundation

Use for professional reports or dashboards, where clarity and a calm, authoritative tone are important.

#8C9CA6 · #5A6D7D · #DFE4E6

CSS variables

:root {
  --arctic-shore-pebble-1: #5A6D7D;
  --arctic-shore-pebble-2: #8C9CA6;
  --arctic-shore-pebble-3: #C2CCD1;
  --arctic-shore-pebble-4: #DFE4E6;
  --arctic-shore-pebble-5: #EDF0F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-shore-pebble": {
        1: "#5A6D7D",
        2: "#8C9CA6",
        3: "#C2CCD1",
        4: "#DFE4E6",
        5: "#EDF0F2",
      }
    }
  }
}

Hex values

Color 1#5A6D7D

Color 2#8C9CA6

Color 3#C2CCD1

Color 4#DFE4E6

Color 5#EDF0F2

Accessibility

Contrast checker

1.9:1Fail

3.3:1AA18

4.2:1AA18

4.7:1AA

1.9:1Fail

1.7:1Fail

2.2:1Fail

2.5:1Fail

3.3:1AA18

1.7:1Fail

1.3:1Fail

1.4:1Fail

4.2:1AA18

2.2:1Fail

1.3:1Fail

1.1:1Fail

4.7:1AA

2.5:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Arctic Shore Pebble

View all neutral

Concrete Urbanity Calm

Minimalist Concrete Echo

Quiet Tea Ceremony

Silent Concrete Minimal

Soft Linen Dream

Stone Quarry Mist