The Obsidian color palette defines a range of colors used in the app.

Base colors

The base colors is a neutral color palette ranging from light to dark. These values should typically only be defined by themes.

Variable Default value (light mode) Default value (dark mode)
--color-base-00 #ffffff #1e1e1e
--color-base-05 #fcfcfc #212121
--color-base-10 #fafafa #242424
--color-base-20 #f6f6f6 #262626
--color-base-25 #e3e3e3 #2a2a2a
--color-base-30 #e0e0e0 #363636
--color-base-35 #d4d4d4 #3f3f3f
--color-base-40 #bdbdbd #555555
--color-base-50 #ababab #666666
--color-base-60 #707070 #999999
--color-base-70 #5a5a5a #bababa
--color-base-100 #222222 #dadada

Accent color

The accent color is used to draw attention to interactive elements, such as links and primary buttons, and can be overridden by the user under Settings → Appearance in the Obsidian app.

Variable Default value Description
--accent-h 254 Accent hue
--accent-s 80% Accent saturation
--accent-l 68% Accent lightness
Tip

You can use CSS calculations to create a variety of shades based on the accent color.

Extended colors

Extended color variables define the broader range of colors used for status messages (errors, warnings, success), callouts, syntax highlighting, graph nodes, and Canvas elements.

Each extended color has an additional RGB variable with a -rgb suffix that you can use to create colors with opacity, using the rgba function.

For example, the following snippet uses the default variable to set the text color, and the RGB variable to set a background color to red with 20% opacity.

color: var(--color-red);
background-color: rgba(var(--color-red-rgb), 0.2);
Variable Default value (light mode) Default value (dark mode)
--color-red #e93147 #fb464c
--color-orange #ec7500 #e9973f
--color-yellow #e0ac00 #e0de71
--color-green #08b94e #44cf6e
--color-cyan #00bfbc #53dfdd
--color-blue #086ddd #027aff
--color-purple #7852ee #a882ff
--color-pink #d53984 #fa99cd
--color-red-rgb 233, 49, 71 251, 70, 76
--color-orange-rgb 236, 117, 0 233, 151, 63
--color-yellow-rgb 224, 172, 0 224, 222, 113
--color-green-rgb 8, 185, 78 68, 207, 110
--color-cyan-rgb 0, 191, 188 83, 223, 221
--color-blue-rgb 8, 109, 221 2, 122, 255
--color-purple-rgb 120, 82, 238 168, 130, 255
--color-pink-rgb 213, 57, 132 250, 153, 205

Black and white

Black and white colors let you create masks with opacity.

Variable Default value (light mode) Default value (dark mode)
--mono-rgb-0 255, 255, 255 0, 0, 0
--mono-rgb-100 0, 0, 0 255, 255, 255
Warning

Avoid changing the value of black and white variables.

Semantic colors

Colors
Interactive graph