Obsidian 论坛色系分析与搭配

Writing Seed 设计产品 Created:2026-03-27

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 (用于高亮链接、主按钮、激活状态,建立品牌心智)
  • 文本色阶 (Typography):

    • 主文本:#E0E0E0 (柔和浅灰白,避免纯白 #FFFFFF 在暗背景下的光晕效应)

    • 次文本:#999999 (暗灰,用于时间戳、次要元数据)

  • Categories 分类多色系统 (重点辅助色):

    • 资讯/公告类 (青):#1ABC9C

    • 资源/分享类 (绿):#2ECC71

    • 讨论/求助类 (橙/黄):#F39C12 / #F1C40F

    • Bug/反馈类 (红):#E74C3C

    • 插件/主题类 (蓝):#3498DB

依据:

  1. 极简底色托底多色系统: 网站主体克制地仅保留黑、白、紫三色,将视觉空间完全让渡给 Categories 的彩色标识,确保“多而不乱”。

  2. 高对比度导向: Categories 采用高饱和度、高明度的色彩(类似霓虹色),在暗色基底上形成强对比,极大提升了论坛复杂信息流中的扫视效率 (Scannability)。

下一步:

  • 若需在你的项目中复用此体系,请在前端定义 CSS Variables (如 --category-bug: #E74C3C; )。

  • 引入色彩前,务必使用 WCAG 对比度检测工具,验证各项 Category 颜色在 #1E1E1E 背景下对比度是否大于 4.5:1,以保证文字或图标的无障碍可读性。