Color Picker

Usage

<script lang="ts">
    import { ColorPicker } from "@hyvor/design/components";

    let color = '#000000';
    let inputTimes = 0;
    let changedTimes = 0;
</script>

<ColorPicker
    bind:color={color}
    oninput={() => inputTimes++}
    onchange={() => changedTimes++}
/>

<p>Color: {color}, Changed {times} times</p>
Color: #000000, inputs: 0, changes: 0

Properties

Name
Default
Description
color
#000000
The selected color (bindable).
size
30
Size (width and height) of the color swatch button in pixels.
show
false
Whether the picker popover is open (bindable).
alpha
false
Whether to allow an alpha channel.
align
start
Alignment of the picker popover relative to the swatch. One of:
  • start
  • center
  • end
position
bottom
Position of the picker popover relative to the swatch. One of:
  • top
  • bottom
  • left
  • right

Positioning and Alignment

Use position and align to control where the picker popover opens relative to the swatch. They work the same way as the Dropdown props.

<ColorPicker bind:color={color} position="bottom" align="start" />
Side the popover opens on
Alignment along that side

With Alpha

<ColorPicker bind:color={color} alpha />
Color: #00000066, inputs: 0, changes: 0
HYVOR Logo