UI Elements

ColorPicker

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

Anatomy

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

Svelte
<label class="whole">
  <div class="middle"> <!-- this middle element is background for transparency color -->
    <div class="main"> <!-- this main element is color sample -->
      <input type="color" {...attributes} bind:value bind:this={element} use:action />
    </div>
  </div>
</label>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface ColorPickerProps {
  value?: string; // bindable ("#000000")
  alpha?: number; // bindable (1)
  attributes?: HTMLInputAttributes;
  action?: Action;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • alpha - Alpha value representing transparency

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-color-picker

Exports

Types

TypeScript
type ColorPickerReqdProps = never;
type ColorPickerBindProps = "value" | "alpha" | "variant" | "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
Enter variant as you like