Benannte Farbe · #87A922
Avocado Green
Avocado Green ist #87A922: rgb(135 169 34), hsl(75 67% 40%), oklch(0.685 0.158 123.5). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Yellow mean? → · Avocado Green color name →
#87A922
oklch(0.685 0.158 123.5)
Farbumrechnungen
- HEX
- #87a922
- RGB
- rgb(135 169 34)
- HSL
- hsl(75 67% 40%)
- HWB
- hwb(75 13% 34%)
- OKLCH
- oklch(0.685 0.158 123.5)
- OKLab
- oklab(0.685 -0.087 0.132)
- CIE Lab
- lab(64.91 -25.41 59.24)
- LCH
- lch(64.91 64.46 113.2)
- CMYK
- cmyk(20% 0% 80% 34%)
Tints · Shades · Tones
Tints
- 92B243
- 9EBB5C
- A9C372
- B5CC87
- C1D59C
- CDDDB0
- D9E6C3
- E6EED7
- F2F7EB
Shades
- 75921C
- 637C16
- 516711
- 41530B
- 313F07
- 212C03
- 131B01
- 060A00
- 010100
Tones
- 86A535
- 85A142
- 859D4D
- 849957
- 83955F
- 839167
- 828D6E
- 818974
- 81847A
Farbharmonien
Komplementär +180°
- 87A922
Avocado Green
- AF7EE9
≈ Lavender Blossom
Analog -30° +30°
- 87A922
Avocado Green
- B79700
≈ Kalliene Yellow
- 30B56A
≈ Green Mana
Triadisch +120° +240°
- 87A922
Avocado Green
- 21A2F3
≈ Rockman Blue
- E76B90
≈ Shadow Azalea Pink
Geteilt komplementär +150° +210°
- 87A922
Avocado Green
- 7C90FA
≈ Lavender Blue Shadow
- D271C3
≈ Purple Kush
Tetradisch +90° +180° +270°
- 87A922
Avocado Green
- 00ACC6
≈ Sarah’s Garden
- AF7EE9
≈ Lavender Blossom
- EB7056
≈ Entan Red
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.71:1 · APCA Lc 52
Ag
AAAAuf Schwarz
WCAG 7.72:1 · APCA Lc 49
Beste Textfarbe: #000000
WCAG 7.72:1 (AAA) · APCA Lc 49
Contrast pairs
Code-Snippets
CSS
:root {
--avocado-green: #87a922;
--avocado-green-rgb: 135 169 34;
--avocado-green-oklch: oklch(0.685 0.158 123.5);
}
.element {
color: var(--avocado-green);
background-color: hsl(75 67% 40%);
border-color: oklch(0.685 0.158 123.5);
}Tailwind CSS v4
@theme {
--color-avocado-green: #87a922;
--color-avocado-green-50: #eafecd;
--color-avocado-green-100: #dbf2b9;
--color-avocado-green-200: #c4e196;
--color-avocado-green-300: #a4c669;
--color-avocado-green-400: #8cad34;
--color-avocado-green-500: #729500;
--color-avocado-green-600: #617e00;
--color-avocado-green-700: #4d6500;
--color-avocado-green-800: #3a4a00;
--color-avocado-green-900: #283300;
--color-avocado-green-950: #161f00;
}SCSS
$avocado-green: #87a922;
$avocado-green-rgb: 135, 169, 34;
$avocado-green-light: mix(#fff, $avocado-green, 20%);
$avocado-green-dark: mix(#000, $avocado-green, 20%);
.element {
color: $avocado-green;
box-shadow: 0 0 0 2px rgba($avocado-green, 0.35);
}