Benoemde kleur · #D7E2EE
Blooming Aster
Blooming Aster is #D7E2EE: rgb(215 226 238), hsl(211 40% 89%), oklch(0.908 0.02 250.4). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Gray mean? → · Blooming Aster color name →
#D7E2EE
oklch(0.908 0.02 250.4)
Kleurconversies
- HEX
- #d7e2ee
- RGB
- rgb(215 226 238)
- HSL
- hsl(211 40% 89%)
- HWB
- hwb(211 84% 7%)
- OKLCH
- oklch(0.908 0.02 250.4)
- OKLab
- oklab(0.908 -0.007 -0.019)
- CIE Lab
- lab(89.31 -2.1 -7.21)
- LCH
- lch(89.31 7.51 253.8)
- CMYK
- cmyk(10% 5% 0% 7%)
Tinten · Schaduwen · Tonen
Tinten
- DBE5F0
- DFE8F1
- E3EBF3
- E7EEF5
- EBF0F7
- EFF3F8
- F3F6FA
- F7F9FC
- FBFCFD
Schaduwen
- BBC4CF
- 9FA8B1
- 858C93
- 6B7177
- 52575C
- 3B3E42
- 25272A
- 111214
- 020303
Tonen
- CED8E2
- C5CED7
- BCC4CC
- B3BAC1
- ABB0B5
- A2A6AB
- 999CA0
- 919395
- 88898A
Kleurharmonieën
Complementair +180°
- D7E2EE
Blooming Aster
- EADFD3
≈ South Peak
Analoog -30° +30°
- D7E2EE
Blooming Aster
- D3E4EA
≈ Ocean Breeze
- DEDFEE
≈ Lower Lavender
Triadisch +120° +240°
- D7E2EE
Blooming Aster
- EEDBDD
≈ Sweet Bianca
- DCE4D6
≈ Lightest Sky
Gesplitst complementair +150° +210°
- D7E2EE
Blooming Aster
- EDDDD7
≈ Light Blossom Time
- E3E1D2
≈ Shark Tooth
Tetradisch +90° +180° +270°
- D7E2EE
Blooming Aster
- EBDCE5
≈ Fairy Tail
- EADFD3
≈ South Peak
- D6E5DC
≈ Cactus Blossom
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.31:1 · APCA Lc 15
Ag
AAAOp zwart
WCAG 16.00:1 · APCA Lc 88
Beste tekstkleur: #000000
WCAG 16.00:1 (AAA) · APCA Lc 88
Contrast pairs
Codefragmenten
CSS
:root {
--blooming-aster: #d7e2ee;
--blooming-aster-rgb: 215 226 238;
--blooming-aster-oklch: oklch(0.908 0.02 250.4);
}
.element {
color: var(--blooming-aster);
background-color: hsl(211 40% 89%);
border-color: oklch(0.908 0.02 250.4);
}Tailwind CSS v4
@theme {
--color-blooming-aster: #d7e2ee;
--color-blooming-aster-50: #f1f6fb;
--color-blooming-aster-100: #e3e8ef;
--color-blooming-aster-200: #ced5dd;
--color-blooming-aster-300: #b0b8c2;
--color-blooming-aster-400: #96a0aa;
--color-blooming-aster-500: #7c8793;
--color-blooming-aster-600: #69737d;
--color-blooming-aster-700: #545c64;
--color-blooming-aster-800: #3d4349;
--color-blooming-aster-900: #2a2e33;
--color-blooming-aster-950: #181b1e;
}SCSS
$blooming-aster: #d7e2ee;
$blooming-aster-rgb: 215, 226, 238;
$blooming-aster-light: mix(#fff, $blooming-aster, 20%);
$blooming-aster-dark: mix(#000, $blooming-aster, 20%);
.element {
color: $blooming-aster;
box-shadow: 0 0 0 2px rgba($blooming-aster, 0.35);
}