Semi.Avalonia/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml

<UserControl
    x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
    xmlns:controls="using:Avalonia.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="1450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <ScrollViewer>
        <StackPanel Spacing="20">
            <StackPanel
                VerticalAlignment="Top"
                Orientation="Horizontal"
                Spacing="20">
                <ColorView Name="Test" ColorSpectrumShape="Ring" />
                <ColorView ColorSpectrumShape="Box" />
                <ColorView Palette="{DynamicResource SemiColorPalette}" />
            </StackPanel>
            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
                <ColorView
                    Name="SimpleColorViewTest"
                    HsvColor="hsv(120,11%,10%)"
                    IsAlphaVisible="True"
                    Theme="{StaticResource SimpleColorView}" />
                <StackPanel>
                    <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
                    <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                </StackPanel>
            </StackPanel>
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
                    <ColorPicker.Palette>
                        <controls:FlatHalfColorPalette />
                    </ColorPicker.Palette>
                </ColorPicker>
                <ColorPicker Margin="8" ColorSpectrumShape="Box">
                    <ColorPicker.Palette>
                        <colorPicker:SemiColorLightPalette />
                    </ColorPicker.Palette>
                </ColorPicker>

                <ColorPicker
                    Margin="8"
                    ColorSpectrumShape="Box"
                    Theme="{DynamicResource HexColorPicker}">
                    <ColorPicker.Palette>
                        <colorPicker:SemiColorLightPalette />
                    </ColorPicker.Palette>
                </ColorPicker>
            </StackPanel>
            <StackPanel HorizontalAlignment="Left" >
                <TextBlock Text="Use Style to customize button"></TextBlock>
                <ColorPicker
                    Margin="8"
                    Width="32"
                    HsvColor="hsv(120,11%,10%)"
                    >
                    <ColorPicker.Content>
                        <Border
                            Margin="1"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="{Binding $parent[ColorPicker].HsvColor, 
                                                     Converter={StaticResource ToBrushConverter}}"
                            CornerRadius="1" />
                    </ColorPicker.Content>
                    <ColorPicker.Styles>
                        <Style Selector="DropDownButton">
                            <Setter Property="Padding" Value="0"/>
                            <Style Selector="^ /template/ PathIcon">
                                <Setter Property="IsVisible" Value="False"/>
                            </Style>
                        </Style>
                    </ColorPicker.Styles>
                </ColorPicker>

            </StackPanel>
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                <ColorPicker
                    Margin="8"
                    HsvColor="hsv(120,11%,10%)"
                    Theme="{StaticResource SimpleColorPicker}" />
                <ColorPicker
                    Margin="8"
                    HsvColor="hsv(120,11%,10%)"
                    Theme="{StaticResource HexSimpleColorPicker}" />
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
</UserControl>