Us previous tutorialWe taught our request to work with references and palettes. Now is the time to add more ways to specify color and visual effects.
We introduce some new tools that allow for more flexible manipulation. In addition, we explore the new color model HSV, which works differently in colors than RGB and Lab. This model facilitates the manipulation of features such as tone, saturation and lightness, which makes it particularly useful for coloring colors. This upgrade opens up new creative opportunities and experimentation.
The project code is available at This linkTo.
We have already seen how a restrictive palette can change the look of the image.
For more flexible filter and image processing, we add the option to check the number of colors separated from the image. You can now determine exactly how many colors are highlighted in the picture, allowing for better control of visual effects. This feature is particularly useful for creating filters with palettes, as changing the number of colors applies to many design tasks.
The application now has a slider that allows you to choose the number of colors separated from the image (between 10 and 20). This customization affects the results of the filter and helps to achieve better visual effects.
setColorCount(Number(e.target.value))}
style={{ width: "100%" }}
/>
Let's test so Sasaki with a stunning photo Void tokioTo. It has a wide selection of colors and shades, making it ideal for us.
Below you can compare how the image looks like a palette of different sizes.
The slider of the filter intensity
To make the filtration process more flexible, we add the slider palette to control the intensity of the application. This slider allows you to adjust the balance between the original image and the palette.
Simply select the intensity of the desired filter and click the “Apply Filter” button.
setIntensity(Number(e.target.value))}
style={{ width: "100%" }}
/>
How does it work?
When the intensity is set to 100%, the image is completely changed by the colors of the selected palette. The lower the intensity value, the less the palette affects the image, allowing you to maintain more original colors.
HSV color model
HSV (tone, saturation, value) is one of the most popular color models that are often used to represent color in its shade, saturation and brightness.
- Hue (color): It denotes primary color (such as red, green, blue, etc.), measured in degrees between 0 and 360.
- Saturation: It shows the intensity of the color. The saturation is affected by a colored gray: 100% is a completely saturated color and 0% gray.
- Value (brightness): It denotes how bright color is. The value 0% gives black, 100% is the brightest version of the color.
Differences from RGB and laboratory:
-
Unlike the RGB, where the colors are combined based on the red, green and blue intensity, HSV is based on the visual perception of HSV. This makes it more intuitive for tasks such as color correction and design work.
-
Compared to a laboratory that uses a more complex mathematical model to specify colors in different lighting conditions, HSV is more intuitive and user -friendly.
Trying code to convert the rgb into HSV:
function rgbToHsv(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h = 0, s = 0, v = max;
if (delta !== 0) {
s = delta / max;
if (r === max) {
h = (g - b) / delta;
} else if (g === max) {
h = 2 + (b - r) / delta;
} else {
h = 4 + (r - g) / delta;
}
h *= 60;
if (h < 0) h += 360;
}
return [h, s * 100, v * 100];
}
Below are examples of pictures in the same palette, but in different color models.
Contrast liger
Contrast refers to the difference between the lightest and darkest points of the image. Controlling the contrast allows you to either improve or reduce this difference. The larger the contrast, the more light and dark areas.
How does the adjustment of the contrast work?
As the contrast is increased, the dark areas of the image become even darker and the light areas become even lighter. This effect can make the image more vivid and sharper, increasing its visual effect.
Example of Contrast Change Code:
const applyContrast = (r, g, b, contrast) => {
const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
r = contrastFactor * (r - 128) + 128;
g = contrastFactor * (g - 128) + 128;
b = contrastFactor * (b - 128) + 128;
return [r, g, b];
};
A description of the algorithm:
The contrast algorithm uses a factor that depends on the current value of the contrast medium. This factor is applied to any color component (red, green and blue), adjusting their brightness based on contrast levels.
Noise slider
For those who want to have a little fun, we have added a noise slider. Adding noise to the image helps to create a vintage photo effect or make the image livelier. This effect is used to hide deficiencies or to add artistic touch to the image.
How does the noise work?
The noise slider allows you to check the amount of random variations used for each pixel color. The higher the value of the noise, the higher the number of random changes applied to the image.
When noise is added to the image, small random variations are introduced to the values of each pixel, resulting in a granular effect. This effect may be subtle or pronounced, depending on the amount of noise applied. It can help the image a more textured look or simulate the appearance of an old, low -resolution photo.
const applyNoise = (r, g, b, noise) => {
r += Math.random() * noise - noise / 2;
g += Math.random() * noise - noise / 2;
b += Math.random() * noise - noise / 2;
return [r, g, b];
};
A description of the algorithm:
Each pixel is added to a random value within the specified range. This creates the effect of random color changes, giving the image a noisy or granular appearance. In our case, we simply simulate distortions that have no connection to real film or noise. Previous digital filters (for example, those used on early mobile phones like Sony Ericsson W810) worked on the same principle.
With the control of noise, users can test different creative effects or simulate different intensity levels in the photo.
And, of course, we have added the resetting button to delete all the filters and return to the original image.
Throughout our articles, we have studied the basics of color improvement and have studied a variety of tools and techniques for its implementation. We have studied how to separate and adjust the color palettes, the effects of contrast, saturation and noise, and how to work with different color models – RGB, LAB and HSV.
Color correction is a crucial aspect of image processing, which allows us to improve visual perception, highlight certain elements and achieve harmony between colors. We have demonstrated how adjusting the number of palette colors or changing the contrast settings can completely change the image by making it more expressive and dynamic.
It is important to note that adjusting the color and contrast not only affects the appearance of the image, but also affects how it is perceived. This changes color correction not only in the technical process but also the art form.
