Adlandırılmış renk · #9884B9
Bougainvillaea
Bougainvillaea, #9884B9: rgb(152 132 185), hsl(263 27% 62%), oklch(0.651 0.081 301.5). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Purple mean? → · Bougainvillaea color name →
#9884B9
oklch(0.651 0.081 301.5)
Renk dönüşümleri
- HEX
- #9884b9
- RGB
- rgb(152 132 185)
- HSL
- hsl(263 27% 62%)
- HWB
- hwb(263 52% 27%)
- OKLCH
- oklch(0.651 0.081 301.5)
- OKLab
- oklab(0.651 0.042 -0.069)
- CIE Lab
- lab(58.48 15.95 -25.11)
- LCH
- lch(58.48 29.75 302.4)
- CMYK
- cmyk(18% 29% 0% 27%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A290C0
- AC9CC7
- B6A8CE
- C0B4D5
- CAC0DC
- D5CDE3
- DFD9EA
- EAE6F1
- F4F2F8
Koyu tonlar
- 8472A0
- 706089
- 5C4F71
- 4A3F5B
- 382F46
- 272031
- 17121E
- 08060D
- 010102
Gri tonlar
- 9684B3
- 9384AE
- 9183A8
- 8E83A2
- 8C829D
- 898297
- 878291
- 85818C
- 828186
Renk uyumları
Tamamlayıcı +180°
- 9884B9
Bougainvillaea
- 87975F
≈ Vesuvian Green
Analog -30° +30°
- 9884B9
Bougainvillaea
- 7E8DC1
≈ Larkspur Bouquet
- AD7DA6
≈ Victorian Violet
Üçlü +120° +240°
- 9884B9
Bougainvillaea
- B3845C
≈ Choco Biscuit
- 51A093
≈ Aqua Revival
Bölünmüş tamamlayıcı +150° +210°
- 9884B9
Bougainvillaea
- A18E54
≈ Green Ochre
- 6A9E77
≈ Holiday Camp
Dörtlü +90° +180° +270°
- 9884B9
Bougainvillaea
- BB7D71
≈ Faneuil Brick
- 87975F
≈ Vesuvian Green
- 4D9DAC
≈ Summer Turquoise Blue
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.31:1 · APCA Lc 61
Ag
AASiyah üzerinde
WCAG 6.33:1 · APCA Lc 41
En iyi metin rengi: #000000
WCAG 6.33:1 (AA) · APCA Lc 41
Contrast pairs
Kod parçacıkları
CSS
:root {
--bougainvillaea: #9884b9;
--bougainvillaea-rgb: 152 132 185;
--bougainvillaea-oklch: oklch(0.651 0.081 301.5);
}
.element {
color: var(--bougainvillaea);
background-color: hsl(263 27% 62%);
border-color: oklch(0.651 0.081 301.5);
}Tailwind CSS v4
@theme {
--color-bougainvillaea: #9884b9;
--color-bougainvillaea-50: #faf0ff;
--color-bougainvillaea-100: #ede2ff;
--color-bougainvillaea-200: #dbccf1;
--color-bougainvillaea-300: #c0aeda;
--color-bougainvillaea-400: #a794c7;
--color-bougainvillaea-500: #9079b3;
--color-bougainvillaea-600: #796797;
--color-bougainvillaea-700: #615279;
--color-bougainvillaea-800: #463c5a;
--color-bougainvillaea-900: #31293f;
--color-bougainvillaea-950: #1d1728;
}SCSS
$bougainvillaea: #9884b9;
$bougainvillaea-rgb: 152, 132, 185;
$bougainvillaea-light: mix(#fff, $bougainvillaea, 20%);
$bougainvillaea-dark: mix(#000, $bougainvillaea, 20%);
.element {
color: $bougainvillaea;
box-shadow: 0 0 0 2px rgba($bougainvillaea, 0.35);
}