How to get the same specific colors from the original image to new created image with the same amount of color and same width and height?

Question

This is the original image , colorslevels1.jpg:

what I want to do is to get the colors from the ruler plate without any the black numbers colors and the gray.

only the colors inside like this:

but it should be the same size width height like in the original image. and to get it automatic , i mean without setting the width and height manual like i'm doing now in the code.

Then I'm using this both methods to get specific colors from the image and put the colors in a new image.

there are two problems:

the first is that I'm setting the widthLine and heightLine manual and I'm not sure if it's the right thing to do?

the second problem is that I'm getting error in the method Getcolors on the line:

targetColors.Add(new ColorItem() { color = c, hexColor = hexColor });

on the part: new ColorItem() { color = c, hexColor = hexColor

the error is: Severit Argument 1: cannot convert from 'Colors_Scanner.Form1.ColorItem' to 'string'

I'm not sure if to just add .toString() ?

public class ColorItem
{
    public Color color { get; set; }
    public string hexColor { get; set; }
}

private List<ColorItem> GetColors()
{
    List<string> targetColors = new List<string>
    {
        "#ff00fe",
        "#d00078",
        "#e10a12",
        "#fb3f00",
        "#ff7d01",
        "#ffa800",
        "#ffcf00",
        "#fefd19",
        "#7cff21",
        "#12f218",
        "#01d31c",
        "#00b02c",
        "#008c4d",
        "#00a09b",
        "#00c3c9",
        "#0165ef"
    };

    List<ColorItem> colors = new List<ColorItem>();

    using (var bmp = new Bitmap(@"sourceImage.jpg"))
    {
        int width = bmp.Width;
        int height = bmp.Height;

        for (int j = 0; j < height; j++)
        {
            for (int i = 0; i < width; i++)
            {
                Color c = bmp.GetPixel(i, j);
                string hexColor = ColorTranslator.ToHtml(c).ToLower(); // Convert to lowercase

                // Check if the lowercase hex color matches any of the target colors
                if (targetColors.Contains(hexColor))
                {
                    if (colors.Count(d=>d.hexColor == hexColor) == 0)
                    {
                        targetColors.Add(new ColorItem() { color = c, hexColor = hexColor });
                    }     
                }
            }
        }

        // Save the bitmap with the colors once all colors are collected
        SaveColorsAsBitmap(colors, @"resultImage.png");
    }

    return colors;
}

private void SaveColorsAsBitmap(List<ColorItem> colors, string filePath)
{
    // Determine the dimensions of the bitmap
    int widthLine = 200; // Set the desired width (adjust as needed)
    int heightLine = 50;

    // Create a new transparent bitmap with the determined dimensions
    using (Bitmap bitmap = new Bitmap(widthLine, colors.Count * heightLine, PixelFormat.Format32bppArgb))
    {
        using (Graphics g = Graphics.FromImage(bitmap))
        {
            // Clear the background to transparent
            g.Clear(Color.Transparent);

            // Draw each color as a vertical line on the bitmap
            for (int i = 0; i < colors.Count; i++)
            {
                using (SolidBrush brush = new SolidBrush(colors[i].color))
                {
                            g.FillRectangle(brush, 0, (i) * heightLine, widthLine, (colors.Count + 1) * heightLine);
                }
            }
        }

        // Save the bitmap as a PNG file (PNG supports transparency)
        bitmap.Save(filePath, ImageFormat.Png);
    }
}