Gradient Page

#FFF1D8

#FFF1D8 is the HEX color code for
Pink Lady
#FFF1D8

Pink Lady

Contrast
Light
Luminance
95%
Color Conversions
Formats for Pink Lady (#FFF1D8) in various color spaces.
#FFF1D8
255, 241, 216
38°, 100%, 92%
0%, 5%, 15%, 0%
0.963, 0.036, 82.2
--color-pink-lady: #FFF1D8;

Shades & Tints

#fff6e5
#ffe3b3
#ffd080
#ffbe4d
#ffab1a
#e69100
#b37100
#805100
#4d3000
#1a1000
DarkestBaseLightest

Color Harmonies

Complementary

#FFF1D8
#d6e5ff

Analogous

#ffdcd6
#FFF1D8
#faffd6

Triadic

#FFF1D8
#d6fff0
#f0d6ff

Split Complementary

#FFF1D8
#d6faff
#dcd6ff

UI Component Examples

See how #FFF1D8 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 {
  /* Pink Lady Base */
  --color-primary: #FFF1D8;
  --color-primary-rgb: 255 241 216;
  --color-primary-hsl: 38 100% 92%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #fff6e5;
  --color-primary-100: #ffe3b3;
  --color-primary-200: #ffd080;
  --color-primary-300: #ffbe4d;
  --color-primary-400: #ffab1a;
  --color-primary-500: #e69100;
  --color-primary-600: #b37100;
  --color-primary-700: #805100;
  --color-primary-800: #4d3000;
  --color-primary-900: #1a1000;
}

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
#FFF1D8 Hex Color | Pink Lady sl | UI Color Scheme Generator