命名颜色 · #77B244
Sparkling Apple
Sparkling Apple 即 #77B244：rgb(119 178 68)、hsl(92 45% 48%)、oklch(0.7 0.155 132.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Green mean? → · Sparkling Apple color name →
#77B244
oklch(0.7 0.155 132.9)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- 84BA5A
- 92C26E
- 9FCA81
- ADD193
- BAD9A5
- C8E1B7
- D6E8C9
- E3F0DB
- F1F8ED
深色调
- 679A3A
- 578330
- 476D26
- 38571D
- 2A4314
- 1C2F0C
- 101D05
- 050C02
- 010100
灰色调
- 78AD4D
- 7AA855
- 7BA35C
- 7C9F63
- 7D9A68
- 7E956E
- 7E9073
- 7F8A77
- 80857C
配色和谐
互补色 +180°
- 77B244
Sparkling Apple
- BF7FE2
≈ Lavender Blossom
类似色 -30° +30°
- 77B244
Sparkling Apple
- B0A100
≈ Venom
- 00BB83
≈ Slime Girl
三角配色 +120° +240°
- 77B244
Sparkling Apple
- 50A1FB
≈ Feather Star
- EE7183
≈ Rose Cheeks
分裂互补色 +150° +210°
- 77B244
Sparkling Apple
- 928FFB
≈ Lavender Blue Shadow
- DE73B8
≈ Purple Hollyhock
四角配色 +90° +180° +270°
- 77B244
Sparkling Apple
- 00AFD9
≈ Bright Cerulean
- BF7FE2
≈ Lavender Blossom
- EC7A48
≈ Ouni Red
对比度与无障碍
Ag
Fail白底
WCAG 2.54:1 · APCA Lc 50
Ag
AAA黑底
WCAG 8.23:1 · APCA Lc 52
最佳文字颜色: #000000
WCAG 8.23:1 (AAA) · APCA Lc 52
Contrast pairs
代码片段
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);
}