Benannte Farbe · #B4ABAF
Pinch Purple
Pinch Purple ist #B4ABAF: rgb(180 171 175), hsl(333 6% 69%), oklch(0.75 0.012 348.5). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Pinch Purple color name →
#B4ABAF
oklch(0.75 0.012 348.5)
Farbumrechnungen
- HEX
- #b4abaf
- RGB
- rgb(180 171 175)
- HSL
- hsl(333 6% 69%)
- HWB
- hwb(333 67% 29%)
- OKLCH
- oklch(0.75 0.012 348.5)
- OKLab
- oklab(0.75 0.011 -0.002)
- CIE Lab
- lab(70.84 3.88 -0.85)
- LCH
- lch(70.84 3.97 347.7)
- CMYK
- cmyk(0% 5% 3% 29%)
Tints · Shades · Tones
Tints
- BBB3B7
- C3BBBF
- CAC4C6
- D1CCCE
- D9D4D6
- E0DDDE
- E8E5E6
- F0EEEF
- F7F6F7
Shades
- 9C9498
- 857E81
- 6E686B
- 585456
- 444041
- 302D2E
- 1D1B1C
- 0C0B0B
- 020101
Tones
- AFA7AA
- A9A2A5
- A49EA1
- 9F9A9C
- 9A9597
- 949192
- 8F8D8E
- 8A8889
- 858485
Farbharmonien
Komplementär +180°
- B4ABAF
Pinch Purple
- A7B0AC
≈ Wintry Sky
Analog -30° +30°
- B4ABAF
Pinch Purple
- B1ACB3
≈ Endless Slumber
- B5ABAB
≈ Rose Ashes
Triadisch +120° +240°
- B4ABAF
Pinch Purple
- AEAFA6
≈ Building Block
- A7AFB4
≈ Northern Light Grey
Geteilt komplementär +150° +210°
- B4ABAF
Pinch Purple
- AAB0A9
≈ Blue Fox
- A6B0B1
≈ Mirror Mirror
Tetradisch +90° +180° +270°
- B4ABAF
Pinch Purple
- B2ADA6
≈ Dove
- A7B0AC
≈ Wintry Sky
- A9AEB5
≈ Northern Light Grey
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.23:1 · APCA Lc 44
Ag
AAAAuf Schwarz
WCAG 9.38:1 · APCA Lc 58
Beste Textfarbe: #000000
WCAG 9.38:1 (AAA) · APCA Lc 58
Contrast pairs
Code-Snippets
CSS
:root {
--pinch-purple: #b4abaf;
--pinch-purple-rgb: 180 171 175;
--pinch-purple-oklch: oklch(0.75 0.012 348.5);
}
.element {
color: var(--pinch-purple);
background-color: hsl(333 6% 69%);
border-color: oklch(0.75 0.012 348.5);
}Tailwind CSS v4
@theme {
--color-pinch-purple: #b4abaf;
--color-pinch-purple-50: #f8f4f5;
--color-pinch-purple-100: #ebe6e8;
--color-pinch-purple-200: #d8d2d5;
--color-pinch-purple-300: #bcb5b8;
--color-pinch-purple-400: #a49c9f;
--color-pinch-purple-500: #8d8387;
--color-pinch-purple-600: #776f73;
--color-pinch-purple-700: #5f595c;
--color-pinch-purple-800: #464143;
--color-pinch-purple-900: #302d2e;
--color-pinch-purple-950: #1c1a1b;
}SCSS
$pinch-purple: #b4abaf;
$pinch-purple-rgb: 180, 171, 175;
$pinch-purple-light: mix(#fff, $pinch-purple, 20%);
$pinch-purple-dark: mix(#000, $pinch-purple, 20%);
.element {
color: $pinch-purple;
box-shadow: 0 0 0 2px rgba($pinch-purple, 0.35);
}