Colour workbench.

Try it

Use it in your site

Copy index.js and component.css together. The stylesheet resolves relative to the JavaScript module. No external dependency or backend is needed.

<script type="module" src="/open-ui/components/colour-workbench/index.js"></script>
<sdou-colour-workbench target="#colour-preview"
  storage-key="example.colour-schemes.v1"></sdou-colour-workbench>
<section id="colour-preview" class="colour-preview">
  <h2>Your next project.</h2>
  <p>Try the colours on real text and controls.</p>
  <a href="#usage">See the integration</a>
</section>

JavaScript source · Component CSS · Demo token adapter · PHP rendering example

Five colour roles

Background, text, accent, trim and headings. Native colour pickers and hex fields update the target immediately.

The target receives these CSS properties: --sdou-colour-background, --sdou-colour-font, --sdou-colour-spot, --sdou-colour-trim and --sdou-colour-headings. Map them to your authored styles, as in demo.css.

For existing systems, the optional tokens attribute maps each role to an array of CSS custom properties. For example, {"background":["--page"],"spot":["--accent"]}. Only valid custom property names and six digit hex colours are applied.

Saved schemes

The left rail occupies 20 percent of the desktop panel. Controls occupy 80 percent. The panel stacks on small screens. Two starting schemes are included, Shoe Leather & Gold and Starlit Navy.

Save up to 40 named schemes in this browser. Saving an existing name replaces that saved scheme. Built in schemes are preserved. Delete removes a personal scheme. Use site colours restores the original target properties while keeping saved schemes. Copy CSS exports the current palette.

Nothing is sent to a server. Set a stable, site specific storage-key. If browser storage is unavailable, the live preview still works and the panel explains how to copy the CSS.

Interaction and accessibility

Mouse hover opens the panel. Click, touch or keyboard activation pins it open. Escape, Close and outside interaction dismiss it. Explicit dismissal returns focus to the launcher. The native popover is nonmodal and allows normal keyboard navigation.

Colour inputs have visible labels and text alternatives. The controls keep their own readable palette while you experiment. Contrast readouts compare text, headings and accent against the chosen background. They do not certify the whole page or prevent an author from trying low contrast colours.

Dispatches sdou:colours-change with detail.colors after changes. A null value means restore site colours. The palette, hasOverride and css properties support host adapters. Keep the accessibility preferences gear separate. A host with its own theme controller must reapply the chosen author palette after theme updates.

Origin and verification

An original Starlit component, created for the sltd.ca workshop redesign. SiteCraft uses it as an optional authoring control. It has no dependency on the other interface studies.

Browser checks cover live hex edits, saved scheme reload, switching and deletion, reset, narrow layout and keyboard dismissal. Native colour picker behaviour depends on the browser and operating system. Broader assistive technology and device testing remains separate.