Obsidian 论坛色系分析与搭配
What
| 建议场景 | 颜色中文名 | 颜色code |
|---|---|---|
| 资讯 / 官方公告 | 绿松石青 | #1ABC9C |
| 资源 / 教程分享 | 翡翠绿 | #2ECC71 |
| 插件 / 主题发布 | 明亮蓝 | #3498DB |
| 讨论 / 疑问求助 | 鲜艳橙 | #F39C12 |
| 灵感 / 想法交流 | 亮阳光黄 | #F1C40F |
| Bug 反馈 / 警告 | 珊瑚红 | #E74C3C |
| 归档 / 已解决 | 中性灰 | #95A5A6 |
| 属板块 / 品牌 | 亮紫 | #9B59B6 |
#7c5cff — 紫 |
TL;DR: Obsidian 论坛采用“暗黑基底 + 品牌紫视觉锚点 + 高饱和多色标签”的设计策略,兼顾长时间沉浸式阅读与高效信息检索。
结论:色系搭配图谱 (Color Palette)
-
基础背景 (Backgrounds):
-
主背景:
#1E1E1E(深灰黑,有效降低屏幕眩光) -
次背景/板块:
#2D2D2D(中深灰,用于构建 UI 深度与层级)
-
-
品牌强调色 (Primary Accent):
- Obsidian 紫:
#7A3CE8(用于高亮链接、主按钮、激活状态,建立品牌心智)
- Obsidian 紫:
-
文本色阶 (Typography):
-
主文本:
#E0E0E0(柔和浅灰白,避免纯白#FFFFFF在暗背景下的光晕效应) -
次文本:
#999999(暗灰,用于时间戳、次要元数据)
-
-
Categories 分类多色系统 (重点辅助色):
-
资讯/公告类 (青):
#1ABC9C -
资源/分享类 (绿):
#2ECC71 -
讨论/求助类 (橙/黄):
#F39C12/#F1C40F -
Bug/反馈类 (红):
#E74C3C -
插件/主题类 (蓝):
#3498DB
-
依据:
-
极简底色托底多色系统: 网站主体克制地仅保留黑、白、紫三色,将视觉空间完全让渡给 Categories 的彩色标识,确保“多而不乱”。
-
高对比度导向: Categories 采用高饱和度、高明度的色彩(类似霓虹色),在暗色基底上形成强对比,极大提升了论坛复杂信息流中的扫视效率 (Scannability)。
下一步:
-
若需在你的项目中复用此体系,请在前端定义 CSS Variables (如
--category-bug: #E74C3C;)。 -
引入色彩前,务必使用 WCAG 对比度检测工具,验证各项 Category 颜色在
#1E1E1E背景下对比度是否大于4.5:1,以保证文字或图标的无障碍可读性。