Named color · #E1F5E5
Frozen Civilization
Frozen Civilization is #E1F5E5: rgb(225 245 229), hsl(132 50% 92%), oklch(0.951 0.03 151.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Frozen Civilization color name →
#E1F5E5
oklch(0.951 0.03 151.5)
Color conversions
- HEX
- #e1f5e5
- RGB
- rgb(225 245 229)
- HSL
- hsl(132 50% 92%)
- HWB
- hwb(132 88% 4%)
- OKLCH
- oklch(0.951 0.03 151.5)
- OKLab
- oklab(0.951 -0.026 0.014)
- CIE Lab
- lab(94.72 -8.98 5.37)
- LCH
- lch(94.72 10.46 149.1)
- CMYK
- cmyk(8% 0% 7% 4%)
Tints · Shades · Tones
Tints
- E4F6E8
- E7F7EA
- EAF8ED
- EDF9EF
- F0FAF2
- F3FBF5
- F6FCF7
- F9FDFA
- FCFEFC
Shades
- C4D5C7
- A7B6AA
- 8B988E
- 707B72
- 565F58
- 3E443F
- 272B28
- 121512
- 020303
Tones
- D7E9DA
- CDDDD0
- C3D0C6
- B9C5BB
- AFB9B1
- A6ADA7
- 9CA29D
- 939693
- 898B8A
Color harmonies
Complementary +180°
- E1F5E5
Frozen Civilization
- FBE8F8
≈ Dolomite Crystal
Analogous -30° +30°
- E1F5E5
Frozen Civilization
- EBF2DC
≈ Diminished Mint
- DAF6F0
≈ Diluted Mint
Triadic +120° +240°
- E1F5E5
Frozen Civilization
- E9EEFF
≈ Brilliant White
- FFE9E5
≈ Sheer Rosebud
Split-complementary +150° +210°
- E1F5E5
Frozen Civilization
- F2EBFF
≈ Placebo Purple
- FFE8ED
≈ Rose Mochi
Tetradic +90° +180° +270°
- E1F5E5
Frozen Civilization
- E0F2FF
≈ Wizard White
- FBE8F8
≈ Dolomite Crystal
- FEEBDB
≈ Flowerbed
Contrast & accessibility
Ag
FailOn white
WCAG 1.14:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.39:1 · APCA Lc 98
Best text color: #000000
WCAG 18.39:1 (AAA) · APCA Lc 98
Contrast pairs
Code snippets
CSS
:root {
--frozen-civilization: #e1f5e5;
--frozen-civilization-rgb: 225 245 229;
--frozen-civilization-oklch: oklch(0.951 0.03 151.5);
}
.element {
color: var(--frozen-civilization);
background-color: hsl(132 50% 92%);
border-color: oklch(0.951 0.03 151.5);
}Tailwind CSS v4
@theme {
--color-frozen-civilization: #e1f5e5;
--color-frozen-civilization-50: #eff8f1;
--color-frozen-civilization-100: #e1ebe3;
--color-frozen-civilization-200: #cbd8ce;
--color-frozen-civilization-300: #acbcb0;
--color-frozen-civilization-400: #92a496;
--color-frozen-civilization-500: #788c7c;
--color-frozen-civilization-600: #667769;
--color-frozen-civilization-700: #515f54;
--color-frozen-civilization-800: #3b453d;
--color-frozen-civilization-900: #29302a;
--color-frozen-civilization-950: #171c17;
}SCSS
$frozen-civilization: #e1f5e5;
$frozen-civilization-rgb: 225, 245, 229;
$frozen-civilization-light: mix(#fff, $frozen-civilization, 20%);
$frozen-civilization-dark: mix(#000, $frozen-civilization, 20%);
.element {
color: $frozen-civilization;
box-shadow: 0 0 0 2px rgba($frozen-civilization, 0.35);
}