Adlandırılmış renk · #77B244
Sparkling Apple
Sparkling Apple, #77B244: rgb(119 178 68), hsl(92 45% 48%), oklch(0.7 0.155 132.9). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Green mean? → · Sparkling Apple color name →
#77B244
oklch(0.7 0.155 132.9)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 84BA5A
- 92C26E
- 9FCA81
- ADD193
- BAD9A5
- C8E1B7
- D6E8C9
- E3F0DB
- F1F8ED
Koyu tonlar
- 679A3A
- 578330
- 476D26
- 38571D
- 2A4314
- 1C2F0C
- 101D05
- 050C02
- 010100
Gri tonlar
- 78AD4D
- 7AA855
- 7BA35C
- 7C9F63
- 7D9A68
- 7E956E
- 7E9073
- 7F8A77
- 80857C
Renk uyumları
Tamamlayıcı +180°
- 77B244
Sparkling Apple
- BF7FE2
≈ Lavender Blossom
Analog -30° +30°
- 77B244
Sparkling Apple
- B0A100
≈ Venom
- 00BB83
≈ Slime Girl
Üçlü +120° +240°
- 77B244
Sparkling Apple
- 50A1FB
≈ Feather Star
- EE7183
≈ Rose Cheeks
Bölünmüş tamamlayıcı +150° +210°
- 77B244
Sparkling Apple
- 928FFB
≈ Lavender Blue Shadow
- DE73B8
≈ Purple Hollyhock
Dörtlü +90° +180° +270°
- 77B244
Sparkling Apple
- 00AFD9
≈ Bright Cerulean
- BF7FE2
≈ Lavender Blossom
- EC7A48
≈ Ouni Red
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.54:1 · APCA Lc 50
Ag
AAASiyah üzerinde
WCAG 8.23:1 · APCA Lc 52
En iyi metin rengi: #000000
WCAG 8.23:1 (AAA) · APCA Lc 52
Contrast pairs
Kod parçacıkları
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);
}