Color Picker — ARC UI

Components

Color Picker

input

interactive

<arc-color-picker>

Overview

Guidelines

When to use

Provide a `label` to give the picker context, especially when multiple pickers appear on the same page
Pass a `presets` array for brand palettes or commonly used colors to speed up selection
Use the `value` prop to set an initial color in 6-digit hex format (e.g. `#4d7ef7`)
Listen for `arc-change` to update your application state in real time as the user picks
Place the picker inside a popover or dropdown if horizontal space is constrained

When not to use

Do not pass 3-digit hex shorthand (e.g. `#f00`) -- the component expects the full 6-digit format
Do not use Color Picker when the user only needs to choose from a fixed set of options -- use a select or radio group instead
Do not provide more than ~20 preset swatches -- the row wraps and can become visually overwhelming
Do not rely on color alone to convey meaning -- pair with labels or icons for accessibility
Avoid placing the picker in very narrow containers under 260px wide -- the area and slider need room

Features

Saturation/lightness gradient area with crosshair cursor and pointer-drag interaction
Horizontal hue slider spanning the full 0-360 degree spectrum with a draggable thumb
Live color preview swatch adjacent to an editable hex input field
Preset color swatches rendered from an array prop with active-state border highlighting
Internal HSL-to-hex and hex-to-HSL conversion -- all values emitted as hex strings
Hex input validates on blur; invalid values revert to the current color
Touch-friendly pointer events with `setPointerCapture` for smooth mobile dragging
Disabled state at 40% opacity with pointer events blocked

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-color-picker
  label="Theme Color"
  value="#4d7ef7"
></arc-color-picker>

<script>
  const picker = document.querySelector('arc-color-picker');
  picker.presets = ['#4d7ef7', '#22c55e', '#ef4444', '#eab308'];
  picker.addEventListener('arc-change', e => {
    console.log('Selected:', e.detail.value);
  });
</script>

import { ColorPicker } from '@arclux/arc-ui-react';

<ColorPicker
  label="Theme Color"
  value="#4d7ef7"
  presets={['#4d7ef7', '#22c55e', '#ef4444', '#eab308']}
  onArcChange={(e) => console.log(e.detail.value)}
/>

<script setup>
import { ColorPicker } from '@arclux/arc-ui-vue';

const presets = ['#4d7ef7', '#22c55e', '#ef4444', '#eab308'];
</script>

<template>
  <ColorPicker
    label="Theme Color"
    value="#4d7ef7"
    :presets="presets"
    @arc-change="(e) => console.log(e.detail.value)"
  />
</template>

<script>
  import { ColorPicker } from '@arclux/arc-ui-svelte';

  const presets = ['#4d7ef7', '#22c55e', '#ef4444', '#eab308'];
</script>

<ColorPicker
  label="Theme Color"
  value="#4d7ef7"
  {presets}
  on:arc-change={(e) => console.log(e.detail.value)}
/>

import { Component } from '@angular/core';
import { ColorPicker } from '@arclux/arc-ui-angular';

@Component({
  imports: [ColorPicker],
  template: `
    <ColorPicker
      label="Theme Color"
      value="#4d7ef7"
      [presets]="presets"
      (arc-change)="onPick($event)"
    ></ColorPicker>
  `,
})
export class MyComponent {
  presets = ['#4d7ef7', '#22c55e', '#ef4444', '#eab308'];

  onPick(e: CustomEvent) {
    console.log('Selected:', e.detail.value);
  }
}

import { ColorPicker } from '@arclux/arc-ui-solid';

<ColorPicker
  label="Theme Color"
  value="#4d7ef7"
  presets={['#4d7ef7', '#22c55e', '#ef4444', '#eab308']}
  onArcChange={(e) => console.log(e.detail.value)}
/>

import { ColorPicker } from '@arclux/arc-ui-preact';

<ColorPicker
  label="Theme Color"
  value="#4d7ef7"
  presets={['#4d7ef7', '#22c55e', '#ef4444', '#eab308']}
  onArcChange={(e) => console.log(e.detail.value)}
/>

API

Prop	Type	Default	Description
`value`	`string`	`'#4d7ef7'`	Current color as a 6-digit hex string (e.g. `#4d7ef7`). Reflected as an attribute.
`presets`	`string[]`	`[]`	Array of hex color strings to display as quick-select swatches below the hex input.
`label`	`string`	`''`	Label text displayed above the picker in uppercase accent font.
`disabled`	`boolean`	`false`	Disables all interaction, reducing opacity to 40% and blocking pointer events.

Events

Event	Description
`arc-change`	Fired when the color changes via any input method. `event.detail.value` contains the hex string.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight