Benannte Farbe · #BAAFAC
Vintage Mauve
Vintage Mauve ist #BAAFAC: rgb(186 175 172), hsl(13 9% 70%), oklch(0.762 0.013 35.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Vintage Mauve color name →
#BAAFAC
oklch(0.762 0.013 35.7)
Farbumrechnungen
- HEX
- #baafac
- RGB
- rgb(186 175 172)
- HSL
- hsl(13 9% 70%)
- HWB
- hwb(13 67% 27%)
- OKLCH
- oklch(0.762 0.013 35.7)
- OKLab
- oklab(0.762 0.011 0.008)
- CIE Lab
- lab(72.33 3.67 3.03)
- LCH
- lch(72.33 4.76 39.5)
- CMYK
- cmyk(0% 6% 8% 27%)
Tints · Shades · Tones
Tints
- C1B7B4
- C8BFBC
- CEC6C4
- D5CECC
- DCD6D5
- E3DEDD
- EAE6E5
- F1EFEE
- F8F7F6
Shades
- A19895
- 89817F
- 726B69
- 5C5654
- 464140
- 322E2D
- 1E1C1B
- 0D0B0B
- 020101
Tones
- B4AAA7
- AEA5A3
- A8A19F
- A29C9A
- 9D9796
- 979291
- 918E8D
- 8B8989
- 868584
Farbharmonien
Komplementär +180°
- BAAFAC
Vintage Mauve
- A9B4B7
≈ Casper
Analog -30° +30°
- BAAFAC
Vintage Mauve
- BAAEB0
≈ Antique Mauve
- B8B0A9
≈ Mercurial
Triadisch +120° +240°
- BAAFAC
Vintage Mauve
- ABB4AE
≈ Vinalhaven
- AFB1BB
≈ A Month of Sundays
Geteilt komplementär +150° +210°
- BAAFAC
Vintage Mauve
- A9B5B3
≈ Periglacial Blue
- ABB3BA
≈ Shaved Ice
Tetradisch +90° +180° +270°
- BAAFAC
Vintage Mauve
- B0B3AA
≈ Pebble Walk
- A9B4B7
≈ Casper
- B4B0B9
≈ Veiled Delight
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.13:1 · APCA Lc 42
Ag
AAAAuf Schwarz
WCAG 9.81:1 · APCA Lc 60
Beste Textfarbe: #000000
WCAG 9.81:1 (AAA) · APCA Lc 60
Contrast pairs
Code-Snippets
CSS
:root {
--vintage-mauve: #baafac;
--vintage-mauve-rgb: 186 175 172;
--vintage-mauve-oklch: oklch(0.762 0.013 35.7);
}
.element {
color: var(--vintage-mauve);
background-color: hsl(13 9% 70%);
border-color: oklch(0.762 0.013 35.7);
}Tailwind CSS v4
@theme {
--color-vintage-mauve: #baafac;
--color-vintage-mauve-50: #f9f4f2;
--color-vintage-mauve-100: #ece6e5;
--color-vintage-mauve-200: #dad2d0;
--color-vintage-mauve-300: #beb5b2;
--color-vintage-mauve-400: #a69c99;
--color-vintage-mauve-500: #8f8380;
--color-vintage-mauve-600: #796f6c;
--color-vintage-mauve-700: #615957;
--color-vintage-mauve-800: #47413f;
--color-vintage-mauve-900: #312d2c;
--color-vintage-mauve-950: #1d1a19;
}SCSS
$vintage-mauve: #baafac;
$vintage-mauve-rgb: 186, 175, 172;
$vintage-mauve-light: mix(#fff, $vintage-mauve, 20%);
$vintage-mauve-dark: mix(#000, $vintage-mauve, 20%);
.element {
color: $vintage-mauve;
box-shadow: 0 0 0 2px rgba($vintage-mauve, 0.35);
}