Gradient Page

#796D62

#796D62 is the HEX color code for
Sandstone
#796D62

Sandstone

Contrast
Dark
Luminance
44%
Color Conversions
Formats for Sandstone (#796D62) in various color spaces.
#796D62
121, 109, 98
29°, 11%, 43%
0%, 10%, 19%, 53%
0.543, 0.023, 64.9
--color-sandstone: #796D62;

Shades & Tints

#f4f2f1
#ddd9d5
#c6bfb8
#b0a59c
#998c80
#7f7266
#63594f
#474039
#2a2622
#0e0d0b
DarkestBaseLightest

Color Harmonies

Complementary

#796D62
#626e7a

Analogous

#7a6262
#796D62
#7a7962

Triadic

#796D62
#627a6d
#6d627a

Split Complementary

#796D62
#627a79
#62627a

UI Component Examples

See how #796D62 looks when applied to real interface components.

Interactive Elements
Surface & Accent
Pro Tip!

Use lighter tints for backgrounds to maintain readability while keeping brand identity.

Status Indicator
Active
# CSS Variables
Copy-paste these variables into your global CSS to use this palette instantly.
:root {
  /* Sandstone Base */
  --color-primary: #796D62;
  --color-primary-rgb: 121 109 98;
  --color-primary-hsl: 29 11% 43%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #ffffff;

  /* Shades */
  --color-primary-50:  #f4f2f1;
  --color-primary-100: #ddd9d5;
  --color-primary-200: #c6bfb8;
  --color-primary-300: #b0a59c;
  --color-primary-400: #998c80;
  --color-primary-500: #7f7266;
  --color-primary-600: #63594f;
  --color-primary-700: #474039;
  --color-primary-800: #2a2622;
  --color-primary-900: #0e0d0b;
}

Want more?

We hope you enjoyed this color. Keep reading for more amazing colorful content for developers, designers and creators!
View our entire collection of UI gradientsView all our color names
#796D62 Hex Color | Sandstone sl | UI Color Scheme Generator