Adlandırılmış renk · #DC89A8
Vivacious Pink
Vivacious Pink, #DC89A8: rgb(220 137 168), hsl(338 54% 70%), oklch(0.725 0.108 356.2). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Red mean? → · Vivacious Pink color name →
#DC89A8
oklch(0.725 0.108 356.2)
Renk dönüşümleri
- HEX
- #dc89a8
- RGB
- rgb(220 137 168)
- HSL
- hsl(338 54% 70%)
- HWB
- hwb(338 54% 14%)
- OKLCH
- oklch(0.725 0.108 356.2)
- OKLab
- oklab(0.725 0.107 -0.007)
- CIE Lab
- lab(66.7 35.49 -2.34)
- LCH
- lch(66.7 35.57 356.2)
- CMYK
- cmyk(0% 38% 24% 14%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- E095B0
- E5A1B9
- E9ACC1
- EDB8CA
- F0C4D3
- F4D0DB
- F7DBE4
- FAE7ED
- FCF3F6
Koyu tonlar
- BF7692
- A3647C
- 885367
- 6E4252
- 54313F
- 3C222C
- 26141A
- 11070A
- 020101
Gri tonlar
- D389A4
- CA88A0
- C1879C
- B88698
- AF8694
- A68590
- 9C848C
- 938288
- 8A8184
Renk uyumları
Tamamlayıcı +180°
- DC89A8
Vivacious Pink
- 4DBCA4
≈ Mountain Lake Azure
Analog -30° +30°
- DC89A8
Vivacious Pink
- C98ECA
≈ Rose Souvenir
- E28B82
≈ Coral Haze
Üçlü +120° +240°
- DC89A8
Vivacious Pink
- A2AF5D
≈ Pandan Cake
- 5CB0E1
≈ Sanctuary Spa
Bölünmüş tamamlayıcı +150° +210°
- DC89A8
Vivacious Pink
- 78B87D
≈ Lucerne
- 3DB9C7
≈ Water Sports
Dörtlü +90° +180° +270°
- DC89A8
Vivacious Pink
- C4A151
≈ Sauterne
- 4DBCA4
≈ Mountain Lake Azure
- 87A4EA
≈ Blue Cue
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.56:1 · APCA Lc 50
Ag
AAASiyah üzerinde
WCAG 8.18:1 · APCA Lc 52
En iyi metin rengi: #000000
WCAG 8.18:1 (AAA) · APCA Lc 52
Contrast pairs
Kod parçacıkları
CSS
:root {
--vivacious-pink: #dc89a8;
--vivacious-pink-rgb: 220 137 168;
--vivacious-pink-oklch: oklch(0.725 0.108 356.2);
}
.element {
color: var(--vivacious-pink);
background-color: hsl(338 54% 70%);
border-color: oklch(0.725 0.108 356.2);
}Tailwind CSS v4
@theme {
--color-vivacious-pink: #dc89a8;
--color-vivacious-pink-50: #ffe9f5;
--color-vivacious-pink-100: #ffdae7;
--color-vivacious-pink-200: #fcc2d4;
--color-vivacious-pink-300: #e5a1b7;
--color-vivacious-pink-400: #d183a0;
--color-vivacious-pink-500: #bd6688;
--color-vivacious-pink-600: #a05773;
--color-vivacious-pink-700: #80455c;
--color-vivacious-pink-800: #5f3245;
--color-vivacious-pink-900: #432230;
--color-vivacious-pink-950: #2b111c;
}SCSS
$vivacious-pink: #dc89a8;
$vivacious-pink-rgb: 220, 137, 168;
$vivacious-pink-light: mix(#fff, $vivacious-pink, 20%);
$vivacious-pink-dark: mix(#000, $vivacious-pink, 20%);
.element {
color: $vivacious-pink;
box-shadow: 0 0 0 2px rgba($vivacious-pink, 0.35);
}