Colour Theme Builder

About this plugin

This plugin helps you build colour variables that are named for how they are used in digital products. You define one or more palettes by entering Hex values; each palette maps those colours onto a consistent set of roles.Colour managementThe plugin works in OKLCH to normalise Hex input and to derive the Hex value for each variable. Colours are tuned toward contrast and chroma targets against pure white and pure black. Neutrals and yellows are handled with separate rules so greys and warm yellows behave the way people usually expect for chroma and lightness.SpecificationsEach variable is given a code-style name built from five parts: property, role, element, prominence, and state.Using colourIntended use of each variable:Bg: Main background of the admin shell.Bg subtle: Secondary, quieter background of the admin shell.Surface: Background for prominent surfaces (e.g. cards, tinted controls).Surface hovered: Hover state for those prominent surfaces.Surface selected: Active or selected state for those prominent surfaces.Surface disabled: Disabled state for those prominent surfaces.Border subtle: Dividers and low-emphasis separators.Border: Default border on any element.Border hovered: Border on hover.Border selected: Focus ring or selected border.Border disabled: Border in a disabled state.Fill: Background for high-prominence controls (e.g. primary buttons).Fill hovered: Hover state for those fills.Fill disabled: Disabled state for those fills.Text on fill: Text and icons on Fill and Fill hovered.Text on fill disabled: Text and icons on Fill disabled.Text subtle: Lowest-prominence text and icons (e.g. placeholders).Text low contrast: Low-prominence supporting copy (e.g. descriptions).Text high contrast: Default body and UI text and icons.Text disabled: Disabled text and icons.