Palette
A serene collection of grays, mirroring the smooth, calming presence of river stones.
Preview
Interface
A quick look at how River Stone Calm reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The River Stone Calm palette is a serene, monochromatic collection of greys, mirroring the smooth, calming presence of river stones. Ranging from the deep #4A4747 to the airy #E4E1E1, this palette offers a clean and minimalist foundation. Designers and developers can utilize its subtle variations, like the mid-tone #6D6A6A and the soft #C8C5C5, to craft elegant, modern, and tranquil interfaces or branding, emphasizing clarity and understated sophistication in digital and print media.
primary
Use #6D6A6A as a solid mid-dark grey primary for main elements, providing a stable and versatile base.
secondary
Introduce #9B9898 as a lighter mid-grey secondary for supporting content, borders, or subtle background variations.
accent
Apply #E4E1E1 as a very light grey for crisp highlights, interactive states, or clean separation in design.
background
Utilize #C8C5C5 for a light, clean background, or #E4E1E1 for a brighter, more open canvas.
text
Employ #4A4747 for body text and headings, ensuring excellent readability and a strong, modern presence against lighter palette tones.
Creates a crisp, modern, and highly legible combination, ideal for primary content areas and calls to action.
#4A4747 · #C8C5C5 · #E4E1E1Offers a smooth, harmonious transition between mid-tones, perfect for subtle backgrounds or layered elements.
#6D6A6A · #9B9898 · #C8C5C5Provides a clean and functional foundation, suitable for minimalist interfaces where clarity is paramount.
#E4E1E1 · #6D6A6A · #4A4747:root {
--river-stone-calm-2-1: #6D6A6A;
--river-stone-calm-2-2: #9B9898;
--river-stone-calm-2-3: #C8C5C5;
--river-stone-calm-2-4: #4A4747;
--river-stone-calm-2-5: #E4E1E1;
}theme: {
extend: {
colors: {
"river-stone-calm-2": {
1: "#6D6A6A",
2: "#9B9898",
3: "#C8C5C5",
4: "#4A4747",
5: "#E4E1E1",
}
}
}
}Palette colors
Accessibility
Similar palettes