Concrete & Fog
The subtle texture of weathered stone caught between shadow and diffused light, quiet and grounded.
Psychology
The four grays in this palette operate within a compressed value range, creating visual restraint that signals stability and contemplation rather than stimulation. Low chroma across all tones produces minimal visual competition, allowing the eye to rest and encouraging focus on form and typography over color drama. The interplay between slightly warmer mid-tones and cooler light grays generates gentle depth without harsh contrast, a principle that reduces cognitive load and supports extended viewing.
Usage
Architectural photography, luxury hospitality branding, and editorial typography systems benefit from this palette's sophisticated neutrality and ability to emphasize texture over hue. Minimalist packaging design, corporate identity systems, and interior design presentations leverage the moderate contrast and soft mood to convey professionalism and restraint. The compressed lightness range works particularly well for monochromatic layouts where form, spacing, and typography drive visual hierarchy rather than color.
Code
CSS Gradient
/* CSS gradient approximation of mesh gradient */
/* Note: This is a linear approximation. For the full animated mesh effect, use the React/JS export. */
background: linear-gradient(
90deg,
#4d514d 0%,
#a6aaa5 33%,
#bfc3be 67%,
#464a46 100%
);Tailwind v4
/* app.css — Tailwind v4 */
@theme {
--color-gradient-1: #4d514d;
--color-gradient-2: #a6aaa5;
--color-gradient-3: #bfc3be;
--color-gradient-4: #464a46;
}
/* Usage: bg-gradient-1, text-gradient-2, etc. */CSS Variables
--color-1: #4d514d; --color-2: #a6aaa5; --color-3: #bfc3be; --color-4: #464a46;
Hex values
#4d514d, #a6aaa5, #bfc3be, #464a46
Building something? Get this palette via the REST API.