Adlandırılmış renk · #CFCEDC
Lavender Sparkle
Lavender Sparkle, #CFCEDC: rgb(207 206 220), hsl(244 17% 84%), oklch(0.856 0.019 289.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Lavender Sparkle color name →
#CFCEDC
oklch(0.856 0.019 289.3)
Renk dönüşümleri
- HEX
- #cfcedc
- RGB
- rgb(207 206 220)
- HSL
- hsl(244 17% 84%)
- HWB
- hwb(244 81% 14%)
- OKLCH
- oklch(0.856 0.019 289.3)
- OKLab
- oklab(0.856 0.006 -0.018)
- CIE Lab
- lab(83.16 2.31 -6.83)
- LCH
- lch(83.16 7.21 288.7)
- CMYK
- cmyk(6% 6% 0% 14%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D4D3DF
- D8D8E3
- DDDDE6
- E2E1EA
- E7E6ED
- ECEBF1
- F0F0F4
- F5F5F8
- FAFAFB
Koyu tonlar
- B4B3BF
- 9998A3
- 7F7F88
- 67666E
- 4F4E54
- 38383C
- 232326
- 100F11
- 020202
Gri tonlar
- C7C6D2
- BFBEC9
- B7B6BF
- AFAEB6
- A7A6AD
- 9F9EA4
- 97979B
- 8F8F92
- 888789
Renk uyumları
Tamamlayıcı +180°
- CFCEDC
Lavender Sparkle
- D0D1C3
≈ Wishing Well
Analog -30° +30°
- CFCEDC
Lavender Sparkle
- C8D0DD
≈ Pale Shale
- D5CCD8
≈ Purple Cream
Üçlü +120° +240°
- CFCEDC
Lavender Sparkle
- DBCCC5
≈ Pastel Parchment
- C4D4CE
≈ Celtic Grey
Bölünmüş tamamlayıcı +150° +210°
- CFCEDC
Lavender Sparkle
- D7CFC2
≈ Sandy Day
- CAD3C7
≈ Parakeet Pete
Dörtlü +90° +180° +270°
- CFCEDC
Lavender Sparkle
- DCCBCB
≈ Delirious Donkey
- D0D1C3
≈ Wishing Well
- C2D4D5
≈ Scandinavian Sky
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.55:1 · APCA Lc 25
Ag
AAASiyah üzerinde
WCAG 13.51:1 · APCA Lc 78
En iyi metin rengi: #000000
WCAG 13.51:1 (AAA) · APCA Lc 78
Contrast pairs
Kod parçacıkları
CSS
:root {
--lavender-sparkle: #cfcedc;
--lavender-sparkle-rgb: 207 206 220;
--lavender-sparkle-oklch: oklch(0.856 0.019 289.3);
}
.element {
color: var(--lavender-sparkle);
background-color: hsl(244 17% 84%);
border-color: oklch(0.856 0.019 289.3);
}Tailwind CSS v4
@theme {
--color-lavender-sparkle: #cfcedc;
--color-lavender-sparkle-50: #f5f4fa;
--color-lavender-sparkle-100: #e8e7ee;
--color-lavender-sparkle-200: #d4d3dc;
--color-lavender-sparkle-300: #b7b6c1;
--color-lavender-sparkle-400: #9e9da9;
--color-lavender-sparkle-500: #858492;
--color-lavender-sparkle-600: #71707c;
--color-lavender-sparkle-700: #5a5a63;
--color-lavender-sparkle-800: #424149;
--color-lavender-sparkle-900: #2d2d33;
--color-lavender-sparkle-950: #1a1a1e;
}SCSS
$lavender-sparkle: #cfcedc;
$lavender-sparkle-rgb: 207, 206, 220;
$lavender-sparkle-light: mix(#fff, $lavender-sparkle, 20%);
$lavender-sparkle-dark: mix(#000, $lavender-sparkle, 20%);
.element {
color: $lavender-sparkle;
box-shadow: 0 0 0 2px rgba($lavender-sparkle, 0.35);
}