Benannte Farbe · #6F675C
Grouchy Badger
Grouchy Badger ist #6F675C: rgb(111 103 92), hsl(35 9% 40%), oklch(0.518 0.02 76). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Grouchy Badger color name →
#6F675C
oklch(0.518 0.02 76)
Farbumrechnungen
- HEX
- #6f675c
- RGB
- rgb(111 103 92)
- HSL
- hsl(35 9% 40%)
- HWB
- hwb(35 36% 56%)
- OKLCH
- oklch(0.518 0.02 76)
- OKLab
- oklab(0.518 0.005 0.019)
- CIE Lab
- lab(44.1 1.76 7.43)
- LCH
- lch(44.1 7.63 76.7)
- CMYK
- cmyk(0% 7% 17% 56%)
Tints · Shades · Tones
Tints
- 7C756B
- 8A837A
- 98928A
- A6A19A
- B4B0AA
- C3BFBA
- D2CFCB
- E1DFDC
- F0EFEE
Shades
- 60594F
- 514B42
- 423D36
- 34302A
- 27231F
- 1A1714
- 0E0C0A
- 040403
- 010000
Tones
- 716960
- 726C63
- 746E67
- 76716A
- 77736E
- 797671
- 7B7875
- 7D7B79
- 7E7D7C
Farbharmonien
Komplementär +180°
- 6F675C
Grouchy Badger
- 616974
≈ Feather Falls
Analog -30° +30°
- 6F675C
Grouchy Badger
- 73655F
≈ Morel
- 6A695C
≈ Duck Willow
Triadisch +120° +240°
- 6F675C
Grouchy Badger
- 5C6C6C
≈ Spacebox
- 6D6570
≈ Vintage Grape
Geteilt komplementär +150° +210°
- 6F675C
Grouchy Badger
- 5D6B71
≈ Midnight Pearl
- 676773
≈ Alley Cat
Tetradisch +90° +180° +270°
- 6F675C
Grouchy Badger
- 5E6C66
≈ Artistic Stone
- 616974
≈ Feather Falls
- 71646B
≈ Vintage Grape
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 5.56:1 · APCA Lc 78
Ag
FailAuf Schwarz
WCAG 3.77:1 · APCA Lc 24
Beste Textfarbe: #FFFFFF
WCAG 5.56:1 (AA) · APCA Lc 78
Contrast pairs
Code-Snippets
CSS
:root {
--grouchy-badger: #6f675c;
--grouchy-badger-rgb: 111 103 92;
--grouchy-badger-oklch: oklch(0.518 0.02 76);
}
.element {
color: var(--grouchy-badger);
background-color: hsl(35 9% 40%);
border-color: oklch(0.518 0.02 76);
}Tailwind CSS v4
@theme {
--color-grouchy-badger: #6f675c;
--color-grouchy-badger-50: #f8f4ef;
--color-grouchy-badger-100: #ebe7e1;
--color-grouchy-badger-200: #d9d3cb;
--color-grouchy-badger-300: #bdb6ac;
--color-grouchy-badger-400: #a59d92;
--color-grouchy-badger-500: #8e8578;
--color-grouchy-badger-600: #787066;
--color-grouchy-badger-700: #605a51;
--color-grouchy-badger-800: #47413b;
--color-grouchy-badger-900: #312d28;
--color-grouchy-badger-950: #1d1a16;
}SCSS
$grouchy-badger: #6f675c;
$grouchy-badger-rgb: 111, 103, 92;
$grouchy-badger-light: mix(#fff, $grouchy-badger, 20%);
$grouchy-badger-dark: mix(#000, $grouchy-badger, 20%);
.element {
color: $grouchy-badger;
box-shadow: 0 0 0 2px rgba($grouchy-badger, 0.35);
}