Named color · #BB989F
Magenta Twilight
Magenta Twilight is #BB989F: rgb(187 152 159), hsl(348 20% 66%), oklch(0.714 0.043 4.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Magenta Twilight color name →
#BB989F
oklch(0.714 0.043 4.8)
Color conversions
- HEX
- #bb989f
- RGB
- rgb(187 152 159)
- HSL
- hsl(348 20% 66%)
- HWB
- hwb(348 60% 27%)
- OKLCH
- oklch(0.714 0.043 4.8)
- OKLab
- oklab(0.714 0.043 0.004)
- CIE Lab
- lab(66.27 14.29 1.51)
- LCH
- lch(66.27 14.37 6)
- CMYK
- cmyk(0% 19% 15% 27%)
Tints · Shades · Tones
Tints
- C2A2A8
- C9ACB2
- D0B6BB
- D6C0C4
- DDCACE
- E4D5D8
- EBDFE1
- F1EAEB
- F8F4F5
Shades
- A2848A
- 8A7075
- 735C61
- 5C4A4D
- 46383B
- 322729
- 1F1718
- 0D0809
- 020101
Tones
- B5969C
- AF9399
- A99196
- A38E92
- 9D8C8F
- 988A8C
- 928789
- 8C8586
- 868283
Color harmonies
Complementary +180°
- BB989F
Magenta Twilight
- 85ACA6
≈ Lake Water
Analogous -30° +30°
- BB989F
Magenta Twilight
- B499AD
≈ Veiled Violet
- BC9A91
≈ Lilac Suede
Triadic +120° +240°
- BB989F
Magenta Twilight
- 9CA88B
≈ Tsurubami Green
- 8DA6BC
≈ Notable Hue
Split-complementary +150° +210°
- BB989F
Magenta Twilight
- 8EAB97
≈ Peaslake
- 85AAB3
≈ Equanimity
Tetradic +90° +180° +270°
- BB989F
Magenta Twilight
- ABA385
≈ Herbes
- 85ACA6
≈ Lake Water
- 9AA1BE
≈ House of Owen
Contrast & accessibility
Ag
FailOn white
WCAG 2.59:1 · APCA Lc 51
Ag
AAAOn black
WCAG 8.10:1 · APCA Lc 51
Best text color: #000000
WCAG 8.10:1 (AAA) · APCA Lc 51
Contrast pairs
Code snippets
CSS
:root {
--magenta-twilight: #bb989f;
--magenta-twilight-rgb: 187 152 159;
--magenta-twilight-oklch: oklch(0.714 0.043 4.8);
}
.element {
color: var(--magenta-twilight);
background-color: hsl(348 20% 66%);
border-color: oklch(0.714 0.043 4.8);
}Tailwind CSS v4
@theme {
--color-magenta-twilight: #bb989f;
--color-magenta-twilight-50: #fff0f3;
--color-magenta-twilight-100: #f6e2e5;
--color-magenta-twilight-200: #e6cdd1;
--color-magenta-twilight-300: #ccafb4;
--color-magenta-twilight-400: #b6949b;
--color-magenta-twilight-500: #a07b82;
--color-magenta-twilight-600: #87686e;
--color-magenta-twilight-700: #6c5358;
--color-magenta-twilight-800: #503c41;
--color-magenta-twilight-900: #37292d;
--color-magenta-twilight-950: #22171a;
}SCSS
$magenta-twilight: #bb989f;
$magenta-twilight-rgb: 187, 152, 159;
$magenta-twilight-light: mix(#fff, $magenta-twilight, 20%);
$magenta-twilight-dark: mix(#000, $magenta-twilight, 20%);
.element {
color: $magenta-twilight;
box-shadow: 0 0 0 2px rgba($magenta-twilight, 0.35);
}