Colours

The colour picker is a colour field that opens a panel, or the panel itself drawn in the page. Saturation and brightness on a square, hue and opacity on tracks, and the value typed in hex, RGB, HSL or OKLCH — any CSS colour or colour name is read, and the value is always written in the format you choose.

Your brand colours and design tokens sit beside it as swatches, read from the page so they follow the theme. Every colour can be checked against a background as you choose it, against the WCAG thresholds for text, large text or graphics, and one press finds the nearest colour of the same hue that passes. It goes into a form like any other field.

A brand theme

An application's theme in four colours. Change the brand colour and the header, the button and the badge follow; the text colour is checked against the brand colour as you choose it, and the fix button appears when it would be hard to read.

Northwind Billing

3 overdue

Invoices due this week

Send reminders

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-color-picker id="cp-brand" label="Brand" value="#3559e0" format="hex"></bmx-color-picker>
<bmx-color-picker id="cp-on" label="Text on the brand colour" value="#ffffff" format="hex" contrast-with="#3559e0" description="Checked as normal text, WCAG AA."></bmx-color-picker>
<bmx-color-picker id="cp-accent" label="Accent" value="#f29d0b" format="hex"></bmx-color-picker>
<bmx-color-picker id="cp-surface" label="Surface" value="#f7f8fc" format="hex"></bmx-color-picker>

Your design tokens as swatches

The swatches here are custom properties — var(--np-blue-600) and the like — read from the page, in named groups. Choose one and the change says which token it came from, so a theme editor can save the token rather than a copied value. Drawn in the page, with opacity.

Choose a swatch.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-color-picker id="cp-tokens" label="Chart series colour" mode="inline" alpha format="oklch" value="var(--np-teal-500)"></bmx-color-picker>

Readable by design

A text colour checked against a background, as you drag. Change the background, the size of the text or the level, and the check follows. When it fails, Fix moves the colour to the nearest one of the same hue that passes.

Background Used for Level

The quick brown fox, at body size. Large text

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-color-picker id="cp-contrast" label="Text colour" mode="inline" value="#9ca3af" contrast-with="#1f2430" format="hsl"></bmx-color-picker>

In a form

A required field with a name, cleared with the cross and reset with the form. The form receives the text you see, in the format the field writes — here OKLCH, with opacity.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-color-picker name="highlight" label="Highlight colour" required clearable alpha format="oklch" placeholder="No colour yet"></bmx-color-picker>
<bmx-color-picker name="border" label="Border colour" value="#94a3b8" formats="hex,rgb"></bmx-color-picker>