Nazwany kolor · #BDA3A5
Tourmaline Mauve
Tourmaline Mauve to #BDA3A5: rgb(189 163 165), hsl(355 16% 69%), oklch(0.739 0.031 12.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Tourmaline Mauve color name →
#BDA3A5
oklch(0.739 0.031 12.6)
Konwersje koloru
- HEX
- #bda3a5
- RGB
- rgb(189 163 165)
- HSL
- hsl(355 16% 69%)
- HWB
- hwb(355 64% 26%)
- OKLCH
- oklch(0.739 0.031 12.6)
- OKLab
- oklab(0.739 0.03 0.007)
- CIE Lab
- lab(69.37 10.07 2.67)
- LCH
- lch(69.37 10.42 14.8)
- CMYK
- cmyk(0% 14% 13% 26%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C4ACAE
- CAB5B6
- D1BEBF
- D7C7C8
- DED0D1
- E4D9DA
- EBE3E3
- F2ECEC
- F8F5F6
Odcienie ciemniejsze
- A48D8F
- 8C7879
- 746365
- 5D4F51
- 473C3D
- 332A2B
- 1F191A
- 0D0A0A
- 020101
Tony
- B79FA1
- B19C9D
- AA989A
- A49596
- 9E9192
- 988E8F
- 928A8B
- 8C8787
- 868384
Harmonie kolorów
Komplementarna +180°
- BDA3A5
Tourmaline Mauve
- 95B1B0
≈ Calcite Blue
Analogowa -30° +30°
- BDA3A5
Tourmaline Mauve
- B9A3B0
≈ Buckwheat Mauve
- BCA59B
≈ Frontier Land
Triada +120° +240°
- BDA3A5
Tourmaline Mauve
- A3AF9B
≈ Limestone Green
- 9DACBE
≈ Soaring Eagle
Komplementarna rozszczepiona +150° +210°
- BDA3A5
Tourmaline Mauve
- 9AB1A5
≈ Lovage Green
- 96AFB9
≈ Mountain Stream
Tetrada +90° +180° +270°
- BDA3A5
Tourmaline Mauve
- AEAC96
≈ Photo Grey
- 95B1B0
≈ Calcite Blue
- A7A8BE
≈ Cream Violet
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.34:1 · APCA Lc 46
Ag
AAANa czerni
WCAG 8.94:1 · APCA Lc 56
Najlepszy kolor tekstu: #000000
WCAG 8.94:1 (AAA) · APCA Lc 56
Contrast pairs
Fragmenty kodu
CSS
:root {
--tourmaline-mauve: #bda3a5;
--tourmaline-mauve-rgb: 189 163 165;
--tourmaline-mauve-oklch: oklch(0.739 0.031 12.6);
}
.element {
color: var(--tourmaline-mauve);
background-color: hsl(355 16% 69%);
border-color: oklch(0.739 0.031 12.6);
}Tailwind CSS v4
@theme {
--color-tourmaline-mauve: #bda3a5;
--color-tourmaline-mauve-50: #fef2f2;
--color-tourmaline-mauve-100: #f2e4e5;
--color-tourmaline-mauve-200: #e1cfd0;
--color-tourmaline-mauve-300: #c7b1b2;
--color-tourmaline-mauve-400: #b09799;
--color-tourmaline-mauve-500: #997e80;
--color-tourmaline-mauve-600: #826b6d;
--color-tourmaline-mauve-700: #685557;
--color-tourmaline-mauve-800: #4c3e40;
--color-tourmaline-mauve-900: #352b2c;
--color-tourmaline-mauve-950: #201819;
}SCSS
$tourmaline-mauve: #bda3a5;
$tourmaline-mauve-rgb: 189, 163, 165;
$tourmaline-mauve-light: mix(#fff, $tourmaline-mauve, 20%);
$tourmaline-mauve-dark: mix(#000, $tourmaline-mauve, 20%);
.element {
color: $tourmaline-mauve;
box-shadow: 0 0 0 2px rgba($tourmaline-mauve, 0.35);
}