Adlandırılmış renk · #5B4763
Purple People Eater
Purple People Eater, #5B4763: rgb(91 71 99), hsl(283 16% 33%), oklch(0.43 0.052 316.2). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Purple mean? → · Purple People Eater color name →
#5B4763
oklch(0.43 0.052 316.2)
Renk dönüşümleri
- HEX
- #5b4763
- RGB
- rgb(91 71 99)
- HSL
- hsl(283 16% 33%)
- HWB
- hwb(283 28% 61%)
- OKLCH
- oklch(0.43 0.052 316.2)
- OKLab
- oklab(0.43 0.037 -0.036)
- CIE Lab
- lab(33.14 13.09 -13.14)
- LCH
- lch(33.14 18.55 314.9)
- CMYK
- cmyk(8% 28% 0% 61%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 6A5872
- 796980
- 897A8F
- 998C9F
- AA9EAE
- BAB1BE
- CBC4CE
- DCD7DE
- EDEBEE
Koyu tonlar
- 4E3D55
- 413247
- 35283A
- 291F2E
- 1E1621
- 130D16
- 09060B
- 030203
- 000000
Gri tonlar
- 5F4D66
- 625269
- 66586C
- 6A5D6F
- 6D6372
- 716975
- 756F77
- 79747A
- 7C7A7D
Renk uyumları
Tamamlayıcı +180°
- 5B4763
Purple People Eater
- 43563A
≈ Green Tone Ink
Analog -30° +30°
- 5B4763
Purple People Eater
- 4D4C6B
≈ Darlak
- 654456
≈ Plum Harvest
Üçlü +120° +240°
- 5B4763
Purple People Eater
- 604C2E
≈ Dallas
- 295959
≈ Bayberry
Bölünmüş tamamlayıcı +150° +210°
- 5B4763
Purple People Eater
- 53522F
≈ Warplock Bronze
- 325949
≈ Billiard Green
Dörtlü +90° +180° +270°
- 5B4763
Purple People Eater
- 684737
≈ Buckeye
- 43563A
≈ Green Tone Ink
- 2E5666
≈ Deep Loch
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 8.31:1 · APCA Lc 89
Ag
FailSiyah üzerinde
WCAG 2.52:1 · APCA Lc 14
En iyi metin rengi: #FFFFFF
WCAG 8.31:1 (AAA) · APCA Lc 89
Contrast pairs
Kod parçacıkları
CSS
:root {
--purple-people-eater: #5b4763;
--purple-people-eater-rgb: 91 71 99;
--purple-people-eater-oklch: oklch(0.43 0.052 316.2);
}
.element {
color: var(--purple-people-eater);
background-color: hsl(283 16% 33%);
border-color: oklch(0.43 0.052 316.2);
}Tailwind CSS v4
@theme {
--color-purple-people-eater: #5b4763;
--color-purple-people-eater-50: #fcf1ff;
--color-purple-people-eater-100: #efe3f3;
--color-purple-people-eater-200: #decee3;
--color-purple-people-eater-300: #c3b0c9;
--color-purple-people-eater-400: #ab95b3;
--color-purple-people-eater-500: #947c9e;
--color-purple-people-eater-600: #7d6985;
--color-purple-people-eater-700: #64546b;
--color-purple-people-eater-800: #493d4f;
--color-purple-people-eater-900: #332a37;
--color-purple-people-eater-950: #1e1822;
}SCSS
$purple-people-eater: #5b4763;
$purple-people-eater-rgb: 91, 71, 99;
$purple-people-eater-light: mix(#fff, $purple-people-eater, 20%);
$purple-people-eater-dark: mix(#000, $purple-people-eater, 20%);
.element {
color: $purple-people-eater;
box-shadow: 0 0 0 2px rgba($purple-people-eater, 0.35);
}