ColorPicker

Choose colors with a spectrum, brightness slider and channel fields, with optional opacity.

Usage

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker defaultValue="#0078d4" />

Shapes

Use shape with the shared Shapes options: rounded (default), square or circular. All expose the same keyboard controls.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker shape="square" defaultValue="#0078d4" />
<ColorPicker shape="rounded" defaultValue="#107c10" />
<ColorPicker shape="circular" defaultValue="#d83b01" />

Horizontal orientation

Set orientation="horizontal" to place the channel fields beside the spectrum and use vertical sliders.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker orientation="horizontal" defaultValue="#107c10" alpha />

Opacity

Enable alpha to edit opacity. The preview shows the color over a checkerboard and against its opaque equivalent. User edits include the alpha channel in the hexadecimal value.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker shape="circular" defaultValue="#0078d480" alpha />

RGB and HSV fields

Use format="hsv" to start with hue, saturation and brightness fields. Switching between RGB and HSV preserves the selected color.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker defaultValue="#8764b8" format="hsv" />

Collapsed

Use collapsed to hide channel fields initially. The expansion button exposes its state with aria-expanded; bind:collapsed lets the application control it.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker defaultValue="#d83b01" collapsed />
<ColorPicker shape="circular" defaultValue="#0078d4" collapsed alpha />

Controlled value

Use bind:value to read and update the selected color. External CSS colors synchronize the spectrum, preview and fields. User edits produce hexadecimal strings.

<script>
  import { ColorPicker, Button } from 'fluentui-svelte';
  let color = $state('#0078d4');
</script>

<ColorPicker bind:value={color} />
<output>{color}</output>
<Button onclick={() => color = '#107c10'}>Set green</Button>

Using with Label

Wrap the picker in Label to name the group. For a separate label, use aria-labelledby; otherwise provide aria-label or label.

<script>
  import { ColorPicker, Label } from 'fluentui-svelte';
</script>

<Label label="Accent color">
  <ColorPicker name="accent" defaultValue="#0078d4" />
</Label>

Forms and reset

The field submits a single color under name. Native validation supports required and pattern. Reset restores defaultValue; disabled fields are excluded from submission.

<script>
  import { ColorPicker, Button, Label } from 'fluentui-svelte';
  let submitted = $state('');
</script>

<form onsubmit={(event) => {
  event.preventDefault();
  submitted = String(new FormData(event.currentTarget).get('accent'));
}}>
  <Label label="Accent color" required>
    <ColorPicker name="accent" defaultValue="#0078d4" required />
  </Label>
  <Button type="submit">Submit</Button>
  <Button type="reset">Reset</Button>
</form>
<output>{submitted}</output>

Disabled

Use disabled to disable interaction and form submission. Use readonly to preserve submission while preventing edits.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker defaultValue="#0078d4" disabled />
<ColorPicker defaultValue="#d83b01" readonly />

Keyboard and accessible names

Tab reaches the hue and saturation ranges, brightness and opacity sliders, and channel fields. In the spectrum, Left and Right move the marker horizontally; Up and Down move it vertically. Both coordinates are announced. Home and End select the focused range's limits. Customize channelLabels, label, formatLabel, moreLabel, lessLabel and validationMessage for your language. Native oninput and onchange report edits through the form field; ref exposes that field and wrapperAttributes styles the visible group.

Input constraints

RGB channels accept integers from 0 to 255; hue from 0 to 360, and saturation, brightness and opacity from 0 to 100. Out-of-range values are clamped. Empty channels restore their selected value on blur. Hex accepts 3 or 6 digits, and 4 or 8 with alpha. The # prefix is optional. Invalid or incomplete hexadecimal edits restore the selected color.

Component Props