Gradient Page

#A397B4

#A397B4 is the HEX color code for
Amethyst Smoke
#A397B4

Amethyst Smoke

Contrast
Light
Luminance
62%
Color Conversions
Formats for Amethyst Smoke (#A397B4) in various color spaces.
#A397B4
163, 151, 180
265°, 16%, 65%
9%, 16%, 0%, 29%
0.696, 0.044, 304
--color-amethyst-smoke: #A397B4;

Shades & Tints

#f2f0f4
#d8d3df
#beb5c9
#a397b4
#897a9f
#706085
#574b68
#3e364a
#25202c
#0c0b0f
DarkestBaseLightest

Color Harmonies

Complementary

#A397B4
#a8b497

Analogous

#979ab4
#A397B4
#b297b4

Triadic

#A397B4
#b4a397
#97b4a3

Split Complementary

#A397B4
#b4b297
#9ab497

UI Component Examples

See how #A397B4 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 {
  /* Amethyst Smoke Base */
  --color-primary: #A397B4;
  --color-primary-rgb: 163 151 180;
  --color-primary-hsl: 265 16% 65%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #f2f0f4;
  --color-primary-100: #d8d3df;
  --color-primary-200: #beb5c9;
  --color-primary-300: #a397b4;
  --color-primary-400: #897a9f;
  --color-primary-500: #706085;
  --color-primary-600: #574b68;
  --color-primary-700: #3e364a;
  --color-primary-800: #25202c;
  --color-primary-900: #0c0b0f;
}

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
#A397B4 Hex Color | Amethyst Smoke sl | UI Color Scheme Generator