<html>
Color name: {{ pal.button|colorHexRgb }}
RGBA: {{ pal.button|colorCssRgba }}
Color lighter: {{ pal.button|colorLighter:150|colorHexRgb }}
Color darker: {{ pal.button|colorDarker:150|colorHexRgb }}
Color set alpha: {{ pal.button|colorSetAlpha:42|colorCssRgba }}

Active: {{ pal.activeBase|colorHexRgb }}
Inactive: {{ pal.inactiveBase|colorHexRgb }}
Disabled: {{ pal.disabledBase|colorHexRgb }}
Default: {{ pal.base|colorHexRgb }}

Red: {{ pal.button.red }}
Name: {{ pal.button.hexRgb }}
RGBA: {{ pal.button.cssRgba }}

Mix literal/literal: {% colorMix "#ff0000" "#0000ff" 0.75 %}
Mix var/literal: {% colorMix pal.button "#0000ff" 0.5 %}
Mix var/var: {% colorMix pal.button pal.inactiveBase 0.25 %}

Color literal: {{ "lightsteelblue"|colorHexRgb }}

Mix filtered: {% colorMix pal.button "#0000ff" 0.5 as myColor %}{{ myColor|colorDarker:200|colorCssRgba }}

## Color scheme
Normal background: {{ colorScheme.normalBackground.hexRgb }}
Link background: {{ colorScheme.linkBackground.hexRgb }}
Normal text: {{ colorScheme.normalText.hexRgb }}
Link text: {{ colorScheme.linkText.hexRgb }}
Hover color: {{ colorScheme.hoverColor.hexRgb }}
Focus color: {{ colorScheme.focusColor.hexRgb }}

</html>
