What are HSL Distributions?

HSL (Hue, Saturation, Lightness) distributions show how colors in your image are spread across three key dimensions of color space.

Reading the Charts:

Hue Chart:

• Horizontal Axis: Represents hue (color type) from 0° to 360°
  Red → Orange → Yellow → Green → Blue → Purple
• Bar Height: Taller bars = more pixels of that hue
• Baseline: Shows the full color spectrum

Saturation Chart:

• Horizontal Axis: Represents saturation from 0% (gray) to 100% (fully saturated)
• Bar Height: Taller bars = more pixels with that saturation level
• Baseline: Shows saturation gradient from gray to vibrant

Lightness Chart:

• Horizontal Axis: Represents lightness from 0% (black) to 100% (white)
• Bar Height: Taller bars = more pixels with that lightness level
• Baseline: Shows lightness gradient from black to white

Extracted Colors:

White-outlined dots with colored centers show where your extracted palette colors fall on each dimension. This helps you understand:

• Whether your palette captures the full range of hues, saturations, and lightnesses
• If colors are clustered in certain ranges or spread evenly
• How different extraction methods perform across all color dimensions
• Whether your palette has good contrast and variety

Tips:

• Images with tall bars in one area are dominated by similar colors
• Spread-out bars indicate a diverse color palette
• Good palettes often have colors spread across different ranges
• Gray/black/white pixels are filtered out for clarity