River Pebble color palette
Smooth stones at the waterline, from bleached shell #F9F7F4 through sand beige and taupe to a dark wet-stone gray, #5C524B. The colors are warm but barely saturated, so they behave like neutrals. The dark end is deep enough for text, so you don't need to add black. A day spa or an interior designer's portfolio would look right in it.
River Pebble palette in use
Use #F9F7F4 for the page, #E8E3DC for cards, and #5C524B for text. #9B8F84 suits buttons and icons, and #C8BDB2 borders and dividers.
This pair measures 7.10:1, so it works for body text too. The button uses #9B8F84 with black text.
ButtonGood for
- Day spa website
- Interior design studio
- Organic skincare packaging
- Minimal blog theme
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#5C524B | #F9F7F4 | 7.10:1 | AAA |
#5C524B | #E8E3DC | 5.95:1 | AA |
#5C524B | #C8BDB2 | 4.11:1 | AA large |
River Pebble palette as code
CSS variables
:root {
--river-pebble-1: #F9F7F4;
--river-pebble-2: #E8E3DC;
--river-pebble-3: #C8BDB2;
--river-pebble-4: #9B8F84;
--river-pebble-5: #5C524B;
}Tailwind v4
@theme {
--color-river-pebble-1: #F9F7F4;
--color-river-pebble-2: #E8E3DC;
--color-river-pebble-3: #C8BDB2;
--color-river-pebble-4: #9B8F84;
--color-river-pebble-5: #5C524B;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'river-pebble': {
100: '#F9F7F4',
200: '#E8E3DC',
300: '#C8BDB2',
400: '#9B8F84',
500: '#5C524B',
},SCSS
$river-pebble-1: #F9F7F4;
$river-pebble-2: #E8E3DC;
$river-pebble-3: #C8BDB2;
$river-pebble-4: #9B8F84;
$river-pebble-5: #5C524B;JSON
["#F9F7F4","#E8E3DC","#C8BDB2","#9B8F84","#5C524B"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.