The Obsidian color palette defines a range of colors used in the app.
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 |
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 |
You can use CSS calculations to create a variety of shades based on the accent color.
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 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 |
Avoid changing the value of black and white variables.