Benannte Farbe · #77824A
Grasshopper
Grasshopper ist #77824A: rgb(119 130 74), hsl(72 27% 40%), oklch(0.584 0.08 118). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Yellow mean? → · Grasshopper color name →
#77824A
oklch(0.584 0.08 118)
Farbumrechnungen
- HEX
- #77824a
- RGB
- rgb(119 130 74)
- HSL
- hsl(72 27% 40%)
- HWB
- hwb(72 29% 49%)
- OKLCH
- oklch(0.584 0.08 118)
- OKLab
- oklab(0.584 -0.037 0.07)
- CIE Lab
- lab(52.42 -11.19 28.79)
- LCH
- lch(52.42 30.89 111.2)
- CMYK
- cmyk(8% 0% 43% 49%)
Tints · Shades · Tones
Tints
- 848E5C
- 909A6D
- 9EA67F
- ABB391
- B8BFA3
- C6CCB5
- D4D8C7
- E2E5D9
- F1F2EC
Shades
- 67703F
- 575F35
- 474E2A
- 383E20
- 2A2F17
- 1C200E
- 101206
- 050602
- 010100
Tones
- 788250
- 798256
- 7A825C
- 7A8261
- 7B8167
- 7C816C
- 7D8171
- 7E8176
- 7F807B
Farbharmonien
Komplementär +180°
- 77824A
Grasshopper
- 8171A5
≈ Old Prune
Analog -30° +30°
- 77824A
Grasshopper
- 8F7941
≈ Banyan Tree
- 5A8960
≈ Spring Garden
Triadisch +120° +240°
- 77824A
Grasshopper
- 4B82A5
≈ Cornwall
- A2677B
≈ Strawberry Mousse
Geteilt komplementär +150° +210°
- 77824A
Grasshopper
- 677AAB
≈ Night Thistle
- 956A93
≈ Tulipan Violet
Tetradisch +90° +180° +270°
- 77824A
Grasshopper
- 378994
≈ Seachange
- 8171A5
≈ Old Prune
- A66961
≈ Mudbrick
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 4.13:1 · APCA Lc 68
Ag
AAAuf Schwarz
WCAG 5.07:1 · APCA Lc 33
Beste Textfarbe: #000000
WCAG 5.07:1 (AA) · APCA Lc 33
Contrast pairs
Code-Snippets
CSS
:root {
--grasshopper: #77824a;
--grasshopper-rgb: 119 130 74;
--grasshopper-oklch: oklch(0.584 0.08 118);
}
.element {
color: var(--grasshopper);
background-color: hsl(72 27% 40%);
border-color: oklch(0.584 0.08 118);
}Tailwind CSS v4
@theme {
--color-grasshopper: #77824a;
--color-grasshopper-50: #f2f9e0;
--color-grasshopper-100: #e4eccf;
--color-grasshopper-200: #cfdab4;
--color-grasshopper-300: #b2be90;
--color-grasshopper-400: #9aa56f;
--color-grasshopper-500: #818d4f;
--color-grasshopper-600: #6d7843;
--color-grasshopper-700: #576035;
--color-grasshopper-800: #414625;
--color-grasshopper-900: #2d3018;
--color-grasshopper-950: #1a1d09;
}SCSS
$grasshopper: #77824a;
$grasshopper-rgb: 119, 130, 74;
$grasshopper-light: mix(#fff, $grasshopper, 20%);
$grasshopper-dark: mix(#000, $grasshopper, 20%);
.element {
color: $grasshopper;
box-shadow: 0 0 0 2px rgba($grasshopper, 0.35);
}