Nazwany kolor · #DDE0EA
Monet’s Lavender
Monet’s Lavender to #DDE0EA: rgb(221 224 234), hsl(226 24% 89%), oklch(0.907 0.014 272.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Monet’s Lavender color name →
#DDE0EA
oklch(0.907 0.014 272.7)
Konwersje koloru
- HEX
- #dde0ea
- RGB
- rgb(221 224 234)
- HSL
- hsl(226 24% 89%)
- HWB
- hwb(226 87% 8%)
- OKLCH
- oklch(0.907 0.014 272.7)
- OKLab
- oklab(0.907 0.001 -0.014)
- CIE Lab
- lab(89.16 0.34 -5.27)
- LCH
- lch(89.16 5.28 273.6)
- CMYK
- cmyk(6% 4% 0% 8%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E0E3EC
- E4E6EE
- E7E9F0
- EAECF2
- EEEFF4
- F1F3F7
- F5F6F9
- F8F9FB
- FCFCFD
Odcienie ciemniejsze
- C0C3CB
- A4A6AE
- 888A91
- 6E7075
- 55565A
- 3D3E41
- 262729
- 111213
- 020203
Tony
- D3D6DF
- CACCD4
- C0C2C9
- B7B8BE
- ADAFB4
- A4A5A9
- 9B9C9F
- 929294
- 89898A
Harmonie kolorów
Komplementarna +180°
- DDE0EA
Monet’s Lavender
- E3E0D6
≈ Nuance
Analogowa -30° +30°
- DDE0EA
Monet’s Lavender
- D9E2E9
≈ Star Map
- E2DEE8
≈ Rare Crystal
Triada +120° +240°
- DDE0EA
Monet’s Lavender
- E9DDDB
≈ Red Dust
- DAE3DC
≈ Aqua Squeeze
Komplementarna rozszczepiona +150° +210°
- DDE0EA
Monet’s Lavender
- E7DFD7
≈ Starling’s Egg
- DEE2D8
≈ Jasmine Rice
Tetrada +90° +180° +270°
- DDE0EA
Monet’s Lavender
- E9DDDF
≈ Pink Posey
- E3E0D6
≈ Nuance
- D7E4E1
≈ Cirrus Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.31:1 · APCA Lc 16
Ag
AAANa czerni
WCAG 15.92:1 · APCA Lc 88
Najlepszy kolor tekstu: #000000
WCAG 15.92:1 (AAA) · APCA Lc 88
Contrast pairs
Fragmenty kodu
CSS
:root {
--monet-s-lavender: #dde0ea;
--monet-s-lavender-rgb: 221 224 234;
--monet-s-lavender-oklch: oklch(0.907 0.014 272.7);
}
.element {
color: var(--monet-s-lavender);
background-color: hsl(226 24% 89%);
border-color: oklch(0.907 0.014 272.7);
}Tailwind CSS v4
@theme {
--color-monet-s-lavender: #dde0ea;
--color-monet-s-lavender-50: #f4f5f9;
--color-monet-s-lavender-100: #e6e8ed;
--color-monet-s-lavender-200: #d2d4da;
--color-monet-s-lavender-300: #b5b7bf;
--color-monet-s-lavender-400: #9b9ea7;
--color-monet-s-lavender-500: #838690;
--color-monet-s-lavender-600: #6f717a;
--color-monet-s-lavender-700: #585b61;
--color-monet-s-lavender-800: #404247;
--color-monet-s-lavender-900: #2c2e31;
--color-monet-s-lavender-950: #191a1d;
}SCSS
$monet-s-lavender: #dde0ea;
$monet-s-lavender-rgb: 221, 224, 234;
$monet-s-lavender-light: mix(#fff, $monet-s-lavender, 20%);
$monet-s-lavender-dark: mix(#000, $monet-s-lavender, 20%);
.element {
color: $monet-s-lavender;
box-shadow: 0 0 0 2px rgba($monet-s-lavender, 0.35);
}