命名颜色 · #9C8F60
Pineapple Sage
Pineapple Sage 即 #9C8F60：rgb(156 143 96)、hsl(47 24% 49%)、oklch(0.65 0.066 94.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Pineapple Sage color name →
#9C8F60
oklch(0.65 0.066 94.5)
颜色转换
- HEX
- #9c8f60
- RGB
- rgb(156 143 96)
- HSL
- hsl(47 24% 49%)
- HWB
- hwb(47 38% 39%)
- OKLCH
- oklch(0.65 0.066 94.5)
- OKLab
- oklab(0.65 -0.005 0.066)
- CIE Lab
- lab(59.71 -0.22 26.88)
- LCH
- lch(59.71 26.88 90.5)
- CMYK
- cmyk(0% 8% 38% 39%)
浅色调 · 深色调 · 灰色调
浅色调
- A59A70
- AFA57F
- B9B08F
- C2BB9E
- CCC6AE
- D6D1BE
- E0DCCE
- EAE8DE
- F5F3EF
深色调
- 877C52
- 736945
- 5F5738
- 4C452C
- 393420
- 282415
- 18150A
- 090703
- 010100
灰色调
- 998E64
- 968C67
- 938B6B
- 91896E
- 8E8871
- 8B8674
- 888577
- 85837A
- 83827D
配色和谐
互补色 +180°
- 9C8F60
Pineapple Sage
- 838DB8
≈ Galactic Gossamer
类似色 -30° +30°
- 9C8F60
Pineapple Sage
- AC8764
≈ Chamois Leather
- 86976A
≈ Cactus Valley
三角配色 +120° +240°
- 9C8F60
Pineapple Sage
- 5D9AA8
≈ Frost Blue
- A980A0
≈ Amazonian Orchid
分裂互补色 +150° +210°
- 9C8F60
Pineapple Sage
- 6C94B5
≈ Aragonite Blue
- 9885B0
≈ Celeb City
四角配色 +90° +180° +270°
- 9C8F60
Pineapple Sage
- 5E9D94
≈ Treasure Isle
- 838DB8
≈ Galactic Gossamer
- B37E8A
≈ Degas Pink
对比度与无障碍
Ag
Fail白底
WCAG 3.22:1 · APCA Lc 59
Ag
AA黑底
WCAG 6.51:1 · APCA Lc 42
最佳文字颜色: #000000
WCAG 6.51:1 (AA) · APCA Lc 42
Contrast pairs
代码片段
CSS
:root {
--pineapple-sage: #9c8f60;
--pineapple-sage-rgb: 156 143 96;
--pineapple-sage-oklch: oklch(0.65 0.066 94.5);
}
.element {
color: var(--pineapple-sage);
background-color: hsl(47 24% 49%);
border-color: oklch(0.65 0.066 94.5);
}Tailwind CSS v4
@theme {
--color-pineapple-sage: #9c8f60;
--color-pineapple-sage-50: #faf6e0;
--color-pineapple-sage-100: #eee8d0;
--color-pineapple-sage-200: #dcd5b5;
--color-pineapple-sage-300: #c1b891;
--color-pineapple-sage-400: #ab9e71;
--color-pineapple-sage-500: #948652;
--color-pineapple-sage-600: #7d7146;
--color-pineapple-sage-700: #645b37;
--color-pineapple-sage-800: #4a4227;
--color-pineapple-sage-900: #342d1a;
--color-pineapple-sage-950: #1f1a0b;
}SCSS
$pineapple-sage: #9c8f60;
$pineapple-sage-rgb: 156, 143, 96;
$pineapple-sage-light: mix(#fff, $pineapple-sage, 20%);
$pineapple-sage-dark: mix(#000, $pineapple-sage, 20%);
.element {
color: $pineapple-sage;
box-shadow: 0 0 0 2px rgba($pineapple-sage, 0.35);
}