Lava Rock

#535e64

Save

About Lava Rock

On my screen, Lava Rock reads like a smoothed, dark gray with a slightly sooty edge. It's not as cool and heavy as Gunmetal, and it doesn't feel as warm and quietly forgiving as Blindfolded. The difference I notice first is its neutral lava-gray undertone and its low-to-mid saturation, which keeps it from looking like an assertive "color" and instead gives it a grounded, real-material presence.

I use Lava Rock as a secondary surface when the UI needs to feel steady, not harsh. It works well for dashboards and healthcare interfaces, especially for card layers, table headers, and form backgrounds where you want hierarchy without adding visual noise. Compared to Fiord, it's less steel-like and less "this is the headline," so it sits back while still holding onto definition.

Quick pairing note: it looks best alongside crisp, higher-contrast typography and restrained accents. If your layout is already very dark, keep an eye on text legibility and give key elements breathing room.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Create a gradient with Lava Rock

Open the generator with this color pre-loaded.

Start creating