Components

Color picker

A flat .ds-colorpicker column: a grid of square .ds-colorpicker__swatch cells over a .ds-colorpicker__row pairing a hex .ds-input with a native <input type=color>. The selected swatch takes a 2px ink ring. No radius, no shadow — selection reads as an ink outline.

Brand palette

The default .ds-colorpicker__swatches grid carries the brand palette plus white. Click a swatch to select it (a .is-selected 2px ink ring), or use the hex field / native input below — all three stay in sync. This demo is wired by the small inline script at the bottom of the page (no dependencies).

Swatches + hex + native

<div class="ds-colorpicker">
  <div class="ds-colorpicker__swatches" role="group" aria-label="Color swatches">
    <button class="ds-colorpicker__swatch is-selected" aria-pressed="true"
            aria-label="#161616" style="background:#161616"></button>
    <button class="ds-colorpicker__swatch" aria-label="#ff2a00"
            style="background:#ff2a00"></button> …
  </div>
  <div class="ds-colorpicker__row">
    <input class="ds-input" type="text" value="#161616" aria-label="Hex color">
    <input class="ds-colorpicker__native" type="color" value="#161616" aria-label="Pick a color">
  </div>
</div>

React

The ColorPicker wires it all together: clicking a swatch, editing the hex field, or moving the native input updates one value. Works controlled (value/onChange) or uncontrolled (defaultValue). Pass swatches to override the palette; the default is the exported BRAND_SWATCHES.

import { ColorPicker } from "@diametral/design-system/react";

<ColorPicker
  defaultValue="#ff2a00"
  onChange={(hex) => console.log(hex)}
/>