#B4B2AA

#84827A

#52504A

#28261F

Background

Primary Accent

Secondary

Body Text

Wet Stone Color Palette

#B4B2AA · #84827A · #52504A · #28261F

Grey mono cool ocean moody autumnwinter interior product

Generate Similar Palette

AAA

WCAG Grade

7.1:1

Contrast Ratio

999

Saves

1,565

AI Copies

AI Prompt

Use #B4B2AA as the background. Use #84827A as the primary accent. Use #52504A as secondary. Use #28261F as body text/supporting color. Palette mood: Wet Stone — mono, cool, ocean, moody.

Hex Codes, RGB & CMYK Color Values

Technical breakdown for the Wet Stone color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).

Design Role	RGB	CMYK	HSL
Background Luminance: 44.4%	180, 178, 170	0%, 1%, 6%, 29%	48°, 6%, 69%
Primary Accent Luminance: 22.3%	132, 130, 122	0%, 2%, 8%, 48%	48°, 4%, 50%
Secondary Luminance: 8.0%	82, 80, 74	0%, 2%, 10%, 68%	45°, 5%, 31%
Body Text Luminance: 1.9%	40, 38, 31	0%, 5%, 22%, 84%	47°, 13%, 14%

Wet Stone Tints & Shades

Hover states, borders and elevation need lighter and darker steps of your base colors. Here are computed tints and shades for every color in the Wet Stone palette — click any swatch to copy its hex.

#B4B2AA neutral gray

#84827A neutral gray

#52504A neutral gray

#28261F muted yellow

Wet Stone Palette Contrast Matrix (WCAG 2.1)

Every color tested as text on every other color as background. Body copy needs 4.5:1 (AA), large text and UI components 3:1. AAA requires 7:1.

Text on Background	Preview	Ratio	Grade	Safe For
#28261F on #B4B2AA	Aa Sample Text	7.13:1	AAA	Body text, headings, UI
#B4B2AA on #28261F	Aa Sample Text	7.13:1	AAA	Body text, headings, UI
#28261F on #84827A	Aa Sample Text	3.93:1	Fail	Large headings, UI components
#84827A on #28261F	Aa Sample Text	3.93:1	Fail	Large headings, UI components
#52504A on #B4B2AA	Aa Sample Text	3.80:1	Fail	Large headings, UI components
#B4B2AA on #52504A	Aa Sample Text	3.80:1	Fail	Large headings, UI components
#52504A on #84827A	Aa Sample Text	2.09:1	Fail	Decorative use only
#84827A on #52504A	Aa Sample Text	2.09:1	Fail	Decorative use only
#28261F on #52504A	Aa Sample Text	1.88:1	Fail	Decorative use only
#52504A on #28261F	Aa Sample Text	1.88:1	Fail	Decorative use only
#84827A on #B4B2AA	Aa Sample Text	1.81:1	Fail	Decorative use only
#B4B2AA on #84827A	Aa Sample Text	1.81:1	Fail	Decorative use only

Wet Stone Color Psychology & Meaning

Wet stone darkens and gains a slight sheen, so the same paving reads pale in dry weather and almost black in rain, and this palette is stone light with stone wet. It feels cold and solid, the color of a path with reflections in it.

Color Harmony: Analogous Scheme

The Wet Stone palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.

Hue Wheel

A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.

History & Design Context

Stone surfaces darken when wet because water fills the pores and reduces scattering, which is the same effect that makes wet soil and wet fabric look dramatically darker.

Best Design Use Cases

Use the stone light for large surfaces, stone mid for links and buttons, stone wet for fine details, and stone dark for text.

Industries This Palette Suits

Product design, interfaces, industrial design, ceramics.

Colors That Pair Well With Wet Stone

Need a fifth color? These three companions are computed from the palette's own hue positions on the color wheel, so they extend the scheme without breaking its harmony.

blue

directly opposite #84827A on the wheel — the strongest accent for CTAs and highlights when you need maximum energy

yellow-green

30° beside #84827A — a calm secondary that extends the palette without adding tension

tinted neutral

a ink-black carrying the palette's own hue — perfect for surfaces and dividers

Using Wet Stone Without Breaking Accessibility

Avoid #84827A for small UI elements on #B4B2AA — at 1.8:1 it misses the 3:1 WCAG threshold; darken it with a shade from the ramp below.
Set body text in #28261F — 7.1:1 against #B4B2AA passes WCAG AA (AAA) for long-form reading.
Let #52504A carry sidebars, cards and footers — at a mid lightness it separates zones without stealing focus from #84827A.

How to Implement the Wet Stone Color Scheme

To use this Wet Stone color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.

Option 1: CSS Variables

:root { 
  /* {name} Palette - ihatecolors.com */{'
'}  --color-bg: {colors[0]};{'
'}  --color-primary: {colors[1]};{'
'}  --color-secondary: {colors[2]};{'
'}  --color-text: {colors[3]};{'
'} {'}'}

Web Design Tip

Use #B4B2AA for the main background and #84827A for primary buttons. This creates a high-contrast focal point.

Accessibility Note

The contrast ratio between #28261F and #B4B2AA is 7.13:1 (AAA). Ensure your body text remains legible.

Quick Actions

Export

Explore This Family

All Grey Palettes All mono Palettes All cool Palettes All interior Palettes All product Palettes

At a Glance

WCAG Grade AAA

Contrast Ratio 7.1:1

Color Count 4

Moods mono, cool

Best For interior, product

Twitter/X

Wet Stone Palette — Frequently Asked Questions

What are the hex codes in the Wet Stone color palette?

The Wet Stone palette contains #B4B2AA, #84827A, #52504A, #28261F. Click any swatch on this page to copy its value, or export all four at once as CSS variables, Tailwind config, SCSS or a Figma-ready list.

Is the Wet Stone color palette accessible (WCAG)?

Yes for its strongest pairings: #28261F on #B4B2AA reaches 7.1:1 (AAA). For body text always keep a 4.5:1 ratio and for large UI elements 3:1 — the full contrast matrix above shows the exact score for every color-on-color combination in this palette.

What colors go well with the Wet Stone palette?

Beyond its own four colors, #7A7C85, #858C73, #151514 extend it naturally: the complementary hue for high-energy accents, an analogous neighbor for calm transitions, and a tinted neutral for surfaces. All three are computed from this palette's hues on the color wheel.

What mood does the Wet Stone palette create?

Wet Stone reads as mono, cool, ocean. Neutral gray drives the personality, grounded by neutral gray — a combination that works best when the light base gets most of the canvas.

Can I use the Wet Stone color palette commercially?

Yes. Individual color values can't be copyrighted, so the Wet Stone palette is free for personal, client and commercial work — websites, branding, apps, print and social content, with no attribution required.

How do I add the Wet Stone palette to Tailwind or CSS?

Use the export panel on this page: CSS variables, a Tailwind config block, SCSS variables, or a Figma copy list are generated from Wet Stone's exact values, including the tint and shade ramps shown above.