Unadjusted source
1200 × 800 px · PNG
Project-created synthetic fixture used without global corrections, cropping, or resizing.
Download source( Reproducible first-party experiment )
See what HSL actually changes
The same image was opened three times in the editor. Each export changed one HSL range while every global adjustment remained at zero.
Observed comparisons
The project-owned source is 1200×800 px. Percentages show how many pixels changed in at least one RGB channel; they are not quality percentages.
Blue range
Higher saturation and lower luminance intensified much of the cool gradient and also affected nearby colors.
- Settings
- H 0 · S +45 · L -15
- Changed RGB pixels
- 98.49%
- Mean RGB difference
- 37.809 / 255
Purple range
The hue shift and saturation changed both the violet sky and mountains, showing that different areas in one range respond together.
- Settings
- H +35 · S +30 · L 0
- Changed RGB pixels
- 63.533%
- Mean RGB difference
- 11.796 / 255
Yellow range
The change remained mostly around the sun. Few pixels in this image belong to the yellow range.
- Settings
- H -25 · S +35 · L +15
- Changed RGB pixels
- 1.51%
- Mean RGB difference
- 0.287 / 255
Hue
Shifts the color of pixels reached by the range; it does not select an object.
Saturation
Increases or reduces color intensity within that range.
Luminance
Lightens or darkens pixels influenced by the range.
Method and limitations
Conceptual reference: CSS Color Module Level 4, HSL section (W3C). The numerical results on this page come from the first-party experiment, not the specification.
npm run dev -- --port 3218
npm run guide:hslContinue exploring HSL
HSL color geometry and practical boundaries
The HSL color model translates Cartesian RGB coordinates (Red, Green, Blue) into a cylindrical geometry defined by Hue, Saturation, and Lightness. Hue represents the color angle on a 360-degree color circle (0° Red, 60° Yellow, 120° Green, 180° Cyan, 240° Blue, 300° Magenta). Saturation represents radial purity from 0% (grayscale neutral) to 100% (fully saturated pigment). Lightness represents vertical brightness from 0% (solid black) to 100% (pure white), with balanced tones at 50%.
In PhotoEditor.sbs, selective color editing provides dedicated controls across eight discrete color ranges: Red, Orange, Yellow, Green, Aqua, Blue, Purple, and Magenta. Rather than executing hard threshold cuts that cause harsh pixel banding or posterization, the editor applies a smooth bell-shaped transition curve (falloff) centered on each color band. Pixels near the range edge receive proportionally gentler adjustments, ensuring smooth gradients across sky horizons and fabric folds.
A key operational advantage of selective HSL editing is separating skin tones from environmental scenery. Human skin tones across diverse complexions cluster primarily within the orange and warm yellow hue sector (roughly 15° to 45°). By targeting only the blue range (200° to 260°) or green foliage range (90° to 150°), photographers can deepen azure skies or enrich vegetation without creating unnatural orange casts or color shifts on portrait subjects.
Questions about this visual HSL guide
- Why test only three color ranges in these examples?
- To isolate individual adjustments and provide clear evidence. Modifying blue, purple, and yellow independently with all global sliders at zero demonstrates exactly what each channel changes without multi-variable confusion. Adjusting all eight ranges simultaneously would produce an artistic render but zero verifiable benchmark data.
- Can I reproduce these numerical results on my machine?
- Yes. The synthetic source image belongs to the repository, all three output files are directly downloadable, and the CLI commands required to run the automated Playwright test are documented above (npm run guide:hsl).
- Does mean RGB difference indicate whether an edit looks good?
- No. It measures mathematical distance across color channels, not aesthetic quality. A subtle, natural portrait correction produces a low RGB delta, while a harsh color distortion on a small area might also produce a low global delta if few pixels were touched.
- How do HSL color ranges differ from object selection masks?
- HSL adjustments filter by chromatic properties across the entire image, not by spatial boundaries or subject outlines. If a blue car and a blue jacket share identical hue and saturation values, adjusting the blue range alters both elements together.
- How does the editor compute HSL shifts efficiently in the browser?
- Calculations run inside an isolated Web Worker using optimized integer math and direct buffer iteration. Each pixel's RGB coordinates are converted into cylindrical coordinates, scaled by the range sliders, and converted back to RGB without blocking the user interface thread.
Explore the Color & Light Topic Hub
Discover our full suite of tone curves, selective B&W, and lighting calibration tools.