En yakın adlandırılmış renk · #BA44AD
#BA44AD
En yakın adlandırılmış renk: Mystifying Magenta
#BA44AD (rgb(186 68 173), hsl(307 46% 50%), oklch(0.586 0.193 332.4)) en çok Mystifying Magenta adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#BA44AD
oklch(0.586 0.193 332.4)
Renk dönüşümleri
- HEX
- #ba44ad
- RGB
- rgb(186 68 173)
- HSL
- hsl(307 46% 50%)
- HWB
- hwb(307 27% 27%)
- OKLCH
- oklch(0.586 0.193 332.4)
- OKLab
- oklab(0.586 0.171 -0.09)
- CIE Lab
- lab(49.01 57.14 -32.36)
- LCH
- lch(49.01 65.66 330.5)
- CMYK
- cmyk(0% 63% 7% 27%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- C259B6
- CB6DBE
- D280C6
- DA92CF
- E1A4D7
- E8B7DF
- EEC9E7
- F4DBEF
- FAEDF7
Koyu tonlar
- A13A96
- 89307F
- 72266A
- 5C1D55
- 461441
- 320C2D
- 1E051B
- 0D020B
- 020001
Gri tonlar
- B54DA9
- B055A4
- AB5CA0
- A6629C
- A06897
- 9A6D93
- 94728E
- 8E778A
- 877C85
Renk uyumları
Tamamlayıcı +180°
- BA44AD
Mystifying Magenta
- 00954C
≈ Garnish
Analog -30° +30°
- BA44AD
Mystifying Magenta
- 9356D9
≈ Morado Purple
- D13872
≈ Qermez Red
Üçlü +120° +240°
- BA44AD
Mystifying Magenta
- 957900
≈ Bhūrā Brown
- 008B9F
≈ Parrot Flight
Bölünmüş tamamlayıcı +150° +210°
- BA44AD
Mystifying Magenta
- 6E8800
≈ Swamp Green
- 009081
≈ Philips Green
Dörtlü +90° +180° +270°
- BA44AD
Mystifying Magenta
- B36600
≈ Umber
- 00954C
≈ Garnish
- 0083C7
≈ Water Raceway
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 4.64:1 · APCA Lc 71
Ag
AASiyah üzerinde
WCAG 4.51:1 · APCA Lc 30
En iyi metin rengi: #FFFFFF
WCAG 4.64:1 (AA) · APCA Lc 71
Contrast pairs
Kod parçacıkları
CSS
:root {
--mystifying-magenta: #ba44ad;
--mystifying-magenta-rgb: 186 68 173;
--mystifying-magenta-oklch: oklch(0.586 0.193 332.4);
}
.element {
color: var(--mystifying-magenta);
background-color: hsl(307 46% 50%);
border-color: oklch(0.586 0.193 332.4);
}Tailwind CSS v4
@theme {
--color-mystifying-magenta: #ba44ad;
--color-mystifying-magenta-50: #ffe1ff;
--color-mystifying-magenta-100: #ffd0ff;
--color-mystifying-magenta-200: #ffb5f6;
--color-mystifying-magenta-300: #f28fdf;
--color-mystifying-magenta-400: #de6dd0;
--color-mystifying-magenta-500: #cb46bd;
--color-mystifying-magenta-600: #ac3d9f;
--color-mystifying-magenta-700: #8a3180;
--color-mystifying-magenta-800: #652261;
--color-mystifying-magenta-900: #471744;
--color-mystifying-magenta-950: #2e072c;
}SCSS
$mystifying-magenta: #ba44ad;
$mystifying-magenta-rgb: 186, 68, 173;
$mystifying-magenta-light: mix(#fff, $mystifying-magenta, 20%);
$mystifying-magenta-dark: mix(#000, $mystifying-magenta, 20%);
.element {
color: $mystifying-magenta;
box-shadow: 0 0 0 2px rgba($mystifying-magenta, 0.35);
}