ColorPicker

An input component for selecting colors from a palette or color wheel.

Usage

Use standalone.

Svelte

<ColorPicker {...props} />

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte

<label class="whole">
  <div class="middle">
    <!-- when checkered is true, this middle element provides the default transparency background -->
    <div class="main">
      <!-- this main element is the color sample over the transparent native input -->
      <input aria-label {...rest} type="color" bind:value bind:this={element} />
    </div>
  </div>
</label>

Props

Name	Type	Default	Description
`value`	`string`	`"#000000"`	Bindable color value
`alpha`	`number`	`1`	Alpha value representing transparency
`checkered`	`boolean`	`true`	Shows a checkerboard background behind the color sample to convey transparency
`ariaLabel`	`string`	-	Accessible label for the color input
`attach`	`Attachment`	-	Svelte attachment on the input
`element`	`HTMLInputElement`	-	Bindable input element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Variant

Other HTMLInputAttributes are passed to <input> via rest props; class is merged onto the root.

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-color-picker

Accessibility

ARIA Roles and Attributes

The component applies aria-label to the native color input when ariaLabel is supplied.

Provide an accessible name yourself because there is no built-in visible label. Prefer ariaLabel, pass aria-labelledby through the rest props, or associate a <label> with the color input.

Standards Basis

ColorPicker is built on a native <input type="color">, so keyboard and assistive-technology support follows the browser standard for color inputs. See the Concepts standards-first guidance for the library's approach.

Exports

Types

TypeScript

interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value" | "alpha" | "aria-label"> {
  value?: string; // bindable ("#000000")
  alpha?: number; // (1)
  checkered?: boolean; // (true)
  ariaLabel?: string;
  attach?: Attachment<HTMLInputElement>;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // ariaLabel is the recommended accessible-name prop; aria-labelledby may be passed via ...rest
  // class & other HTMLInputAttributes are passed to <input> via ...rest (class is merged onto the control)
}
type ColorPickerReqdProps = never;
type ColorPickerBindProps = "value" | "element";

Others

TypeScript

// Cast RGB value to Hex value.
// getHex([255, 123, 34])  => "#ff7b22"
// getHex([255, 255, 255]) => "#ffffff"
function getHex(rgb: [number, number, number]): string;

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like