Obsidian color palette
SaaSObsidian's color identity centers on a vibrant purple paired with deep dark neutrals and subtle accent hues, reflecting its focus on clarity and modernity in note-taking. The palette is designed for high contrast and legibility in both light and dark UI modes.
obsidian.mdObsidian colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Obsidian PurplePrimary124, 58, 237
- Lavender HighlightSecondary167, 139, 250
- Amber AccentAccent251, 191, 36
Surfaces
Page, cards and dividers.- Obsidian BlackBackground27, 27, 30
- Panel CharcoalSurface34, 34, 58
- Slate BorderBorder44, 44, 54
Text
Three tiers of copy.- Note WhiteText248, 248, 242
- Muted GraySecondary text161, 161, 170
- Dimmed GrayMuted text110, 110, 128
Semantic
Feedback and state colors.- Success GreenSuccess34, 197, 94
- Warning OrangeWarning245, 158, 66
- Error RedError239, 68, 68
- Info BlueInfo56, 189, 248
Use Obsidian's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
obsidian-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #38BDF8;
--error: #EF4444;
--accent: #FBBF24;
--border: #2C2C36;
--primary: #7C3AED;
--success: #22C55E;
--surface: #22223A;
--warning: #F59E42;
--secondary: #A78BFA;
--text-muted: #6E6E80;
--background: #1B1B1E;
--text-primary: #F8F8F2;
--text-secondary: #A1A1AA;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.0:1
Pass
Muted text on background
Needs 3:1 for large text
3.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Obsidian background, border and text colors
Obsidian runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Obsidian BlackBackground
- HEX
- RGB
- HSL
- Panel CharcoalSurface
- HEX
- RGB
- HSL
- Slate BorderBorder
- HEX
- RGB
- HSL
- Note WhiteText
- HEX
- RGB
- HSL
- Muted GraySecondary text
- HEX
- RGB
- HSL
- Dimmed GrayMuted text
- HEX
- RGB
- HSL
About Obsidian's colors
Obsidian's palette uses a strong purple as its core, supported by deep dark neutrals and subtle accent colors for clarity and focus. The system is optimized for both dark and light environments, ensuring accessibility and visual comfort.
Primary purple contrasts with dark backgrounds for high legibility.
Accent colors are used sparingly to draw attention to key actions.
Neutral grays unify the interface and reduce visual noise.
Psychology
The purple primary conveys creativity and sophistication, aligning with Obsidian's knowledge-focused brand. Dark neutrals promote focus and minimize distraction in the workspace.
Evolution
Obsidian's palette has remained stable since launch, with minor adjustments to accent and neutral tones for improved accessibility. The core purple and dark theme have been consistent hallmarks of the brand.
Where Obsidian uses each color
- Primary
Used for main action buttons, highlights, and key UI elements.
- Secondary
Appears in secondary buttons, links, and hover states.
- Accent
Used for notification badges, highlights, and callouts.
- Backgrounds
Applied to app backgrounds, panels, and modal overlays.
- Text
TextPrimary is used for main content, TextSecondary for metadata, and TextMuted for disabled or less prominent text.
- Semantic
Success, warning, error, and info colors are used for status indicators, alerts, and system messages.
Obsidian color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Obsidian primary color is #7C3AED. This purple is used for major highlights and branding.
Obsidian Purple (#7C3AED) in RGB is (124, 58, 237). For CMYK, it is approximately (48, 76, 0, 7).
Obsidian uses deep neutrals like Obsidian Black (#1B1B1E) and Panel Charcoal (#22223A) for backgrounds and surfaces. These colors provide high contrast with text and interactive elements.
Use Obsidian Purple (#7C3AED) for primary actions, with dark neutrals for backgrounds and surfaces. Accent and semantic colors should be reserved for notifications, alerts, and status indicators.
The secondary color is Lavender Highlight, #A78BFA, and the accent is Amber Accent, #FBBF24. Together with the primary they make up the three brand colors at the top of this page.
6 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Obsidian's colors consistently when it generates UI.
Make something in the spirit of Obsidian
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.