Named color · #FFE5ED
Early Blossom
Early Blossom is #FFE5ED: rgb(255 229 237), hsl(342 100% 95%), oklch(0.945 0.03 357.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Early Blossom color name →
#FFE5ED
oklch(0.945 0.03 357.1)
Color conversions
- HEX
- #ffe5ed
- RGB
- rgb(255 229 237)
- HSL
- hsl(342 100% 95%)
- HWB
- hwb(342 90% 0%)
- OKLCH
- oklch(0.945 0.03 357.1)
- OKLab
- oklab(0.945 0.03 -0.002)
- CIE Lab
- lab(93.26 10.17 -0.48)
- LCH
- lch(93.26 10.18 357.3)
- CMYK
- cmyk(0% 10% 7% 0%)
Tints · Shades · Tones
Tints
- FFE8EF
- FFEAF1
- FFEDF2
- FFEFF4
- FFF2F6
- FFF5F8
- FFF7FA
- FFFAFB
- FFFCFD
Shades
- DEC7CE
- BEAAB0
- 9E8E93
- 807277
- 63585C
- 483F42
- 2E282A
- 161214
- 030303
Tones
- F2DAE2
- E4D0D6
- D7C6CB
- CABBC0
- BEB1B5
- B1A7AA
- A59D9F
- 989395
- 8C8A8A
Color harmonies
Complementary +180°
- FFE5ED
Early Blossom
- D9F4EC
≈ Diluted Mint
Analogous -30° +30°
- FFE5ED
Early Blossom
- F8E6F8
≈ Soft Lavender
- FFE6E3
≈ Olm Pink
Triadic +120° +240°
- FFE5ED
Early Blossom
- EBF0D9
≈ Memoir
- DBF1FF
≈ Wizard White
Split-complementary +150° +210°
- FFE5ED
Early Blossom
- E0F3E1
≈ Weak Green
- D7F3F7
≈ Let It Snow
Tetradic +90° +180° +270°
- FFE5ED
Early Blossom
- F6ECD7
≈ Ranier White
- D9F4EC
≈ Diluted Mint
- E5EDFF
≈ Brilliant White
Contrast & accessibility
Ag
FailOn white
WCAG 1.18:1 · APCA Lc 9
Ag
AAAOn black
WCAG 17.68:1 · APCA Lc 95
Best text color: #000000
WCAG 17.68:1 (AAA) · APCA Lc 95
Contrast pairs
Code snippets
CSS
:root {
--early-blossom: #ffe5ed;
--early-blossom-rgb: 255 229 237;
--early-blossom-oklch: oklch(0.945 0.03 357.1);
}
.element {
color: var(--early-blossom);
background-color: hsl(342 100% 95%);
border-color: oklch(0.945 0.03 357.1);
}Tailwind CSS v4
@theme {
--color-early-blossom: #ffe5ed;
--color-early-blossom-50: #fdf2f5;
--color-early-blossom-100: #f1e4e7;
--color-early-blossom-200: #e0cfd4;
--color-early-blossom-300: #c5b1b7;
--color-early-blossom-400: #ae979e;
--color-early-blossom-500: #987e86;
--color-early-blossom-600: #806b72;
--color-early-blossom-700: #67555b;
--color-early-blossom-800: #4b3e43;
--color-early-blossom-900: #342b2e;
--color-early-blossom-950: #20181b;
}SCSS
$early-blossom: #ffe5ed;
$early-blossom-rgb: 255, 229, 237;
$early-blossom-light: mix(#fff, $early-blossom, 20%);
$early-blossom-dark: mix(#000, $early-blossom, 20%);
.element {
color: $early-blossom;
box-shadow: 0 0 0 2px rgba($early-blossom, 0.35);
}