Clay
Meet Clay (#B6B7B0), a complex neutral that finds its character in subtlety. This muted, earthy tone balances between gray and green, offering a sophisticated foundation that feels both organic and modern without demanding attention.
What color is Clay?
Clay is a soft, muted gray with a distinct warmth, giving it an earthy, mineral-like quality.
It carries a subtle green undertone, which separates it from cooler grays and provides a natural, organic feel.
What is the meaning of the color Clay (#B6B7B0) in design?
The color Clay, #B6B7B0, is an earthy neutral that evokes a sense of calm, stability, and a connection to the natural world.
It symbolizes a timeless foundation, drawing from the material's ancient history in craft to suggest durability and authenticity.
How can I use the color Clay in my UI design?
Clay (#B6B7B0) works best as a sophisticated neutral, lending a grounded and composed feel to an interface. For strong accessibility and visual clarity, pair it with deep charcoals or crisp off-whites. It also harmonizes well with other earthy tones like terracotta and forest green, making it an excellent choice for backgrounds, cards, or secondary UI elements.
While not a common choice, this rarity is its strength. Brands such as Strut, Claude, and Yik Yak employ similar muted palettes to appear more deliberate and distinguished. Using Clay can set a product apart from the typical sea of bright primary colors found in many digital products.
You can use the tools below to explore curated palettes, test color contrast for accessibility, and preview Clay in real UI components of top brands.
Using Clay color codes
The hex code #B6B7B0 is your starting point for applying Clay in any digital design tool. However, to correctly represent the color across different media, from screens to print, you will need to convert it into other formats.
Each color code serves a specific purpose. RGB values are essential for any screen-based work, as they define color through light. For print projects, you'll need the CMYK equivalent to ensure color accuracy on paper. Other models like HSL offer a more intuitive way to make adjustments, while formats such as LAB and LCH are used for maintaining perceptual uniformity across devices.
To help you get started, we've converted the hex code #B6B7B0 for Clay into a range of popular formats below. Simply copy the code you need for your project.
Analogous
Analogous colors sit next to each other on the color wheel. With Clay as a base, they form a unified and calm palette.
Complementary
Complementary colors are opposites on the color wheel. When paired with Clay, these hues create a striking, high-contrast visual effect.
Split Complementary
For Clay, a split complementary scheme uses the two colors adjacent to its direct complement, offering a vibrant yet balanced palette.
Triadic
Triadic colors are three hues equidistant on the color wheel. When based on Clay, they form a vibrant and balanced palette with strong visual contrast.
Tetradic
Tetradic color schemes use four colors in two complementary pairs. For Clay, this creates a rich, versatile palette with a rectangular shape on the color wheel.
Square
A square color scheme features four colors spaced evenly on the color wheel, creating a balanced yet dynamic combination with Clay as the base.
Text Color
Background Color
Your Catchy Large Text Goes Here
Shades
Shades are darker versions of Clay, created by mixing in black to add depth and weight.
Tints
Tints are lighter versions of Clay, created by adding white to achieve a softer look.
Tones
By adding gray to Clay, you create tones—softer, more muted variations of the original color.
Hues
Hues are variations of Clay, sharing its base color but differing in intensity or temperature.
Never run out of inspiration again.
Use Mobbin for free as long as you like or get full access with any of our paid plans.
