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: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">
    <DockPanel>
        <ScrollViewer DockPanel.Dock="Right" Width="260">
            <StackPanel Margin="12" Spacing="8">
                <StackPanel.Styles>
                    <Style Selector="ToggleSwitch">
                        <Setter Property="OffContent" Value="{Binding $self.OnContent}" />
                    </Style>
                </StackPanel.Styles>
                <StackPanel Spacing="8">
                    <ToggleSwitch Name="AccentColors" OnContent="IsAccentColorsVisible" IsChecked="True" />
                    <ToggleSwitch Name="AlphaEnabled" OnContent="IsAlphaEnabled" IsChecked="True" />
                    <ToggleSwitch Name="Alpha" OnContent="IsAlphaVisible" IsChecked="True" />
                    <ToggleSwitch Name="ColorComponents" OnContent="IsColorComponentsVisible" IsChecked="True" />
                    <ToggleSwitch Name="ColorModel" OnContent="IsColorModelVisible" IsChecked="True" />
                    <ToggleSwitch Name="ColorPalette" OnContent="IsColorPaletteVisible" IsChecked="True" />
                    <ToggleSwitch Name="ColorPreview" OnContent="IsColorPreviewVisible" IsChecked="True" />
                    <ToggleSwitch Name="ColorSpectrum" OnContent="IsColorSpectrumVisible" IsChecked="True" />
                    <ToggleSwitch Name="ColorSpectrumSlider" OnContent="IsColorSpectrumSliderVisible" IsChecked="True" />
                    <ToggleSwitch Name="ComponentSlider" OnContent="IsComponentSliderVisible" IsChecked="True" />
                    <ToggleSwitch Name="ComponentTextInput" OnContent="IsComponentTextInputVisible" IsChecked="True" />
                    <ToggleSwitch Name="HexInput" OnContent="IsHexInputVisible" IsChecked="True" />
                </StackPanel>

                <Separator />

                <StackPanel Spacing="8">
                    <TextBlock>
                        <Run Text="Color: " />
                        <Run Text="{Binding #cv.Color,Mode=OneWay}" />
                    </TextBlock>
                    <TextBlock>
                        <Run Text="HsvColor:" />
                        <Run Text="{Binding #cv.HsvColor,Mode=OneWay}" />
                    </TextBlock>
                </StackPanel>
            </StackPanel>
        </ScrollViewer>

        <Border Margin="12"
                BorderBrush="{DynamicResource SemiColorBorder}"
                BorderThickness="1"
                CornerRadius="6"
                ClipToBounds="True">
            <Border.Styles>
                <Style Selector=":is(ColorView)">
                    <Setter Property="IsAccentColorsVisible" Value="{Binding #AccentColors.IsChecked}" />
                    <Setter Property="IsAlphaEnabled" Value="{Binding #AlphaEnabled.IsChecked}" />
                    <Setter Property="IsAlphaVisible" Value="{Binding #Alpha.IsChecked}" />
                    <Setter Property="IsColorComponentsVisible" Value="{Binding #ColorComponents.IsChecked}" />
                    <Setter Property="IsColorModelVisible" Value="{Binding #ColorModel.IsChecked}" />
                    <Setter Property="IsColorPaletteVisible" Value="{Binding #ColorPalette.IsChecked}" />
                    <Setter Property="IsColorPreviewVisible" Value="{Binding #ColorPreview.IsChecked}" />
                    <Setter Property="IsColorSpectrumVisible" Value="{Binding #ColorSpectrum.IsChecked}" />
                    <Setter Property="IsColorSpectrumSliderVisible" Value="{Binding #ColorSpectrumSlider.IsChecked}" />
                    <Setter Property="IsComponentSliderVisible" Value="{Binding #ComponentSlider.IsChecked}" />
                    <Setter Property="IsComponentTextInputVisible" Value="{Binding #ComponentTextInput.IsChecked}" />
                    <Setter Property="IsHexInputVisible" Value="{Binding #HexInput.IsChecked}" />

                    <Setter Property="Color" Value="#39C5BB" />
                </Style>
            </Border.Styles>
            <StackPanel Margin="12" Spacing="12" Orientation="Horizontal">
                <StackPanel Spacing="12">
                    <TextBlock Text="Default Theme" FontWeight="Bold" FontSize="16" />
                    <ColorView Name="cv" />
                    <StackPanel Spacing="12" Orientation="Horizontal">
                        <ColorPicker />
                        <ColorPicker Theme="{DynamicResource HexColorPicker}" />
                    </StackPanel>
                </StackPanel>
                <StackPanel Spacing="12">
                    <TextBlock Text="SimpleColorPicker" FontWeight="Bold" FontSize="16" />
                    <ColorView Theme="{DynamicResource SimpleColorView}" />
                    <StackPanel Spacing="12" Orientation="Horizontal">
                        <ColorPicker Theme="{DynamicResource SimpleColorPicker}" />
                        <ColorPicker Theme="{DynamicResource HexSimpleColorPicker}" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </Border>
    </DockPanel>
</UserControl>