Nearest named color · #D3DEF0
#D3DEF0
Nearest named color: Puffy Cloud
#D3DEF0 (rgb(211 222 240), hsl(217 49% 88%), oklch(0.898 0.027 260.3)) is closest to the named color Puffy Cloud. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#D3DEF0
oklch(0.898 0.027 260.3)
Color conversions
- HEX
- #d3def0
- RGB
- rgb(211 222 240)
- HSL
- hsl(217 49% 88%)
- HWB
- hwb(217 83% 6%)
- OKLCH
- oklch(0.898 0.027 260.3)
- OKLab
- oklab(0.898 -0.005 -0.027)
- CIE Lab
- lab(88.04 -1.2 -10.16)
- LCH
- lch(88.04 10.23 263.2)
- CMYK
- cmyk(12% 7% 0% 6%)
Tints · Shades · Tones
Tints
- D7E1F2
- DCE5F3
- E0E8F5
- E4EBF6
- E9EEF8
- EDF2F9
- F2F5FB
- F6F8FC
- FBFCFE
Shades
- B7C1D1
- 9CA5B2
- 828995
- 696F78
- 51555D
- 3A3D43
- 24262A
- 101214
- 020203
Tones
- CAD4E4
- C2CAD9
- B9C1CD
- B1B7C2
- A9AEB6
- A0A4AB
- 989BA0
- 909295
- 88898B
Color harmonies
Complementary +180°
- D3DEF0
Puffy Cloud
- E7DCC9
≈ Serengeti Dust
Analogous -30° +30°
- D3DEF0
Puffy Cloud
- CCE1EC
≈ Dwindling Denim
- DDDBEF
≈ Chinese Silver
Triadic +120° +240°
- D3DEF0
Puffy Cloud
- EFD7D6
≈ Light Petite Pink
- D4E2D1
≈ Sweet Mint Tea
Split-complementary +150° +210°
- D3DEF0
Puffy Cloud
- EDD9CD
≈ Nectar
- DEDFCB
≈ Washed Sage
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.35:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.47:1 · APCA Lc 86
Best text color: #000000
WCAG 15.47:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--puffy-cloud: #d3def0;
--puffy-cloud-rgb: 211 222 240;
--puffy-cloud-oklch: oklch(0.898 0.027 260.3);
}
.element {
color: var(--puffy-cloud);
background-color: hsl(217 49% 88%);
border-color: oklch(0.898 0.027 260.3);
}Tailwind CSS v4
@theme {
--color-puffy-cloud: #d3def0;
--color-puffy-cloud-50: #f1f5fd;
--color-puffy-cloud-100: #e3e8f1;
--color-puffy-cloud-200: #ced5e0;
--color-puffy-cloud-300: #b0b8c6;
--color-puffy-cloud-400: #959faf;
--color-puffy-cloud-500: #7c8799;
--color-puffy-cloud-600: #697281;
--color-puffy-cloud-700: #545b67;
--color-puffy-cloud-800: #3d434c;
--color-puffy-cloud-900: #2a2e35;
--color-puffy-cloud-950: #171b20;
}SCSS
$puffy-cloud: #d3def0;
$puffy-cloud-rgb: 211, 222, 240;
$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);
}