HSL Formula Editor
Edit images with math: type a formula for the hue, the saturation and the lightness of every pixel.
HSL Formula Editor is a free online tool to edit images using math formulas. Instead of changing the red, green and blue values of the pixels, you change their hue (the color, as an angle around the color wheel), their saturation (how intense the color is) and their lightness (from black to white), plus the transparency (alpha).
Many color edits are simple in HSL: h + 120 rotates all the colors, s * 1.5 makes them more vivid, s = 0 turns the image to grayscale, and a condition like abs(h - 100) < 50 ? h - 60 : h changes only the greens. The formulas can also use the original red, green and blue values, the position of the pixel and math functions.
The formulas are evaluated by your graphics card (with WebGL2), so the image updates while you type, even for large photos. Everything runs in your browser: your image is never uploaded to a server. To write formulas for the red, green and blue channels instead, use the RGB Formula Editor.
Drop your image here
You can also paste an image with Ctrl+V.
Examples
Click on any example to apply its formulas to your image (or to the sample image, if you haven't opened one), and edit them.
Original image
The sample image, before applying any formula.
Hue shift
Rotates every color around the color wheel: red becomes green, green becomes blue, blue becomes red.
| H | h + 120 |
| S | s |
| L | l |
| A | a |
Grayscale
Removes all the saturation, keeping the lightness of each pixel.
| H | h |
| S | 0 |
| L | l |
| A | a |
More vivid colors
Multiplies the saturation, so the colors become stronger. Values above 100 are clamped.
| H | h |
| S | s * 1.6 |
| L | l |
| A | a |
Sepia (colorize)
The same hue and saturation for every pixel, keeping only the lightness of the original image.
| H | 35 |
| S | 40 |
| L | l |
| A | a |
Keep only the warm colors
Removes the saturation of every pixel that is not red, orange or yellow, so only the skin, the hair and the lips keep their color.
| H | h |
| S | (h < 50 || h > 330) && s > 15 ? s : 0 |
| L | l |
| A | a |
Green to autumn
Only the greens (hues near 100) are shifted towards orange, which turns the grass and the trees into autumn colors.
| H | abs(h - 100) < 50 ? h - 60 : h |
| S | s |
| L | l |
| A | a |
Invert the lightness
Dark becomes light and light becomes dark, but the hues stay the same, unlike a normal color inversion.
| H | h |
| S | s |
| L | 100 - l |
| A | a |
Posterize
Rounds the hue, the saturation and the lightness, so the image has only a few flat colors.
| H | round(h / 30) * 30 |
| S | round(s / 25) * 25 |
| L | round(l / 20) * 20 |
| A | a |
Pastel
Less saturation and more lightness give soft, washed-out colors.
| H | h |
| S | s * 0.6 |
| L | 55 + l * 0.45 |
| A | a |
Rainbow gradient
The hue shift grows from left to right, going once around the color wheel across the image.
| H | h + x / width * 360 |
| S | max(s, 40) |
| L | l |
| A | a |
Film grain
Adds a small random value to the lightness of every pixel.
| H | h |
| S | s |
| L | l + (random() - 0.5) * 14 |
| A | a |
Fade out
The alpha decreases from top to bottom, so the image fades into transparency.
| H | h |
| S | s |
| L | l |
| A | a * (1 - y / height) |
How to edit an image with HSL formulas?
- Upload your image - Drop a JPG, PNG or WebP image in the box above, or paste an image with Ctrl+V, or click "Try it with a sample image".
- Type the formulas - One for the new hue (H), one for the new saturation (S), one for the new lightness (L) and one for the new alpha (A). The formulas can use the original values of the pixel, like
h + 30ors * 1.2. The image updates while you type, and errors are shown below the formula. - Start from an example (optional) - Click on one of the examples above to load its formulas, and change them.
- Choose what happens to values outside the range - "Clamp" (recommended) keeps the saturation and the lightness between 0 and 100. "Bounce" and "remainder" make bands of colors.
- Download the image - Click "Download image" to save the result as a PNG image, with its transparency.
Documentation
What is HSL?
HSL describes a color with three numbers that are closer to the way people talk about colors than red, green and blue:
- Hue - The color itself, as an angle around the color wheel, from 0 to 360 degrees: 0 is red, 60 yellow, 120 green, 180 cyan, 240 blue and 300 magenta.
- Saturation - How intense the color is, from 0 (gray) to 100 (the purest color).
- Lightness - From 0 (black) to 100 (white). At 50, the color is at its strongest.
Variables
The formulas can use these values of the original pixel:
| Variable | Description |
|---|---|
h | The hue of the original pixel, from 0 to 360 (0 = red, 120 = green, 240 = blue). Gray, black and white pixels have no hue, so h is 0 for them. |
s | The saturation of the original pixel, from 0 to 100. |
l | The lightness of the original pixel, from 0 to 100. |
r, g, b | The red, green and blue values of the original pixel, from 0 to 255. |
a | The alpha (opacity) of the original pixel, from 0 (transparent) to 255 (opaque). |
x, y | The position of the pixel: x from 0 (left) to the width minus 1, and y from 0 (top) to the height minus 1. |
width, height | The size of the image, in pixels. x / width goes from 0 on the left to 1 on the right. |
You can also use the constants PI (3.14159...) and E (2.71828...), with or without "Math.".
Formulas
| Field | Description |
|---|---|
| H (hue) | The new hue of the pixel, in degrees. The hue goes around the color wheel, so 360 is the same as 0, 400 is the same as 40, and -30 is the same as 330. |
| S (saturation) | The new saturation of the pixel. It should give a value between 0 and 100. |
| L (lightness) | The new lightness of the pixel. It should give a value between 0 and 100. |
| A (alpha) | The new alpha of the pixel, from 0 (transparent) to 255 (opaque). Values outside this range are clamped. Use a to keep the original transparency. |
Values outside the range
When the formula of the saturation or the lightness gives a value outside the range from 0 to 100, the value is adjusted:
| Option | Description |
|---|---|
| Clamp | Values lower than 0 become 0, and values greater than 100 become 100. This is the best option for most edits, like s * 1.5. |
| Bounce | The value keeps "bouncing" between 0 and 100: 110 becomes 90, 150 becomes 50, and 210 becomes 10. |
| Remainder | The value starts over from 0 when it passes 100: 110 becomes 10 and 150 becomes 50. Values between 0 and 100 are kept, so white stays white. |
Operators
The formulas use the syntax of Javascript expressions.
| Operator | Description | Example |
|---|---|---|
+ - * / | Addition, subtraction, multiplication and division. Multiplication always needs the *: write 2 * s, not 2s. | s * 1.5 |
** | Power. | 100 * (l / 100) ** 2 |
% | Remainder of the division. | h + (x % 40) * 9 |
< > <= >= == != | Comparisons. They give 1 when true and 0 when false. | (l > 50) * 100 |
condition ? a : b | Gives the first value when the condition is true (not zero) and the second value otherwise. | l > 90 ? 0 : a |
&& || ! | Logical AND, OR and NOT, to combine conditions. | h > 200 && h < 260 ? s : 0 |
& | ^ ~ << >> >>> | Bitwise AND, OR, XOR, NOT and shifts. The values are converted to whole numbers first. | h + (x ^ y) |
Math functions
The functions of the Javascript Math object can be used with or without "Math.": Math.sin(x) and sin(x) are the same. The angles are in radians.
| Function | Description | Example |
|---|---|---|
min(a, b, ...), max(a, b, ...) | The smallest and the largest of the values. | max(s, 40) |
abs(a), sign(a) | Absolute value, and the sign (-1, 0 or 1). abs(h - 120) < 30 is true for the hues near 120. | abs(h - 120) < 30 ? s : 0 |
floor(a), ceil(a), round(a), trunc(a) | Round down, round up, round to the nearest whole number, and remove the decimals. | round(h / 60) * 60 |
sin(a), cos(a), tan(a) | Sine, cosine and tangent. Also asin, acos, atan and atan2(y, x). | h + 30 * sin(y / 15) |
hypot(a, b, ...) | The square root of the sum of the squares: hypot(x - width / 2, y - height / 2) is the distance from the center of the image. | l - hypot(x - width / 2, y - height / 2) / 8 |
sqrt(a), cbrt(a), pow(a, b) | Square root, cube root and power. | 10 * sqrt(s * 10) |
exp(a), log(a), log2(a), log10(a) | Exponential and logarithms. Also expm1(a) and log1p(a). | log1p(l) * 21.6 |
sinh(a), cosh(a), tanh(a), asinh(a), acosh(a), atanh(a) | Hyperbolic functions and their inverses. tanh makes smooth S-curves, to add contrast. | 50 + 50 * tanh((l - 50) / 25) |
random() | A random number between 0 and 1, different for every pixel. The same image always gets the same numbers. | l + (random() - 0.5) * 14 |
Frequently Asked Questions (FAQ)
Why do gray areas turn red when I increase the saturation?Gray, black and white pixels have no hue, so their h is 0, which is red. A formula like s = 100 gives them a strong red color. To change only the pixels that really have a color, add a condition on the saturation, like s > 10 ? 100 : s.
Setting the saturation to 0 keeps the HSL lightness, which is the average of the strongest and the weakest of the red, green and blue values. Our eyes see yellow as much brighter than blue, but both have a lightness of 50 at full saturation. For a grayscale based on the perceived brightness, use the RGB Formula Editor with 0.299 * r + 0.587 * g + 0.114 * b for the three channels, or set the lightness to (0.299 * r + 0.587 * g + 0.114 * b) / 2.55 here.
For the same reason: HSL keeps the lightness, not the perceived brightness. When a blue becomes a yellow with the same lightness, it looks brighter. This is a property of HSL, used by most image editors for their hue and saturation adjustments.
What is the difference with the RGB Formula Editor?The RGB Formula Editor changes the red, green and blue values of every pixel, which is ideal for channel swaps, inversions and color filters. This tool changes the hue, the saturation and the lightness, which is easier for color shifts, saturation changes, colorizing and selecting a range of colors. To shift all the hues by a fixed angle without writing formulas, use Change image hue.
Why do my formulas give slightly different values than a calculator?The formulas are computed by your graphics card, with 32-bit numbers. For colors this makes no visible difference, but very large values (for example sin(x * y * 1000)) lose precision.
The size of the image is limited by your graphics card, usually to 8192 or 16384 pixels on each side. Make it smaller with Resize image first.
What is WebGL2?WebGL2 is the technology that lets websites use your graphics card. All modern browsers support it. If the image doesn't appear, check that hardware acceleration is enabled in the settings of your browser.
Is my image uploaded to a server?No. Your image is read and edited by your own browser, and it never leaves your computer.
Related tools
