ColorPicker
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
| Prop | Type | Default |
|---|---|---|
| value | string | "#6644ff" |
| mode | "full" | "achromatic" | "full" |
| rounded | boolean | false |
| elevation | "none" | "subtle" | "hard" | "none" |
| alpha | boolean | false |
| onchange | (hex: string, alpha: number) => void | undefined |
| leading | Snippet | undefined |
| extra | Snippet | undefined |
| trailing | Snippet | undefined |
| children | Snippet | undefined |
Prop value
Type
stringDefault
"#6644ff"Prop mode
Type
"full" | "achromatic"Default
"full"Prop rounded
Type
booleanDefault
falseProp elevation
Type
"none" | "subtle" | "hard"Default
"none"Prop alpha
Type
booleanDefault
falseProp onchange
Type
(hex: string, alpha: number) => voidDefault
undefinedProp leading
Type
SnippetDefault
undefinedProp extra
Type
SnippetDefault
undefinedProp trailing
Type
SnippetDefault
undefinedProp children
Type
SnippetDefault
undefined