Colore con nome · #5B4763
Purple People Eater
Purple People Eater è #5B4763: rgb(91 71 99), hsl(283 16% 33%), oklch(0.43 0.052 316.2). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Purple People Eater color name →
#5B4763
oklch(0.43 0.052 316.2)
Conversioni di colore
- 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%)
Tinte · Ombre · Toni
Tinte
- 6A5872
- 796980
- 897A8F
- 998C9F
- AA9EAE
- BAB1BE
- CBC4CE
- DCD7DE
- EDEBEE
Ombre
- 4E3D55
- 413247
- 35283A
- 291F2E
- 1E1621
- 130D16
- 09060B
- 030203
- 000000
Toni
- 5F4D66
- 625269
- 66586C
- 6A5D6F
- 6D6372
- 716975
- 756F77
- 79747A
- 7C7A7D
Armonie di colore
Complementare +180°
- 5B4763
Purple People Eater
- 43563A
≈ Green Tone Ink
Analogo -30° +30°
- 5B4763
Purple People Eater
- 4D4C6B
≈ Darlak
- 654456
≈ Plum Harvest
Triadico +120° +240°
- 5B4763
Purple People Eater
- 604C2E
≈ Dallas
- 295959
≈ Bayberry
Complementare divisa +150° +210°
- 5B4763
Purple People Eater
- 53522F
≈ Warplock Bronze
- 325949
≈ Billiard Green
Tetradico +90° +180° +270°
- 5B4763
Purple People Eater
- 684737
≈ Buckeye
- 43563A
≈ Green Tone Ink
- 2E5666
≈ Deep Loch
Contrasto e accessibilità
Ag
AAASu bianco
WCAG 8.31:1 · APCA Lc 89
Ag
FailSu nero
WCAG 2.52:1 · APCA Lc 14
Miglior colore del testo: #FFFFFF
WCAG 8.31:1 (AAA) · APCA Lc 89
Contrast pairs
Frammenti di codice
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);
}