Gradient Page

#AB3472

#AB3472 is the HEX color code for
Royal Heath
#AB3472

Royal Heath

Contrast
Dark
Luminance
37%
Color Conversions
Formats for Royal Heath (#AB3472) in various color spaces.
#AB3472
171, 52, 114
329°, 53%, 44%
0%, 70%, 33%, 33%
0.52, 0.166, 352.4
--color-royal-heath: #AB3472;

Shades & Tints

#f9ebf2
#edc4d9
#e19dc0
#d576a7
#c94f8e
#b03675
#892a5b
#621e41
#3b1227
#14060d
DarkestBaseLightest

Color Harmonies

Complementary

#AB3472
#35ac6e

Analogous

#aa35ac
#AB3472
#ac3537

Triadic

#AB3472
#72ac35
#3572ac

Split Complementary

#AB3472
#37ac35
#35acaa

UI Component Examples

See how #AB3472 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 {
  /* Royal Heath Base */
  --color-primary: #AB3472;
  --color-primary-rgb: 171 52 114;
  --color-primary-hsl: 329 53% 44%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #ffffff;

  /* Shades */
  --color-primary-50:  #f9ebf2;
  --color-primary-100: #edc4d9;
  --color-primary-200: #e19dc0;
  --color-primary-300: #d576a7;
  --color-primary-400: #c94f8e;
  --color-primary-500: #b03675;
  --color-primary-600: #892a5b;
  --color-primary-700: #621e41;
  --color-primary-800: #3b1227;
  --color-primary-900: #14060d;
}

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
#AB3472 Hex Color | Royal Heath sl | UI Color Scheme Generator