Gradient Page

#EDF5DD

#EDF5DD is the HEX color code for
Frost
#EDF5DD

Frost

Contrast
Light
Luminance
94%
Color Conversions
Formats for Frost (#EDF5DD) in various color spaces.
#EDF5DD
237, 245, 221
80°, 55%, 91%
3%, 0%, 10%, 4%
0.958, 0.033, 122
--color-frost: #EDF5DD;

Shades & Tints

#f5f9eb
#e0eec4
#cbe29c
#b6d775
#a1cb4d
#88b234
#6a8a28
#4b631d
#2d3b11
#0f1406
DarkestBaseLightest

Color Harmonies

Complementary

#EDF5DD
#e4dbf5

Analogous

#f5f0db
#EDF5DD
#e0f5db

Triadic

#EDF5DD
#dbecf5
#f5dbec

Split Complementary

#EDF5DD
#dbe0f5
#f0dbf5

UI Component Examples

See how #EDF5DD 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 {
  /* Frost Base */
  --color-primary: #EDF5DD;
  --color-primary-rgb: 237 245 221;
  --color-primary-hsl: 80 55% 91%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #f5f9eb;
  --color-primary-100: #e0eec4;
  --color-primary-200: #cbe29c;
  --color-primary-300: #b6d775;
  --color-primary-400: #a1cb4d;
  --color-primary-500: #88b234;
  --color-primary-600: #6a8a28;
  --color-primary-700: #4b631d;
  --color-primary-800: #2d3b11;
  --color-primary-900: #0f1406;
}

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