Benannte Farbe · #BB6688
Malevolent Mauve
Malevolent Mauve ist #BB6688: rgb(187 102 136), hsl(336 38% 57%), oklch(0.617 0.115 355.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Malevolent Mauve color name →
#BB6688
oklch(0.617 0.115 355.6)
Farbumrechnungen
- HEX
- #bb6688
- RGB
- rgb(187 102 136)
- HSL
- hsl(336 38% 57%)
- HWB
- hwb(336 40% 27%)
- OKLCH
- oklch(0.617 0.115 355.6)
- OKLab
- oklab(0.617 0.115 -0.009)
- CIE Lab
- lab(54.11 37.78 -2.91)
- LCH
- lch(54.11 37.89 355.6)
- CMYK
- cmyk(0% 45% 27% 27%)
Tints · Shades · Tones
Tints
- C37593
- CB849F
- D293AA
- D9A2B6
- E0B2C2
- E7C1CE
- EDD0DA
- F3E0E6
- F9EFF3
Shades
- A25875
- 8A4A63
- 733C52
- 5C2F41
- 462331
- 321722
- 1F0C13
- 0D0406
- 020001
Tones
- B66987
- B06C86
- AB6F86
- A57285
- A07584
- 9A7783
- 947982
- 8D7C82
- 877E81
Farbharmonien
Komplementär +180°
- BB6688
Malevolent Mauve
- 029B82
≈ Paolo Veronese Green
Analog -30° +30°
- BB6688
Malevolent Mauve
- A96CAB
≈ Soft Purple
- C16861
≈ Tapestry Red
Triadisch +120° +240°
- BB6688
Malevolent Mauve
- 838D32
≈ Absinthe Dreams
- 2D8FC1
≈ Christmas Blue
Geteilt komplementär +150° +210°
- BB6688
Malevolent Mauve
- 549859
≈ Wicked Witch
- 0097A4
≈ Tile Blue
Tetradisch +90° +180° +270°
- BB6688
Malevolent Mauve
- A47F21
≈ Brazen
- 029B82
≈ Paolo Veronese Green
- 6483CB
≈ Livid
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.91:1 · APCA Lc 66
Ag
AAAuf Schwarz
WCAG 5.36:1 · APCA Lc 35
Beste Textfarbe: #000000
WCAG 5.36:1 (AA) · APCA Lc 35
Contrast pairs
Code-Snippets
CSS
:root {
--malevolent-mauve: #bb6688;
--malevolent-mauve-rgb: 187 102 136;
--malevolent-mauve-oklch: oklch(0.617 0.115 355.6);
}
.element {
color: var(--malevolent-mauve);
background-color: hsl(336 38% 57%);
border-color: oklch(0.617 0.115 355.6);
}Tailwind CSS v4
@theme {
--color-malevolent-mauve: #bb6688;
--color-malevolent-mauve-50: #ffe8f5;
--color-malevolent-mauve-100: #ffd9e8;
--color-malevolent-mauve-200: #fec0d4;
--color-malevolent-mauve-300: #e89fb7;
--color-malevolent-mauve-400: #d481a1;
--color-malevolent-mauve-500: #c16389;
--color-malevolent-mauve-600: #a35474;
--color-malevolent-mauve-700: #83435d;
--color-malevolent-mauve-800: #613045;
--color-malevolent-mauve-900: #442130;
--color-malevolent-mauve-950: #2b101c;
}SCSS
$malevolent-mauve: #bb6688;
$malevolent-mauve-rgb: 187, 102, 136;
$malevolent-mauve-light: mix(#fff, $malevolent-mauve, 20%);
$malevolent-mauve-dark: mix(#000, $malevolent-mauve, 20%);
.element {
color: $malevolent-mauve;
box-shadow: 0 0 0 2px rgba($malevolent-mauve, 0.35);
}