Adlandırılmış renk · #DCCFCE
Light Hint of Lavender
Light Hint of Lavender, #DCCFCE: rgb(220 207 206), hsl(4 17% 84%), oklch(0.865 0.015 22.8). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Light Hint of Lavender color name →
#DCCFCE
oklch(0.865 0.015 22.8)
Renk dönüşümleri
- HEX
- #dccfce
- RGB
- rgb(220 207 206)
- HSL
- hsl(4 17% 84%)
- HWB
- hwb(4 81% 14%)
- OKLCH
- oklch(0.865 0.015 22.8)
- OKLab
- oklab(0.865 0.013 0.006)
- CIE Lab
- lab(84.17 4.53 2.2)
- LCH
- lch(84.17 5.04 25.9)
- CMYK
- cmyk(0% 6% 6% 14%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- DFD4D3
- E3D8D8
- E6DDDC
- EAE2E1
- EDE7E6
- F1ECEB
- F4F0F0
- F8F5F5
- FBFAFA
Koyu tonlar
- BFB4B3
- A39998
- 887F7F
- 6E6766
- 544F4E
- 3C3838
- 262323
- 11100F
- 020202
Gri tonlar
- D2C7C6
- C9BFBE
- C0B7B6
- B6AFAE
- ADA7A6
- A49F9E
- 9B9797
- 928F8F
- 898887
Renk uyumları
Tamamlayıcı +180°
- DCCFCE
Light Hint of Lavender
- C8D6D7
≈ Skydiving
Analog -30° +30°
- DCCFCE
Light Hint of Lavender
- DBCFD3
≈ Stardust Ballroom
- DBD0CA
≈ Mushroom Risotto
Üçlü +120° +240°
- DCCFCE
Light Hint of Lavender
- CDD5CC
≈ Celadon Glaze
- CDD3DC
≈ Gentle Blue
Bölünmüş tamamlayıcı +150° +210°
- DCCFCE
Light Hint of Lavender
- C9D6D1
≈ Blue Lullaby
- CAD4DB
≈ Mild Blue
Dörtlü +90° +180° +270°
- DCCFCE
Light Hint of Lavender
- D2D4C9
≈ Stony Path
- C8D6D7
≈ Skydiving
- D2D1DB
≈ Frosted Lilac
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.51:1 · APCA Lc 24
Ag
AAASiyah üzerinde
WCAG 13.85:1 · APCA Lc 79
En iyi metin rengi: #000000
WCAG 13.85:1 (AAA) · APCA Lc 79
Contrast pairs
Kod parçacıkları
CSS
:root {
--light-hint-of-lavender: #dccfce;
--light-hint-of-lavender-rgb: 220 207 206;
--light-hint-of-lavender-oklch: oklch(0.865 0.015 22.8);
}
.element {
color: var(--light-hint-of-lavender);
background-color: hsl(4 17% 84%);
border-color: oklch(0.865 0.015 22.8);
}Tailwind CSS v4
@theme {
--color-light-hint-of-lavender: #dccfce;
--color-light-hint-of-lavender-50: #f9f4f3;
--color-light-hint-of-lavender-100: #ede6e5;
--color-light-hint-of-lavender-200: #dad2d1;
--color-light-hint-of-lavender-300: #bfb5b4;
--color-light-hint-of-lavender-400: #a79b9a;
--color-light-hint-of-lavender-500: #908382;
--color-light-hint-of-lavender-600: #7a6f6e;
--color-light-hint-of-lavender-700: #615858;
--color-light-hint-of-lavender-800: #474040;
--color-light-hint-of-lavender-900: #312c2c;
--color-light-hint-of-lavender-950: #1d1919;
}SCSS
$light-hint-of-lavender: #dccfce;
$light-hint-of-lavender-rgb: 220, 207, 206;
$light-hint-of-lavender-light: mix(#fff, $light-hint-of-lavender, 20%);
$light-hint-of-lavender-dark: mix(#000, $light-hint-of-lavender, 20%);
.element {
color: $light-hint-of-lavender;
box-shadow: 0 0 0 2px rgba($light-hint-of-lavender, 0.35);
}