Benannte Farbe · #B4ADA6
Warm Pewter
Warm Pewter ist #B4ADA6: rgb(180 173 166), hsl(30 9% 68%), oklch(0.751 0.013 67.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Warm Pewter color name →
#B4ADA6
oklch(0.751 0.013 67.6)
Farbumrechnungen
- HEX
- #b4ada6
- RGB
- rgb(180 173 166)
- HSL
- hsl(30 9% 68%)
- HWB
- hwb(30 65% 29%)
- OKLCH
- oklch(0.751 0.013 67.6)
- OKLab
- oklab(0.751 0.005 0.012)
- CIE Lab
- lab(71.16 1.66 4.55)
- LCH
- lch(71.16 4.84 70)
- CMYK
- cmyk(0% 4% 8% 29%)
Tints · Shades · Tones
Tints
- BBB5AF
- C3BDB7
- CAC5C0
- D1CDC9
- D9D5D2
- E0DEDB
- E8E6E4
- F0EEED
- F7F7F6
Shades
- 9C9690
- 857F7A
- 6E6A65
- 585551
- 44413E
- 302D2B
- 1D1B1A
- 0C0B0A
- 020101
Tones
- AFA8A2
- A9A49E
- A49F9A
- 9F9B97
- 9A9693
- 94928F
- 8F8D8B
- 8A8987
- 858484
Farbharmonien
Komplementär +180°
- B4ADA6
Warm Pewter
- A8AFB6
≈ Cistern
Analog -30° +30°
- B4ADA6
Warm Pewter
- B6ACA9
≈ Rose Ashes
- B0AFA6
≈ Building Block
Triadisch +120° +240°
- B4ADA6
Warm Pewter
- A6B1B0
≈ Puritan Grey
- B0ACB5
≈ Endless Slumber
Geteilt komplementär +150° +210°
- B4ADA6
Warm Pewter
- A6B0B4
≈ Mirror Mirror
- ACAEB7
≈ Love-Struck Chinchilla
Tetradisch +90° +180° +270°
- B4ADA6
Warm Pewter
- A8B1AB
≈ Artful
- A8AFB6
≈ Cistern
- B4ABB1
≈ Pinch Purple
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.21:1 · APCA Lc 44
Ag
AAAAuf Schwarz
WCAG 9.46:1 · APCA Lc 58
Beste Textfarbe: #000000
WCAG 9.46:1 (AAA) · APCA Lc 58
Contrast pairs
Code-Snippets
CSS
:root {
--warm-pewter: #b4ada6;
--warm-pewter-rgb: 180 173 166;
--warm-pewter-oklch: oklch(0.751 0.013 67.6);
}
.element {
color: var(--warm-pewter);
background-color: hsl(30 9% 68%);
border-color: oklch(0.751 0.013 67.6);
}Tailwind CSS v4
@theme {
--color-warm-pewter: #b4ada6;
--color-warm-pewter-50: #f8f4f1;
--color-warm-pewter-100: #ebe7e3;
--color-warm-pewter-200: #d8d3ce;
--color-warm-pewter-300: #bcb6b1;
--color-warm-pewter-400: #a49d97;
--color-warm-pewter-500: #8c857d;
--color-warm-pewter-600: #76706a;
--color-warm-pewter-700: #5f5a55;
--color-warm-pewter-800: #46423e;
--color-warm-pewter-900: #302d2a;
--color-warm-pewter-950: #1c1a18;
}SCSS
$warm-pewter: #b4ada6;
$warm-pewter-rgb: 180, 173, 166;
$warm-pewter-light: mix(#fff, $warm-pewter, 20%);
$warm-pewter-dark: mix(#000, $warm-pewter, 20%);
.element {
color: $warm-pewter;
box-shadow: 0 0 0 2px rgba($warm-pewter, 0.35);
}