Named color · #DEF1E7
Snow Ballet
Snow Ballet is #DEF1E7: rgb(222 241 231), hsl(148 40% 91%), oklch(0.941 0.024 163.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Snow Ballet color name →
#DEF1E7
oklch(0.941 0.024 163.1)
Color conversions
- HEX
- #def1e7
- RGB
- rgb(222 241 231)
- HSL
- hsl(148 40% 91%)
- HWB
- hwb(148 87% 5%)
- OKLCH
- oklch(0.941 0.024 163.1)
- OKLab
- oklab(0.941 -0.023 0.007)
- CIE Lab
- lab(93.52 -7.86 2.59)
- LCH
- lch(93.52 8.27 161.8)
- CMYK
- cmyk(8% 0% 4% 5%)
Tints · Shades · Tones
Tints
- E1F2E9
- E5F4EC
- E8F5EE
- EBF7F1
- EFF8F3
- F2F9F5
- F5FBF8
- F8FCFA
- FCFEFD
Shades
- C1D2C9
- A5B3AB
- 89958F
- 6F7973
- 555D59
- 3D4340
- 262B28
- 121413
- 020303
Tones
- D4E5DC
- CBD9D2
- C1CEC7
- B7C2BC
- AEB7B2
- A5ACA8
- 9BA19E
- 929694
- 898B8A
Color harmonies
Complementary +180°
- DEF1E7
Snow Ballet
- F8E6F0
≈ Cherry Pearl
Analogous -30° +30°
- DEF1E7
Snow Ballet
- E5EFDF
≈ Chilled Mint
- DAF1F0
≈ Soar
Triadic +120° +240°
- DEF1E7
Snow Ballet
- E9EAFC
≈ Icy Lilac
- FBE7DF
≈ Aquarelle Orange
Split-complementary +150° +210°
- DEF1E7
Snow Ballet
- F1E7F7
≈ Holographic Lavender
- FBE5E7
≈ Valerie
Tetradic +90° +180° +270°
- DEF1E7
Snow Ballet
- E1EDFC
≈ Husky
- F8E6F0
≈ Cherry Pearl
- F6EADA
≈ Total Recall
Contrast & accessibility
Ag
FailOn white
WCAG 1.17:1 · APCA Lc 9
Ag
AAAOn black
WCAG 17.84:1 · APCA Lc 96
Best text color: #000000
WCAG 17.84:1 (AAA) · APCA Lc 96
Contrast pairs
Code snippets
CSS
:root {
--snow-ballet: #def1e7;
--snow-ballet-rgb: 222 241 231;
--snow-ballet-oklch: oklch(0.941 0.024 163.1);
}
.element {
color: var(--snow-ballet);
background-color: hsl(148 40% 91%);
border-color: oklch(0.941 0.024 163.1);
}Tailwind CSS v4
@theme {
--color-snow-ballet: #def1e7;
--color-snow-ballet-50: #eff7f3;
--color-snow-ballet-100: #e1ebe6;
--color-snow-ballet-200: #cbd8d2;
--color-snow-ballet-300: #adbbb4;
--color-snow-ballet-400: #92a39a;
--color-snow-ballet-500: #788b82;
--color-snow-ballet-600: #66766e;
--color-snow-ballet-700: #515e58;
--color-snow-ballet-800: #3b4540;
--color-snow-ballet-900: #29302c;
--color-snow-ballet-950: #171c19;
}SCSS
$snow-ballet: #def1e7;
$snow-ballet-rgb: 222, 241, 231;
$snow-ballet-light: mix(#fff, $snow-ballet, 20%);
$snow-ballet-dark: mix(#000, $snow-ballet, 20%);
.element {
color: $snow-ballet;
box-shadow: 0 0 0 2px rgba($snow-ballet, 0.35);
}