Color Palettes

A Guide to Creating Memorable Presentations

September 22, 2025

Samantha Monty

Chair for Human-Computer Interaction, University of Würzburg

Color Palette

16 base colors

Shades	Accents
`shade0`	`accent0`
`shade1`	`accent1`
`shade2`	`accent2`
`shade3`	`accent3`
`shade4`	`accent4`
`shade5`	`accent5`
`shade6`	`accent6`
`shade7`	`accent7`

Specification

palette:
  contrast: 0.35
  colors:
  - "#fdf6e3"
  - "#eee8d5"
  - "#93a1a1"

Derived colors

Mix accents against shade0 and shade7
Interpolate in linear RGB (contrast)

`-ffg`	`-fg`	original	`-bg`	`-bbg`
shade0	shade0	shade0
		shade7	shade7	shade7
accent0	accent0	accent0	accent0	accent0
accent1	accent1	accent1	accent1	accent1
accent2	accent2	accent2	accent2	accent2
accent3	accent3	accent3	accent3	accent3
accent4	accent4	accent4	accent4	accent4
accent5	accent5	accent5	accent5	accent5
accent6	accent6	accent6	accent6	accent6
accent7	accent7	accent7	accent7	accent7

Semantic Colors

Default mapping

  --background-color: var(--shade0);
  --foreground-color: var(--shade7);
  --header-color: var(--shade6);
  --primary-color: var(--accent5);
  --secondary-color: var(--accent1);
  --icon-active-color: var(--accent5);
  --icon-inactive-color: var(--shade3);
  --hover-color: var(--accent5-bg);
  --code-background-color: var(--shade1);

Blocks

Primary

Some text or other
\(e=mc^2\)

Secondary

Some text or other
\(e=mc^2\)

Success

Some text or other
\(e=mc^2\)

Danger

Some text or other
\(e=mc^2\)

Warning

Some text or other

\(e=mc^2\)

Info

Some text or other
\(e=mc^2\)

Source code

# Blocks {.columns}

## Primary {.accent0 .left}

-   Some text or other
-   $e=mc^2$

## Secondary {.accent1}

-   Some text or other
-   $e=mc^2$

## Success {.accent2}

-   Some text or other
-   $e=mc^2$

## Danger {.accent3 .right}

-   Some text or other
-   $e=mc^2$

## Warning {.accent4 align="center"}

Some text or other

$e=mc^2$

## Info {.accent5 .incremental}

-   Some text or other
-   $e=mc^2$

Typography

Math

Math blocks are always right!

\[ {e=mc^2} \]

Surely, you are joking

Mr. Feynman

Source code

# Typography {.columns}

## Links {.left}

-   This is a [**link**](https://www.heise.de)
-   This is *importantg*
-   This is **more important**
-   This is [**critically important**]{.accent1}
-   This is *successful*
-   This is **more successful**
-   This is [**critically successful**]{.accent3}
-   `Show me some code`, baby

## Math {.right .accent5 align="right"}

Math blocks are always right!

$$ {e=mc^2} $$

## Surely, you are joking {.accent6 .fragment align="center"}

[**Mr. Feynman**]{.accent7}

CSS Variables

Meta data

css-variables:
  shade0: white
  accent0: red

Translates to

<style>
  --shade0: white;
  --accent0: red;
</style>

CSS Variable Defaults

From `decker.yaml` or `default.yaml`

css-variables:
  shade0: white
  accent0: red

From `css/variables.css`

:root {
  --icon-size: 2vmin;
  --vertical-margin: 0.1em;
  --list-indent: 1.5em;
  ...