ColorPicker


Mode
Elevation
Rounded
Alpha
RGB 67, 90, 184
OKLCH 50.0% 0.150 270.0°
Color #6644ff

Usage


Svelte
<script>
    let color = $state("#6644ff");
</script>

<ColorPicker
    value={color}
    onchange={(hex) => color = hex}
/>

API


PropTypeDefault
valuestring"#6644ff"
mode"full" | "achromatic""full"
roundedbooleanfalse
elevation"none" | "subtle" | "hard""none"
alphabooleanfalse
onchange(hex: string, alpha: number) => voidundefined
leadingSnippetundefined
extraSnippetundefined
trailingSnippetundefined
childrenSnippetundefined
Prop value
Type string
Default "#6644ff"
Prop mode
Type "full" | "achromatic"
Default "full"
Prop rounded
Type boolean
Default false
Prop elevation
Type "none" | "subtle" | "hard"
Default "none"
Prop alpha
Type boolean
Default false
Prop onchange
Type (hex: string, alpha: number) => void
Default undefined
Prop leading
Type Snippet
Default undefined
Prop extra
Type Snippet
Default undefined
Prop trailing
Type Snippet
Default undefined
Prop children
Type Snippet
Default undefined