```metadata
title: Custom Colors - PHB
description: ''
tags:
- meta:Theme
systems:
- 5e
renderer: V3
theme: 5ePHB
```
```css
/*
Tutorial:
To use your own custom color theme, go to this site:
https://www.hexcolortool.com/
Change the sliders to whichever color you'd like, then find the box that shows: hsla(40, 65%, 60%, 1) (or something similar).
- Enter the FIRST number in the "--theme-hue" below
- Enter the SECOND number (as a percentage) in the --theme-saturation below
- Enter the THIRD number (as a percentage) in the --theme-lightness below
- IGNORE the LAST number (it determines how visible the color is, but this code does nothing with that value).
Checkout how the document looks, changing any of these values as you see fit.
*/
:root {
--theme-hue : 199;
--theme-saturation : 60%;
--theme-lightness : 50%;
}
/* Below are some exampls that you can copy/paste in the code above to test how they look. These are approximations of the theme colors used in th various chapters of the PHB. */
/* YELLOW (INTRO/APPENDICES)
--theme-hue : 40;
--theme-saturation : 65%;
--theme-lightness : 60%;
*/
/* GREEN (CHAPTER ONE)
--theme-hue : 77;
--theme-saturation : 46%;
--theme-lightness : 57%;
*/
/* TEAL (CHAPTER TWO)
--theme-hue : 166;
--theme-saturation : 49%;
--theme-lightness : 61%;
*/
/* PURPLE (CHAPTER THREE)
--theme-hue : 299;
--theme-saturation : 40%;
--theme-lightness : 65%;
*/
/*___________________________________________________________________
You do NOT need to manipulate any code below to get the colors to function, but feel free to check it out if you'd like to see how the code works!
_____________________________________________________________________*/
/* SET UP CODE (necessary, but not the core of the effect) */
/*___________________________________________________________________*/
/* FOOTNOTE (Adds the small decal to the corner of the footer image, in grayscale. Adjusts the height accordingly) */
.page:after {
height : 67px;
background-image : url(https://i.imgur.com/YoOeSzb.png);
}
/* Adjusts the page numbers, footnotes, and bottom page margin, just to account for the extra height of the footer image. */
.page .pageNumber{
bottom : 28px;
}
.page .footnote{
bottom : 44px;
}
.page {
padding-bottom : 81px;
}
/* FOOTNOTE OVERLAY */
.page:before {
content : '';
position : absolute;
height : 26px;
width : 42px;
bottom : 0px;
right : 0px;
-webkit-mask-image : url(https://i.imgur.com/wHSIzxx.png);
-webkit-mask-size : 100% 100%;
background-color : hsl(
var(--theme-hue),
min(var(--theme-saturation), 65%),
max(min(var(--theme-lightness), 90%), 40%)
);
background-size : 100% 100%;
z-index : 301;
mix-blend-mode : overlay;
}
.page:nth-of-type(even):before {
right : unset;
left : 0px;
transform : scaleX(-1);
}
/* DROP CAP */
.page h1+p::first-letter {
background-image : linear-gradient(-65deg,
hsl(
var(--theme-hue),
calc(var(--theme-saturation) * 0.70),
calc(var(--theme-lightness) * 0.50)),
hsl(
var(--theme-hue),
calc(var(--theme-saturation) * 0.70),
calc(var(--theme-lightness) * 0.50)),
hsl(
var(--theme-hue),
calc(var(--theme-saturation) * 0.75),
min(calc(var(--theme-lightness) * 1.16), 92%)),
hsl(
var(--theme-hue),
calc(var(--theme-saturation) * 0.70),
calc(var(--theme-lightness) * 0.50)),
hsl(
var(--theme-hue),
calc(var(--theme-saturation) * 0.70),
calc(var(--theme-lightness) * 0.50)
)
);
}
/* TABLES & NOTES */
.page table tr:nth-child(odd) td,
.page .note {
background-color : hsl(
var(--theme-hue),
min(calc(var(--theme-saturation)), 70%),
max(min(calc(var(--theme-lightness) * 1.40), 90%), 65%)
);
}
.page .monster table tr:nth-child(odd) td {
background-color : transparent;
}
/* WATERCOLOR STAIN */
.page [class*="watercolor"] {
background-color : hsla(
var(--theme-hue),
calc(var(--theme-saturation) * 0.90),
calc(var(--theme-lightness) * 0.75),
0.70
) !important;
}
/* Minor class, used to change the font of the instructions for which buttons to push to create your own document. Unrelated to the document functionality. */
.page .code {
font-family: CodeBold;
}
```
# Custom-Colored Highlights
This document shows how you can change all the highlight colors of your brew by changing only a couple lines of code. If you want your document to have red, yellow, white, or even pink highlights, then all you have to do is manipulate a maximum of THREE lines of code in the Style Editor! You can highlight your brew with any color you'd like, and each of the elements will respond accordingly.
To get started, just click SOURCE</> button to the top right of this page, and click COPY TO NEW. Once you have your new document pulled up, go to the Style Editor tab (which is the little black paintbrush above the white portion on the left side of the new screen).
Once you are there, follow the directions in the Style Editor! Enjoy :)
## Are Headers Affected?
No, Headers are not affected by any of this code. Only the drop cap (the big letter above), tables, notes, and watercolor stains are changed by this code. Luckily, Headers have much easier colors to change.
##### Character Advancement
| Experience Points | Level | Proficiency Bonus |
|:------------------|:-----:|:-----------------:|
| 0 | 1 | +2 |
| 300 | 2 | +2 |
| 900 | 3 | +2 |
| 2,700 | 4 | +2 |
| 6,500 | 5 | +3 |
| 14,000 | 6 | +3 |
:
{{note
##### Time to Drop Knowledge
Use notes to point out some interesting information.
**Tables and lists** both work within a note.
}}
{{watercolor2,top:20px,right:30px,width:300px,background-color:#BBAD82,opacity:80%}}
{{pageNumber,auto}}
{{footnote PART 1 | SECTION NAME}}