Colore con nome · #B9A4B0
Buckwheat Mauve
Buckwheat Mauve è #B9A4B0: rgb(185 164 176), hsl(326 13% 68%), oklch(0.741 0.029 342.5). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Buckwheat Mauve color name →
#B9A4B0
oklch(0.741 0.029 342.5)
Conversioni di colore
- HEX
- #b9a4b0
- RGB
- rgb(185 164 176)
- HSL
- hsl(326 13% 68%)
- HWB
- hwb(326 64% 27%)
- OKLCH
- oklch(0.741 0.029 342.5)
- OKLab
- oklab(0.741 0.028 -0.009)
- CIE Lab
- lab(69.5 9.48 -3.27)
- LCH
- lch(69.5 10.02 341)
- CMYK
- cmyk(0% 11% 5% 27%)
Tinte · Ombre · Toni
Tinte
- C0ADB8
- C7B6BF
- CEBFC7
- D5C8CF
- DCD1D7
- E3DADF
- EAE3E7
- F1ECEF
- F8F6F7
Ombre
- A08E99
- 897982
- 71646C
- 5B5056
- 463D42
- 312B2E
- 1E1A1C
- 0D0A0B
- 020101
Toni
- B3A0AB
- AD9DA6
- A899A1
- A2959C
- 9C9298
- 968E93
- 918B8E
- 8B8789
- 868485
Armonie di colore
Complementare +180°
- B9A4B0
Buckwheat Mauve
- 9BB1A5
≈ Lovage Green
Analogo -30° +30°
- B9A4B0
Buckwheat Mauve
- B1A6B9
≈ Bellflower Violet
- BDA4A6
≈ Tourmaline Mauve
Triadico +120° +240°
- B9A4B0
Buckwheat Mauve
- AEAC97
≈ Moss Grey
- 98B0B9
≈ Mountain Stream
Complementare divisa +150° +210°
- B9A4B0
Buckwheat Mauve
- A4AF9C
≈ Limestone Green
- 96B1B0
≈ Smooth-Hound Shark
Tetradico +90° +180° +270°
- B9A4B0
Buckwheat Mauve
- B7A897
≈ Ginger Grey Yellow
- 9BB1A5
≈ Lovage Green
- 9EADBE
≈ Soaring Eagle
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 2.33:1 · APCA Lc 46
Ag
AAASu nero
WCAG 8.99:1 · APCA Lc 56
Miglior colore del testo: #000000
WCAG 8.99:1 (AAA) · APCA Lc 56
Contrast pairs
Frammenti di codice
CSS
:root {
--buckwheat-mauve: #b9a4b0;
--buckwheat-mauve-rgb: 185 164 176;
--buckwheat-mauve-oklch: oklch(0.741 0.029 342.5);
}
.element {
color: var(--buckwheat-mauve);
background-color: hsl(326 13% 68%);
border-color: oklch(0.741 0.029 342.5);
}Tailwind CSS v4
@theme {
--color-buckwheat-mauve: #b9a4b0;
--color-buckwheat-mauve-50: #fcf2f7;
--color-buckwheat-mauve-100: #f0e4ea;
--color-buckwheat-mauve-200: #decfd7;
--color-buckwheat-mauve-300: #c3b2bb;
--color-buckwheat-mauve-400: #ac98a3;
--color-buckwheat-mauve-500: #957f8b;
--color-buckwheat-mauve-600: #7e6b76;
--color-buckwheat-mauve-700: #65565e;
--color-buckwheat-mauve-800: #4a3f45;
--color-buckwheat-mauve-900: #332b30;
--color-buckwheat-mauve-950: #1f181c;
}SCSS
$buckwheat-mauve: #b9a4b0;
$buckwheat-mauve-rgb: 185, 164, 176;
$buckwheat-mauve-light: mix(#fff, $buckwheat-mauve, 20%);
$buckwheat-mauve-dark: mix(#000, $buckwheat-mauve, 20%);
.element {
color: $buckwheat-mauve;
box-shadow: 0 0 0 2px rgba($buckwheat-mauve, 0.35);
}