For #000000 the Hue Bar becomes unresponsive, until I change the color using the thumb first

[andupotorac]

Would be great if you can point me to what might cause this issue. Right now the solution is to add a small value to green, in RGB, which seems to fix the issue. It looks as if it may be initialising with the wrong values?

[CaptainCodeman]

I'm not able to replicate this, can you explain in more detail?

[andupotorac]

I'm not able to replicate this, can you explain in more detail?

Yes, thanks for replying! The problem occurs because when RGB values are all 0 (black), the color becomes undefined, making it difficult to manipulate hue in the sidebar.

So if the initial color is set to #000000, I have to try and do tricks like this to "move" the color Thumb elsewhere, otherwise it won't let me change the opacity slider, until I first move the Thumb to pick a valid color.

/**
   * Initializes component state
   * - Normalizes initial color value
   * - Sets up event listeners
   * - Configures opacity handling
   * - Initializes recent colors
   */
  function initializeColor() {
    const normalizedHex = normalizeHexInput(value);
    if (normalizedHex.startsWith('#')) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalizedHex);
      if (result) {
        const r = parseInt(result[1], 16) / 255;
        const g = parseInt(result[2], 16) / 255;
        const b = parseInt(result[3], 16) / 255;

        rgb = {
          r: r === 0 ? 0.000001 : r, // Prevent zero opacity issues
          g: g,
          b: b,
          a: lastKnownOpacity
        };

        // Set initial display values
        hexInput = normalizedHex;
        previewColor = getRgbaColor();

        console.log('Color initialized:', {
          hex: normalizedHex,
          rgb,
          opacity: lastKnownOpacity,
          percentage: opacityPercentage
        });
      }
    }
  }

This causes issues further down the line, when users text in black, etc. This is the summary AI did to describe the problem at hand:

Bug Report: HSL/HSV Color Picker - Black Color Edge Case

Issue Description: When selecting pure black (#000000) in the color picker, the opacity slider becomes non-functional. This occurs because black (RGB: 0,0,0) results in an undefined hue value in HSL/HSV color space.

Technical Details:

• When R=G=B=0, the hue becomes mathematically undefined in HSL/HSV color space
• This is a known mathematical limitation of the HSL/HSV color models
• Currently, this prevents users from adjusting opacity when pure black is selected

Suggested Solutions:

1. Implement special case handling for black colors in the HSL/HSV conversion logic
2. Consider using a different color model (like RGBA) for internal calculations when pure black is detected
3. Add a small default hue value (e.g., 0) when undefined is detected, while maintaining the visual black appearance

Expected Behavior: Users should be able to adjust the opacity of black colors just like any other color, without the need for workarounds like adding epsilon values to RGB components.

Current Workaround: We're currently considering adding a small epsilon value (0.000001) to RGB components when black is detected, but we believe this should be handled at the component level for a more robust solution.

When we don't apply that workaround, we cannot change the hue value when we drag the bar. First we have to move the color picker.

Maybe the easiest solution is to simulate moving the thumb in the color picker so you can reinitialise the color?

[andupotorac]

Try setting this to start at #000000, and then don't change the color at all, but try to change the Hue: https://captaincodeman.github.io/svelte-color-select/

[andupotorac]

I made a quick video, if you jump to the end you can see the issue at hand. If you need to see how we use this, I also presented it in the first few minutes.

https://youtu.be/9HAqTsIXzOg