Named color · #463F60
Mulberry Mauve Black
Mulberry Mauve Black is #463F60: rgb(70 63 96), hsl(253 21% 31%), oklch(0.389 0.056 293.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Mulberry Mauve Black color name →
#463F60
oklch(0.389 0.056 293.4)
Color conversions
- HEX
- #463f60
- RGB
- rgb(70 63 96)
- HSL
- hsl(253 21% 31%)
- HWB
- hwb(253 25% 62%)
- OKLCH
- oklch(0.389 0.056 293.4)
- OKLab
- oklab(0.389 0.022 -0.051)
- CIE Lab
- lab(28.47 9.25 -18.6)
- LCH
- lch(28.47 20.77 296.4)
- CMYK
- cmyk(27% 34% 0% 62%)
Tints · Shades · Tones
Tints
- 56506F
- 67627E
- 79748E
- 8B879D
- 9D9AAD
- B0ADBD
- C3C1CD
- D7D5DE
- EBEAEE
Shades
- 3C3552
- 322C45
- 282338
- 1E1B2C
- 151220
- 0D0A15
- 05040A
- 020103
- 000000
Tones
- 4B4563
- 514C67
- 57526A
- 5C586D
- 625F70
- 686574
- 6E6C77
- 74737A
- 7A797D
Color harmonies
Complementary +180°
- 463F60
Mulberry Mauve Black
- 454824
≈ Nori Seaweed Green
Analogous -30° +30°
- 463F60
Mulberry Mauve Black
- 354563
≈ Stay the Night
- 533A56
≈ Dark Blackberry
Triadic +120° +240°
- 463F60
Mulberry Mauve Black
- 5C3C28
≈ Bracken
- 204F42
≈ English Green
Split-complementary +150° +210°
- 463F60
Mulberry Mauve Black
- 534220
≈ Clove Yellow Brown
- 324D31
≈ Nettle Green
Tetradic +90° +180° +270°
- 463F60
Mulberry Mauve Black
- 5F3936
≈ Umber Brown
- 454824
≈ Nori Seaweed Green
- 184D52
≈ Iron Teal
Contrast & accessibility
Ag
AAAOn white
WCAG 9.81:1 · APCA Lc 93
Ag
FailOn black
WCAG 2.14:1 · APCA Lc 10
Best text color: #FFFFFF
WCAG 9.81:1 (AAA) · APCA Lc 93
Contrast pairs
Code snippets
CSS
:root {
--mulberry-mauve-black: #463f60;
--mulberry-mauve-black-rgb: 70 63 96;
--mulberry-mauve-black-oklch: oklch(0.389 0.056 293.4);
}
.element {
color: var(--mulberry-mauve-black);
background-color: hsl(253 21% 31%);
border-color: oklch(0.389 0.056 293.4);
}Tailwind CSS v4
@theme {
--color-mulberry-mauve-black: #463f60;
--color-mulberry-mauve-black-50: #f6f2ff;
--color-mulberry-mauve-black-100: #e9e5f9;
--color-mulberry-mauve-black-200: #d6d0ea;
--color-mulberry-mauve-black-300: #b9b2d1;
--color-mulberry-mauve-black-400: #9f99bd;
--color-mulberry-mauve-black-500: #8780a8;
--color-mulberry-mauve-black-600: #736c8e;
--color-mulberry-mauve-black-700: #5c5672;
--color-mulberry-mauve-black-800: #423f54;
--color-mulberry-mauve-black-900: #2e2b3b;
--color-mulberry-mauve-black-950: #1b1925;
}SCSS
$mulberry-mauve-black: #463f60;
$mulberry-mauve-black-rgb: 70, 63, 96;
$mulberry-mauve-black-light: mix(#fff, $mulberry-mauve-black, 20%);
$mulberry-mauve-black-dark: mix(#000, $mulberry-mauve-black, 20%);
.element {
color: $mulberry-mauve-black;
box-shadow: 0 0 0 2px rgba($mulberry-mauve-black, 0.35);
}