Benannte Farbe · #77B244
Sparkling Apple
Sparkling Apple ist #77B244: rgb(119 178 68), hsl(92 45% 48%), oklch(0.7 0.155 132.9). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Green mean? → · Sparkling Apple color name →
#77B244
oklch(0.7 0.155 132.9)
Farbumrechnungen
- HEX
- #77b244
- RGB
- rgb(119 178 68)
- HSL
- hsl(92 45% 48%)
- HWB
- hwb(92 27% 30%)
- OKLCH
- oklch(0.7 0.155 132.9)
- OKLab
- oklab(0.7 -0.105 0.113)
- CIE Lab
- lab(66.8 -33.81 48.25)
- LCH
- lch(66.8 58.92 125)
- CMYK
- cmyk(33% 0% 62% 30%)
Tints · Shades · Tones
Tints
- 84BA5A
- 92C26E
- 9FCA81
- ADD193
- BAD9A5
- C8E1B7
- D6E8C9
- E3F0DB
- F1F8ED
Shades
- 679A3A
- 578330
- 476D26
- 38571D
- 2A4314
- 1C2F0C
- 101D05
- 050C02
- 010100
Tones
- 78AD4D
- 7AA855
- 7BA35C
- 7C9F63
- 7D9A68
- 7E956E
- 7E9073
- 7F8A77
- 80857C
Farbharmonien
Komplementär +180°
- 77B244
Sparkling Apple
- BF7FE2
≈ Lavender Blossom
Analog -30° +30°
- 77B244
Sparkling Apple
- B0A100
≈ Venom
- 00BB83
≈ Slime Girl
Triadisch +120° +240°
- 77B244
Sparkling Apple
- 50A1FB
≈ Feather Star
- EE7183
≈ Rose Cheeks
Geteilt komplementär +150° +210°
- 77B244
Sparkling Apple
- 928FFB
≈ Lavender Blue Shadow
- DE73B8
≈ Purple Hollyhock
Tetradisch +90° +180° +270°
- 77B244
Sparkling Apple
- 00AFD9
≈ Bright Cerulean
- BF7FE2
≈ Lavender Blossom
- EC7A48
≈ Ouni Red
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.54:1 · APCA Lc 50
Ag
AAAAuf Schwarz
WCAG 8.23:1 · APCA Lc 52
Beste Textfarbe: #000000
WCAG 8.23:1 (AAA) · APCA Lc 52
Contrast pairs
Code-Snippets
CSS
:root {
--sparkling-apple: #77b244;
--sparkling-apple-rgb: 119 178 68;
--sparkling-apple-oklch: oklch(0.7 0.155 132.9);
}
.element {
color: var(--sparkling-apple);
background-color: hsl(92 45% 48%);
border-color: oklch(0.7 0.155 132.9);
}Tailwind CSS v4
@theme {
--color-sparkling-apple: #77b244;
--color-sparkling-apple-50: #e3ffd3;
--color-sparkling-apple-100: #d2f4c0;
--color-sparkling-apple-200: #b8e4a0;
--color-sparkling-apple-300: #95c977;
--color-sparkling-apple-400: #79b14b;
--color-sparkling-apple-500: #5b9a0e;
--color-sparkling-apple-600: #4d8312;
--color-sparkling-apple-700: #3e6910;
--color-sparkling-apple-800: #2f4c04;
--color-sparkling-apple-900: #1f3504;
--color-sparkling-apple-950: #0f2000;
}SCSS
$sparkling-apple: #77b244;
$sparkling-apple-rgb: 119, 178, 68;
$sparkling-apple-light: mix(#fff, $sparkling-apple, 20%);
$sparkling-apple-dark: mix(#000, $sparkling-apple, 20%);
.element {
color: $sparkling-apple;
box-shadow: 0 0 0 2px rgba($sparkling-apple, 0.35);
}