Nearest named color · #E1EAFF
#E1EAFF
Nearest named color: Puffy Cloud
#E1EAFF (rgb(225 234 255), hsl(222 100% 94%), oklch(0.937 0.03 267.2)) is closest to the named color Puffy Cloud. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#E1EAFF
oklch(0.937 0.03 267.2)
Color conversions
- HEX
- #e1eaff
- RGB
- rgb(225 234 255)
- HSL
- hsl(222 100% 94%)
- HWB
- hwb(222 88% 0%)
- OKLCH
- oklch(0.937 0.03 267.2)
- OKLab
- oklab(0.937 -0.001 -0.03)
- CIE Lab
- lab(92.49 -0.09 -11.27)
- LCH
- lch(92.49 11.27 269.5)
- CMYK
- cmyk(12% 8% 0% 0%)
Tints · Shades · Tones
Tints
- E4ECFF
- E7EEFF
- EAF0FF
- EDF2FF
- F0F5FF
- F3F7FF
- F6F9FF
- F9FBFF
- FCFDFF
Shades
- C4CBDE
- A7AEBE
- 8B919E
- 707580
- 565A63
- 3E4148
- 27292E
- 121316
- 020303
Tones
- D7DFF2
- CDD4E4
- C3C9D7
- B9BECA
- AFB4BE
- A6A9B1
- 9C9FA4
- 939498
- 898A8C
Color harmonies
Complementary +180°
- E1EAFF
Puffy Cloud
- F3E9D4
≈ Pearled Couscous
Analogous -30° +30°
- E1EAFF
Puffy Cloud
- D8EEFC
≈ Ice Castle
- ECE6FC
≈ Cyber Lavender
Triadic +120° +240°
- E1EAFF
Puffy Cloud
- FEE3DF
≈ Lady Anne
- DEF0DF
≈ Distant Landscape
Split-complementary +150° +210°
- E1EAFF
Puffy Cloud
- FAE6D7
≈ Illuminated
- E8EDD7
≈ Alligator Egg
Tetradic +90° +180° +270°
- E1EAFF
Puffy Cloud
- FCE2EA
≈ Spun Sugar
- F3E9D4
≈ Pearled Couscous
- D6F1EA
≈ Green Frosting
Contrast & accessibility
Ag
FailOn white
WCAG 1.20:1 · APCA Lc 10
Ag
AAAOn black
WCAG 17.41:1 · APCA Lc 94
Best text color: #000000
WCAG 17.41:1 (AAA) · APCA Lc 94
Contrast pairs
Code snippets
CSS
:root {
--puffy-cloud: #e1eaff;
--puffy-cloud-rgb: 225 234 255;
--puffy-cloud-oklch: oklch(0.937 0.03 267.2);
}
.element {
color: var(--puffy-cloud);
background-color: hsl(222 100% 94%);
border-color: oklch(0.937 0.03 267.2);
}Tailwind CSS v4
@theme {
--color-puffy-cloud: #e1eaff;
--color-puffy-cloud-50: #f1f5fe;
--color-puffy-cloud-100: #e4e8f2;
--color-puffy-cloud-200: #cfd4e2;
--color-puffy-cloud-300: #b1b7c7;
--color-puffy-cloud-400: #969eb1;
--color-puffy-cloud-500: #7d869b;
--color-puffy-cloud-600: #6a7183;
--color-puffy-cloud-700: #555b69;
--color-puffy-cloud-800: #3d424d;
--color-puffy-cloud-900: #2a2e36;
--color-puffy-cloud-950: #181b21;
}SCSS
$puffy-cloud: #e1eaff;
$puffy-cloud-rgb: 225, 234, 255;
$puffy-cloud-light: mix(#fff, $puffy-cloud, 20%);
$puffy-cloud-dark: mix(#000, $puffy-cloud, 20%);
.element {
color: $puffy-cloud;
box-shadow: 0 0 0 2px rgba($puffy-cloud, 0.35);
}