HSL Colors from an Image

Updated May 21, 2026

HSL colors from an image are hue, saturation, and lightness values derived from dominant pixels, written as hsl(h, s%, l%). HSL is the preferred format for generating tints, shades, and accessible theme variants in CSS design systems.

Extract HSL Colors in 3 Steps

1. Open phototones.com
2. Upload a JPG, PNG, WebP, or other image
3. Click “Generate Color Palette” — HSL values appear for every extracted swatch

Why HSL Matters for Design Systems

Hex and RGB describe a color as fixed coordinates. HSL describes it as a position on the color wheel plus two adjustable dimensions — which makes it ideal for building semantic design tokens.

Example: if PhotoTones extracts hsl(217, 91%, 60%) as your primary blue, you can derive:

• Hover state: reduce lightness to 50%
• Background tint: reduce saturation and raise lightness to 95%
• Dark mode variant: reduce lightness to 40% while keeping hue at 217

PhotoTones Pro ($7/month) automates this further with light and dark theme CSS — semantic custom properties derived from your extracted palette.

HSL in CSS

:root {
  --primary: hsl(217, 91%, 60%);
  --primary-hover: hsl(217, 91%, 50%);
  --primary-subtle: hsl(217, 40%, 95%);
}

.button {
  background: var(--primary);
}
.button:hover {
  background: var(--primary-hover);
}

HSL vs Hex vs RGB

• HSL — best for theme generation and programmatic color math; see also RGB from image and hex codes from image
• Hex — compact, universal in design tools
• RGB — native to Canvas and JavaScript color APIs

Frequently Asked Questions