Gradient Page

#9A8478

#9A8478 is the HEX color code for
Almond Frost
#9A8478

Almond Frost

Contrast
Light
Luminance
54%
Color Conversions
Formats for Almond Frost (#9A8478) in various color spaces.
#9A8478
154, 132, 120
21°, 14%, 54%
0%, 14%, 22%, 40%
0.63, 0.032, 50.4
--color-almond-frost: #9A8478;

Shades & Tints

#f4f2f0
#ded7d3
#c8bdb6
#b2a299
#9c877c
#836e63
#66564d
#493d37
#2c2521
#0f0c0b
DarkestBaseLightest

Color Harmonies

Complementary

#9A8478
#798f9a

Analogous

#9a797e
#9A8478
#9a9579

Triadic

#9A8478
#799a85
#85799a

Split Complementary

#9A8478
#799a95
#797e9a

UI Component Examples

See how #9A8478 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 {
  /* Almond Frost Base */
  --color-primary: #9A8478;
  --color-primary-rgb: 154 132 120;
  --color-primary-hsl: 21 14% 54%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #f4f2f0;
  --color-primary-100: #ded7d3;
  --color-primary-200: #c8bdb6;
  --color-primary-300: #b2a299;
  --color-primary-400: #9c877c;
  --color-primary-500: #836e63;
  --color-primary-600: #66564d;
  --color-primary-700: #493d37;
  --color-primary-800: #2c2521;
  --color-primary-900: #0f0c0b;
}

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
#9A8478 Hex Color | Almond Frost sl | UI Color Scheme Generator