Adlandırılmış renk · #D521B8
Magentella
Magentella, #D521B8: rgb(213 33 184), hsl(310 73% 48%), oklch(0.605 0.251 336.4). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Pink mean? → · Magentella color name →
#D521B8
oklch(0.605 0.251 336.4)
Renk dönüşümleri
- HEX
- #d521b8
- RGB
- rgb(213 33 184)
- HSL
- hsl(310 73% 48%)
- HWB
- hwb(310 13% 16%)
- OKLCH
- oklch(0.605 0.251 336.4)
- OKLab
- oklab(0.605 0.23 -0.101)
- CIE Lab
- lab(50.45 75.12 -36.13)
- LCH
- lch(50.45 83.35 334.3)
- CMYK
- cmyk(0% 85% 14% 16%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- DC45C0
- E25FC7
- E876CE
- ED8BD6
- F29FDD
- F6B2E4
- F9C6EB
- FCD9F2
- FEECF8
Koyu tonlar
- B91BA0
- 9E1688
- 831071
- 6A0B5B
- 510645
- 3A0331
- 24011E
- 10000C
- 020002
Gri tonlar
- CE36B3
- C645AD
- BF50A8
- B759A2
- AF629D
- A76997
- 9E6F92
- 94758C
- 8B7B86
Renk uyumları
Tamamlayıcı +180°
- D521B8
Magentella
- 009B5C
≈ Shamrock
Analog -30° +30°
- D521B8
Magentella
- A943F4
≈ Pisces Vivid Amethyst
- EC006A
≈ Hyper Pink
Üçlü +120° +240°
- D521B8
Magentella
- 988100
≈ Thicket Green
- 0091AB
≈ Cape Pond
Bölünmüş tamamlayıcı +150° +210°
- D521B8
Magentella
- 6A9100
≈ Canopy
- 00968C
≈ Lights at Sea
Dörtlü +90° +180° +270°
- D521B8
Magentella
- B76F00
≈ Sweet Mulled Cider
- 009B5C
≈ Shamrock
- 0087D9
≈ Blue Cola
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 4.43:1 · APCA Lc 69
Ag
AASiyah üzerinde
WCAG 4.73:1 · APCA Lc 33
En iyi metin rengi: #000000
WCAG 4.73:1 (AA) · APCA Lc 33
Contrast pairs
Kod parçacıkları
CSS
:root {
--magentella: #d521b8;
--magentella-rgb: 213 33 184;
--magentella-oklch: oklch(0.605 0.251 336.4);
}
.element {
color: var(--magentella);
background-color: hsl(310 73% 48%);
border-color: oklch(0.605 0.251 336.4);
}Tailwind CSS v4
@theme {
--color-magentella: #d521b8;
--color-magentella-50: #ffdaff;
--color-magentella-100: #ffc7ff;
--color-magentella-200: #ffa8f9;
--color-magentella-300: #ff7de3;
--color-magentella-400: #f352d4;
--color-magentella-500: #e100c2;
--color-magentella-600: #be0ca4;
--color-magentella-700: #990d83;
--color-magentella-800: #710864;
--color-magentella-900: #500646;
--color-magentella-950: #35002e;
}SCSS
$magentella: #d521b8;
$magentella-rgb: 213, 33, 184;
$magentella-light: mix(#fff, $magentella, 20%);
$magentella-dark: mix(#000, $magentella, 20%);
.element {
color: $magentella;
box-shadow: 0 0 0 2px rgba($magentella, 0.35);
}