Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Forms

ColorPicker

ColorPicker chooses any colour: a field for saturation and brightness, a hue track and the hex. A brand kit's colours, a design's own colour.

@anicanon/sakuga/uiv1.0Used onWeb

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

ColorPicker is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

ColorPicker is made for the web, and isn’t part of Sakuga for Android yet.

Not for

Guidelines

  • value and onChange speak hex (#1f6feb). The picker keeps the hue while the colour passes through grey, black or white.
  • presets are the colours the design or kit already has, as swatches under the field (presetsLabel, default "Colours in use").
  • fromPicture are the colours read from an uploaded picture, such as a logo, as a second row (pictureLabel, default "From the picture").
  • Typing a full hex (3 or 6 digits, with or without #) moves the field and track to it.
  • For a compact form, open it in a Popover from a swatch or a field.
ColorPickerExample.jsxReact
import { useState } from 'react';
import { ColorPicker } from '@anicanon/sakuga/ui';

export default function ColorPickerExample() {
  const [value, setValue] = useState('#c2335f');
  const v = value;
  const set = setValue;
  return (
    <ColorPicker
      label="Brand colour"
      value={v}
      onChange={set}
      presets={[
        { label: 'Ink', color: '#0b0a10' },
        { label: 'Camellia', color: '#c2335f' },
        { label: 'Paper', color: '#f6f1e7' },
        { label: 'Sky', color: '#3b82c4' },
      ]}
      fromPicture={[
        { label: 'Logo red', color: '#d6402b' },
        { label: 'Logo gold', color: '#e8b03a' },
        { label: 'Logo navy', color: '#1d2b4f' },
      ]}
    />
  );
}

PropsColorPickerProps

labelrequired
string
value
string
Hex, "#1f6feb".
onChange
(hex: string) => void
Called with hex as it changes.
presets
{ label: string; color: string; }[]
presetsLabel
stringDefault 'Colours in use'
fromPicture
{ label: string; color: string; }[]
pictureLabel
stringDefault 'From the picture'
id
string
className
string
ColorPickerExample.swiftiOS · coming soon
ColorPickerExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Space and shape

colorpick-gap
gap-lg
12px
colorpick-max-width
its own value
320px
colorpick-field-height
its own value
160px
colorpick-field-radius
radius-sm
8px
colorpick-field-tint
its own value
linear-gradient(to right,#fff,rgba(255,255,255,0))
colorpick-field-shade
its own value
linear-gradient(to top,#000,rgba(0,0,0,0))
colorpick-hue-height
its own value
12px
colorpick-hue-margin-x
its own value
calc(16px / 2)
colorpick-hue-radius
radius-full
9999px
colorpick-hue-spectrum
its own value
linear-gradient(to right,#f00 0%,#ff0 16.67%,#0f0 33.33%,#0ff 50%,#00f 66.67%,#f0f 83.33%,#f00 100%)
colorpick-thumb-size
its own value
16px
colorpick-thumb-radius
radius-full
9999px
colorpick-thumb-ring-width
line-strong
2px
colorpick-row-gap
gap-md
8px
colorpick-swatch-size
size-control-sm
36px
colorpick-swatch-radius
radius-sm
8px
colorpick-swatch-ring-width
line-hairline
1px
colorpick-hex-gap
gap-2xs
2px
colorpick-hex-height
size-control-sm
36px
colorpick-hex-padding-x
inset-md
12px
colorpick-hex-radius
radius-sm
8px
colorpick-hex-ring-width
line-hairline
1px
colorpick-hex-focus-ring-width
line-strong
2px
colorpick-group-gap
gap-sm
6px
colorpick-forced-edge-width
line-hairline
1px
colorpick-forced-focus-width
line-strong
2px
colorpick-hue-target-size
space-6
24px

Type

colorpick-hex-font
text-body
400 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
colorpick-title-font
text-small-strong
600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
A group named by label. The field is a slider named "Saturation and brightness" that speaks both; arrows move it 1% (10% with Shift), left and right for saturation, up and down for brightness. The hue track is a slider named "Hue" in degrees: arrows by 1 (10 with Shift), Page Up and Page Down by 30, Home and End. The hex field is a text field named by label and "hex". Presets and picture colours are radio groups (see SwatchPicker), the chosen one checked when it matches.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.