Create a wpf gradient brush editor. ( RGB color to HSL/HSV )

Question

I want to create a gradient brush editor like MSVS 2013 brush editor.

I used the following code to make my editor

 <VisualBrush x:Key="MyBrush" TileMode="None">
        <VisualBrush.Visual>
            <Canvas Background="Black" Width="1" Height="1" >
                <Rectangle Width="1" Height="1" >
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="White" Offset="0" />
                                <GradientStop Color="{Binding ElementName=picker,Path=SelectedColour}" Offset="1" />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                    <Rectangle.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#00FFFFFF" Offset="1"/>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Canvas>
        </VisualBrush.Visual>
    </VisualBrush>

Please see the image below and answer to my question

UPDATE:

I realized that I should convert RGB to HSV.

RGB to HSV formula

Answer 1

If you read the article I sent you, you'll see how to get the X (saturation %), and the Y (lightness %). They are expressed as percentages and you can plot that circle based on the width of your color box. So if the square is 200x200 pixels and your saturation is 45%, then you would plot X = 90. If the lightness was 60% then you would plot the Y = 120.

The XAML:

<Path Stroke="White" StrokeThickness="2" Fill="Red" >
    <Path.Data>
        <EllipseGeometry 
            Center="{Binding Path=CenterPoint}" 
            RadiusX="5" 
            RadiusY="10" />
    </Path.Data>
</Path>

The View Model:

public Point CenterPoint
{
  get { return new Point(Lightness, Saturation); }
}

You'll need to fill in the details to convert your RGB color to HSL.