Colour Theme Builder

About this plugin

This plugin helps users create colour variables named for their intended use in digital applications. Users can create multiple palettes by specifying unique Hex values and roles.

Colour management

The plugin uses the OKLCH colour model to sanitise the Hex code input and generate the Hex values for each colour variable. The variables are designed to meet specific contrast and chroma targets relative to pure white and pure black. Grey and yellow hues are treated differently from others, to address common user expectations on chroma and lightness.

Specifications

The plugin creates a Web code syntax for each variable using the following system: property, role, element, prominence, and state.

Using colour

Here's how each colour variable is intended to be used:

1. Bg: the background colour of the admin.
2. Bg subtle: the subtle background colour of the admin.
3. Surface: the background colour for elements with a high level of prominence, like a card or tinted button.
4. Surface hovered: the hover state colour for elements with a high level of prominence.
5. Surface selected: the active/selected state colour for elements with a high level of prominence.
6. Surface disabled: the disabled state colour for elements with a high level of prominence.
7. Border subtle: the colour for visual dividers.
8. Border: the colour for borders on any element.
9. Border hovered: the hover colour for borders on any element.
10. Border selected: the focus ring/selected colour for borders on any element.
11. Border disabled: the disabled colour for borders on any element.
12. Fill: the background colour of elements with the higher level of prominence, like a button.
13. Fill hovered: the hover state colour of elements with the higher level of prominence.
14. Fill disabled: the disabled state colour of elements with the higher level of prominence.
15. Text on fill: text or symbol on Fill and Fill hovered.
16. Text on fill disabled: text or symbol on Fill disabled.
17. Text subtle: the colour for text and symbols with the lowest level of prominence, like placeholders.
18. Text low contrast: the colour for text and symbols with a low level of prominence, like descriptions.
19. Text high contrast: the default colour for text and symbols.
20. Text disabled: the disabled state colour for text and symbols.