earthymonochrome
Pebble Beach Color Palette
Pebble Beach is a earthy and monochrome color palette of 5 colors: White Smoke (#f4f3ee), Ash Grey (#bcb8b1), Gray (#8a817c), Taupe (#463f3a) and Dusty Rose (#e0afa0). Its dominant hue is red.
The darkest color, Taupe, on the lightest, White Smoke, gives a 9.29:1 contrast ratio — enough for body text at WCAG AAA. 3 pairs in this palette pass AA for normal text. Dusty Rose (#e0afa0) is its most saturated color and a natural choice for buttons and links.
Colors
- White Smoke
- Ash Grey
- Gray
- Taupe
- Dusty Rose
CSS Output
:root {
--pebble-beach-1: #f4f3ee;
--pebble-beach-2: #bcb8b1;
--pebble-beach-3: #8a817c;
--pebble-beach-4: #463f3a;
--pebble-beach-5: #e0afa0;
}Pebble Beach on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Taupe on White Smoke#463f3a on #f4f3ee9.29:1AAA
- Taupe on Dusty Rose#463f3a on #e0afa05.31:1AA
- Taupe on Ash Grey#463f3a on #bcb8b15.22:1AA
- Gray on White Smoke#8a817c on #f4f3ee3.42:1AA Large