Adlandırılmış renk · #C8D4E4
Violet Wisp
Violet Wisp, #C8D4E4: rgb(200 212 228), hsl(214 34% 84%), oklch(0.866 0.026 255.6). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Violet Wisp color name →
#C8D4E4
oklch(0.866 0.026 255.6)
Renk dönüşümleri
- HEX
- #c8d4e4
- RGB
- rgb(200 212 228)
- HSL
- hsl(214 34% 84%)
- HWB
- hwb(214 78% 11%)
- OKLCH
- oklch(0.866 0.026 255.6)
- OKLab
- oklab(0.866 -0.006 -0.025)
- CIE Lab
- lab(84.36 -1.85 -9.38)
- LCH
- lch(84.36 9.56 258.9)
- CMYK
- cmyk(12% 7% 0% 11%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- CDD8E7
- D3DDE9
- D8E1EC
- DEE5EF
- E3E9F2
- E9EEF4
- EEF2F7
- F4F6FA
- F9FBFC
Koyu tonlar
- AEB8C6
- 949DA9
- 7B838D
- 636972
- 4C5158
- 363A3F
- 212428
- 0F1012
- 020203
Gri tonlar
- C1CBDA
- B9C3CF
- B2BAC5
- ABB2BB
- A3A9B1
- 9CA1A7
- 95989D
- 8E9093
- 87888A
Renk uyumları
Tamamlayıcı +180°
- C8D4E4
Violet Wisp
- DDD1C1
≈ Erosion
Analog -30° +30°
- C8D4E4
Violet Wisp
- C2D7E0
≈ Skinny Dippin’
- D1D1E4
≈ Bashful Lilac
Üçlü +120° +240°
- C8D4E4
Violet Wisp
- E3CCCD
≈ Mauve Morn
- CCD7C6
≈ Spring Valley
Bölünmüş tamamlayıcı +150° +210°
- C8D4E4
Violet Wisp
- E2CEC5
≈ Ginger Shortbread
- D5D4C1
≈ Barest Celadon
Dörtlü +90° +180° +270°
- C8D4E4
Violet Wisp
- E0CCD6
≈ Prim
- DDD1C1
≈ Erosion
- C4D9CF
≈ Breaktime
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.50:1 · APCA Lc 23
Ag
AAASiyah üzerinde
WCAG 13.99:1 · APCA Lc 80
En iyi metin rengi: #000000
WCAG 13.99:1 (AAA) · APCA Lc 80
Contrast pairs
Kod parçacıkları
CSS
:root {
--violet-wisp: #c8d4e4;
--violet-wisp-rgb: 200 212 228;
--violet-wisp-oklch: oklch(0.866 0.026 255.6);
}
.element {
color: var(--violet-wisp);
background-color: hsl(214 34% 84%);
border-color: oklch(0.866 0.026 255.6);
}Tailwind CSS v4
@theme {
--color-violet-wisp: #c8d4e4;
--color-violet-wisp-50: #f1f6fd;
--color-violet-wisp-100: #e3e8f1;
--color-violet-wisp-200: #cdd5df;
--color-violet-wisp-300: #afb8c5;
--color-violet-wisp-400: #959fae;
--color-violet-wisp-500: #7b8797;
--color-violet-wisp-600: #687280;
--color-violet-wisp-700: #535c67;
--color-violet-wisp-800: #3c434b;
--color-violet-wisp-900: #292e34;
--color-violet-wisp-950: #171b20;
}SCSS
$violet-wisp: #c8d4e4;
$violet-wisp-rgb: 200, 212, 228;
$violet-wisp-light: mix(#fff, $violet-wisp, 20%);
$violet-wisp-dark: mix(#000, $violet-wisp, 20%);
.element {
color: $violet-wisp;
box-shadow: 0 0 0 2px rgba($violet-wisp, 0.35);
}