Many editors use “HSL” to mean separate controls for red, orange, yellow, green, and other color ranges. visdraw’s current controls are different: the HSL panel provides a global Hue control, while Saturation and Vibrance are global adjustments elsewhere in the color workspace. None of these controls isolates an individual color channel. When you need to change a sampled color or group of similar colors, use the color replacement tool.
Start with the three global controls
Hue — rotate the whole color wheel
Moves every color in the image around the color wheel together. It is useful for changing the overall palette, but not for recoloring only a sky, garment, or package.
Saturation — change overall color intensity
Moves colors across the image toward or away from gray. It is useful for uniform desaturation, black-and-white output, or a small overall boost, but it does not isolate one object.
Vibrance — emphasize less-saturated colors
Affects subdued colors more than colors that are already intense and reduces its effect around warm skin tones. It is usually a more restrained way to add overall color than saturation.
Which control fits the job?
| Situation | Recommended control | Why |
|---|---|---|
| The palette of the entire image feels wrong | Global Hue | Rotates all colors together for an overall palette shift |
| The image is subdued, but strong colors should not become much stronger | Vibrance | Gives more emphasis to colors that begin less saturated |
| Every color needs to be reduced or removed | Saturation | Changes color intensity across the whole image |
| Only a product or garment needs a new color | Color replacement | Lets you set a source color, target color, and tolerance for similar colors |
| The same source color appears in several places | Use color replacement cautiously | Matching is based on color, not a spatial selection, so other similar areas may change |
A reliable color workflow
- 1
Fix exposure and white balance first
A color cast or poor exposure distorts every later judgment. Establish a sound base with exposure, temperature, and tint before opening the color controls; the method is in the white balance guide.
- 2
Decide whether the problem is global or color-specific
“The whole image is too muted” is a global problem. “Only this red package should be green” is a color-specific problem. Making that distinction first keeps you from repeatedly testing the wrong control.
- 3
Overshoot briefly to find the hue direction
Move global Hue clearly in both directions, observe how the overall palette changes, then return near zero for a small adjustment. A few degrees can be visible across the image, so large moves are best reserved for deliberate effects.
- 4
Try Vibrance before adding Saturation
If the image only needs more energy, start with a small Vibrance increase. Adjust Saturation when all colors need a more uniform change. Pushing both controls too far can flatten detail in already intense areas.
- 5
Compare with the original and save reusable settings
Use the original comparison to check whether the result is genuinely better. If it works, save the hue, saturation, vibrance, white balance, and other filter settings as a personal preset, then adjust exposure for each image.
Five practical starting points
| Goal | Starting adjustment | What to check |
|---|---|---|
| Shift the overall palette slightly | Try global Hue at ±3° to 8° | Skin, brand colors, and neutral areas |
| Give a subdued image more color | Start with Vibrance at +0.05 to +0.15 | Whether intense areas still retain detail |
| Create a restrained, low-saturation look | Start with Saturation around 0.85 to 0.95 | Avoid reducing contrast so far that the image looks flat |
| Create a black-and-white image | Set Saturation to 0, then refine tone and contrast | Whether the subject remains distinct from the background |
| Recolor a product | Set source and target colors in Color Replacement, starting with a narrow tolerance | Edges, shadows, and other areas that share the source color |
What color replacement can and cannot do
The color replacement tool matches pixels by color characteristics. You can set the source and target colors, the tolerance for similar colors, transition softness, and whether to preserve the original lightness. In browsers that support the system color picker, you can sample a source color directly; you can also use the color control or enter a HEX value.
- Start with a narrow tolerance. A broad range can also change backgrounds, skin, or reflections that are close to the sampled color.
- Preserve original lightness when texture matters. This retains more of the source shadows and highlights so the result does not look like a flat fill.
- Use transition softness to manage edges. Too little can create hard boundaries; too much can spread the effect into neighboring colors.
- It is not a spatial mask. If the target object shares its color with another area, tolerance alone cannot guarantee that only the object changes. Use an editor with selections or masks for that case.
Four common mistakes
- Using global Hue for a local problem. It also changes skin, backgrounds, and brand colors. Use color replacement when only one color group should change.
- Moving Hue too far. A small global rotation is visible across the image; large values are usually appropriate only for a stylized effect.
- Pushing Saturation and Vibrance hard at the same time. The combined increase can remove nuance from areas that already have strong color.
- Setting color-replacement tolerance too wide. Start narrow, expand gradually, and check edges plus every other area that shares the sampled color.
Frequently asked questions
Can I adjust HSL online without uploading my photo?
Yes. visdraw performs hue, saturation, vibrance, and color-replacement adjustments locally with browser graphics APIs such as WebGL; editing does not require the selected image to be uploaded to a rendering server.
Can visdraw adjust the blue or orange channel by itself?
Not currently. Hue in the HSL panel is global, and Saturation and Vibrance are global adjustments. Use color replacement for a group of similar colors, but note that it does not provide a spatial selection either.
What is the difference between saturation and vibrance?
Saturation changes color intensity across the whole image. Vibrance gives more weight to colors that begin less saturated and reduces its effect around warm skin tones. For a restrained overall adjustment, try Vibrance first.
How do I change the color of one object?
Use color replacement to set the source and target colors, then begin with a narrow tolerance. If the same source color appears elsewhere, those pixels may also change because the tool matches color rather than a spatial selection.
Can I reuse the same grade across a batch of photos?
Yes. Save hue, saturation, vibrance, white balance, and other filter settings as a personal preset. Apply it to each image, then adjust for differences in exposure and lighting.
Written by
The visdraw team
Product & engineering