Nazwany kolor · #D8E0EA
Violet Vignette
Violet Vignette to #D8E0EA: rgb(216 224 234), hsl(213 30% 88%), oklch(0.904 0.016 253.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Violet Vignette color name →
#D8E0EA
oklch(0.904 0.016 253.9)
Konwersje koloru
- HEX
- #d8e0ea
- RGB
- rgb(216 224 234)
- HSL
- hsl(213 30% 88%)
- HWB
- hwb(213 85% 8%)
- OKLCH
- oklch(0.904 0.016 253.9)
- OKLab
- oklab(0.904 -0.004 -0.016)
- CIE Lab
- lab(88.78 -1.37 -5.88)
- LCH
- lch(88.78 6.04 256.9)
- CMYK
- cmyk(8% 4% 0% 8%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DCE3EC
- E0E6EE
- E4E9F0
- E7ECF2
- EBEFF4
- EFF3F7
- F3F6F9
- F7F9FB
- FBFCFD
Odcienie ciemniejsze
- BCC3CB
- A0A6AE
- 858A91
- 6B7075
- 53565A
- 3B3E41
- 252729
- 111213
- 020203
Tony
- CFD6DF
- C6CCD4
- BDC2C9
- B4B8BE
- ABAFB4
- A2A5A9
- 9A9C9F
- 919294
- 88898A
Harmonie kolorów
Komplementarna +180°
- D8E0EA
Violet Vignette
- E6DED4
≈ Modest White
Analogowa -30° +30°
- D8E0EA
Violet Vignette
- D4E2E7
≈ Aloof
- DDDEEA
≈ Timid Purple
Triada +120° +240°
- D8E0EA
Violet Vignette
- EADBDC
≈ Discrete Pink
- DBE2D7
≈ Salty Breeze
Komplementarna rozszczepiona +150° +210°
- D8E0EA
Violet Vignette
- E9DCD7
≈ Faded Shells
- E1E0D4
≈ Italian Ice
Tetrada +90° +180° +270°
- D8E0EA
Violet Vignette
- E8DBE2
≈ Bōsōzoku Pink
- E6DED4
≈ Modest White
- D6E3DC
≈ Night Wind
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.33:1 · APCA Lc 16
Ag
AAANa czerni
WCAG 15.77:1 · APCA Lc 87
Najlepszy kolor tekstu: #000000
WCAG 15.77:1 (AAA) · APCA Lc 87
Contrast pairs
Fragmenty kodu
CSS
:root {
--violet-vignette: #d8e0ea;
--violet-vignette-rgb: 216 224 234;
--violet-vignette-oklch: oklch(0.904 0.016 253.9);
}
.element {
color: var(--violet-vignette);
background-color: hsl(213 30% 88%);
border-color: oklch(0.904 0.016 253.9);
}Tailwind CSS v4
@theme {
--color-violet-vignette: #d8e0ea;
--color-violet-vignette-50: #f2f5fa;
--color-violet-vignette-100: #e4e8ed;
--color-violet-vignette-200: #d0d5db;
--color-violet-vignette-300: #b2b8c0;
--color-violet-vignette-400: #989fa8;
--color-violet-vignette-500: #7f8791;
--color-violet-vignette-600: #6c727b;
--color-violet-vignette-700: #565b62;
--color-violet-vignette-800: #3e4348;
--color-violet-vignette-900: #2b2e32;
--color-violet-vignette-950: #181b1e;
}SCSS
$violet-vignette: #d8e0ea;
$violet-vignette-rgb: 216, 224, 234;
$violet-vignette-light: mix(#fff, $violet-vignette, 20%);
$violet-vignette-dark: mix(#000, $violet-vignette, 20%);
.element {
color: $violet-vignette;
box-shadow: 0 0 0 2px rgba($violet-vignette, 0.35);
}