Gradient Page

#FDF6D3

#FDF6D3 is the HEX color code for
Half Colonial White
#FDF6D3

Half Colonial White

Contrast
Light
Luminance
96%
Color Conversions
Formats for Half Colonial White (#FDF6D3) in various color spaces.
#FDF6D3
253, 246, 211
50°, 91%, 91%
0%, 3%, 17%, 1%
0.97, 0.046, 97.8
--color-half-colonial-white: #FDF6D3;

Shades & Tints

#fefae7
#fcf0b6
#f9e685
#f7dc55
#f5d224
#dbb80a
#aa8f08
#7a6606
#493d03
#181401
DarkestBaseLightest

Color Harmonies

Complementary

#FDF6D3
#d3dafd

Analogous

#fde1d3
#FDF6D3
#effdd3

Triadic

#FDF6D3
#d3fdf6
#f6d3fd

Split Complementary

#FDF6D3
#d3effd
#e1d3fd

UI Component Examples

See how #FDF6D3 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 {
  /* Half Colonial White Base */
  --color-primary: #FDF6D3;
  --color-primary-rgb: 253 246 211;
  --color-primary-hsl: 50 91% 91%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #fefae7;
  --color-primary-100: #fcf0b6;
  --color-primary-200: #f9e685;
  --color-primary-300: #f7dc55;
  --color-primary-400: #f5d224;
  --color-primary-500: #dbb80a;
  --color-primary-600: #aa8f08;
  --color-primary-700: #7a6606;
  --color-primary-800: #493d03;
  --color-primary-900: #181401;
}

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
#FDF6D3 Hex Color | Half Colonial White sl | UI Color Scheme Generator