命名颜色 · #6A8779
Sycamore Grove
Sycamore Grove 即 #6A8779：rgb(106 135 121)、hsl(151 12% 47%)、oklch(0.597 0.039 164.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Green mean? → · Sycamore Grove color name →
#6A8779
oklch(0.597 0.039 164.1)
颜色转换
- HEX
- #6a8779
- RGB
- rgb(106 135 121)
- HSL
- hsl(151 12% 47%)
- HWB
- hwb(151 42% 47%)
- OKLCH
- oklch(0.597 0.039 164.1)
- OKLab
- oklab(0.597 -0.038 0.011)
- CIE Lab
- lab(53.74 -13.02 3.99)
- LCH
- lch(53.74 13.62 163)
- CMYK
- cmyk(21% 0% 10% 47%)
浅色调 · 深色调 · 灰色调
浅色调
- 789286
- 869E92
- 95AA9F
- A4B5AC
- B2C1BA
- C1CDC7
- D0DAD5
- E0E6E3
- EFF2F1
深色调
- 5B7568
- 4D6358
- 3F5148
- 314139
- 24312B
- 18211D
- 0D1310
- 040605
- 000101
灰色调
- 6C867A
- 6F867A
- 71857B
- 73847C
- 75847D
- 78837D
- 7A827E
- 7C817F
- 7E817F
配色和谐
互补色 +180°
- 6A8779
Sycamore Grove
- 917685
≈ Tragic Juliet
类似色 -30° +30°
- 6A8779
Sycamore Grove
- 76856D
≈ Wreath
- 648786
≈ Arctic
三角配色 +120° +240°
- 6A8779
Sycamore Grove
- 7C7C96
≈ Waterloo
- 94786C
≈ Buffalo Soldier
分裂互补色 +150° +210°
- 6A8779
Sycamore Grove
- 887990
≈ Classical Violet
- 957678
≈ Chocolaty
四角配色 +90° +180° +270°
- 6A8779
Sycamore Grove
- 6F8197
≈ Grey Blueberry
- 917685
≈ Tragic Juliet
- 8E7C66
≈ Eagle’s Meadow
对比度与无障碍
Ag
Fail白底
WCAG 3.92:1 · APCA Lc 67
Ag
AA黑底
WCAG 5.35:1 · APCA Lc 35
最佳文字颜色: #000000
WCAG 5.35:1 (AA) · APCA Lc 35
Contrast pairs
代码片段
CSS
:root {
--sycamore-grove: #6a8779;
--sycamore-grove-rgb: 106 135 121;
--sycamore-grove-oklch: oklch(0.597 0.039 164.1);
}
.element {
color: var(--sycamore-grove);
background-color: hsl(151 12% 47%);
border-color: oklch(0.597 0.039 164.1);
}Tailwind CSS v4
@theme {
--color-sycamore-grove: #6a8779;
--color-sycamore-grove-50: #ebf9f2;
--color-sycamore-grove-100: #dcece5;
--color-sycamore-grove-200: #c5dad0;
--color-sycamore-grove-300: #a5beb3;
--color-sycamore-grove-400: #8aa698;
--color-sycamore-grove-500: #6e8f7f;
--color-sycamore-grove-600: #5e796c;
--color-sycamore-grove-700: #4b6156;
--color-sycamore-grove-800: #36473e;
--color-sycamore-grove-900: #25312b;
--color-sycamore-grove-950: #141d18;
}SCSS
$sycamore-grove: #6a8779;
$sycamore-grove-rgb: 106, 135, 121;
$sycamore-grove-light: mix(#fff, $sycamore-grove, 20%);
$sycamore-grove-dark: mix(#000, $sycamore-grove, 20%);
.element {
color: $sycamore-grove;
box-shadow: 0 0 0 2px rgba($sycamore-grove, 0.35);
}