Wikipedia describes color quantization asĪ process that reduces the number of distinct colors used in an image, usually with the intention that the new image should be as visually similar as possible to the original image. Build the HTML to display the color palette.įirst we create the basic HTML of our page, we need a form input of type file to upload the image and a canvas element because that’s how we gain access to the image’s data.Įnter fullscreen mode Exit fullscreen modeĪfter building the rgb colors array we need to somehow know which colors are the most representative of the image, to obtain this we use color quantization.Create a complementary version of each color.Now that we know what we are dealing here, let’s start by explaining the process: There are several websites that provide this service such as or, if you ever wondered how does it work you are in the correct place, let's find out. We can load any image and extract a color palette and every color is accompanied by its opposed color (complementary).Įxample of a similar technique can be found in Spotify, when you navigate to a song/playlist or album you get a custom color gradient on top that represents the dominant color of the picture, this gradient adds a unique feel to each page and it's actually the reason why I am doing this post. Repository (the entire codebase is commented).If you can’t wait and want to test it yourself, here are the links to the app demo and the repository. Let me begin by showcasing the end result. ![]() ![]() Wasn’t that easy? Thanks to BeFunky’s Replace Color tool, replacing colors in images online has never been easier.Today I am bring you something really interesting that I think is worth sharing. Step 5: Save Your PhotoĪll that’s left to do is to click Save at the top of the screen, then select your desired save location. Once you’re happy with how your replaced colors look, simply click Apply to apply your changes. Adjust the Brush Size accordingly, then paint over those areas with your cursor to remove the transparency. If there are some areas of your photo that you don’t want to replace, click on the Erase tab next to the Adjust tab. Step 4: Use the Erase Tool for More Precise Editing From the Color Picker that appears, you can select a new color, type in a specific color’s HEX code, or even use the eyedropper tool to select a color already present in your photo. To replace the transparent areas with a new color, click the box next to Target Color. If you wish to swap it with a new color, however, keep reading! Step 3: Select Your Target Color If you want to keep the transparent background, simply click on the Apply button to confirm it. You can use the Tolerance slider to increase or decrease the sensitivity of the color you're replacing. When you click on the color you wish to change, you’ll notice that any area with that particular color becomes transparent, since the Target Color defaults to creating a transparent background. In this example, we’re swapping the blue sky for another color, so have selected that shade of blue. Next, click on the box next to Source Color and use the eyedropper tool to select the color from your photo that you wish to change. Step 1: Navigate to the Replace Color toolĬlick on Edit in the menu on the left, then select Replace Color. ![]() Ready to use our amazing color replacement tool? Head to the Photo Editor and upload your photo by selecting it from the Open menu, or simply drag-and-drop the image file into the interface. How to Replace Colors in Your Images With BeFunky
0 Comments
Leave a Reply. |