World's simplest online color blender. Just pick two colors and the tool will generate a gradient with any number of intermediate shades between them. You can set the number of midpoints in the options and select the mixing method (Perceptual, RGB, LAB, LCH, Linear RGB, or HSL). You can also adjust the palette layout to be horizontal or vertical, customize swatch size and spacing, and choose how color labels are displayed. Free, quick, and very powerful. Created with love by team Browserling.
World's simplest online color blender. Just pick two colors and the tool will generate a gradient with any number of intermediate shades between them. You can set the number of midpoints in the options and select the mixing method (Perceptual, RGB, LAB, LCH, Linear RGB, or HSL). You can also adjust the palette layout to be horizontal or vertical, customize swatch size and spacing, and choose how color labels are displayed. Free, quick, and very powerful. Created with love by team Browserling.
This tool allows you to blend two colors and create a smooth transition between them using a customizable number of intermediate shades. You can specify the colors to be mixed within the option by providing the color's name (in English), a hexadecimal code, an RGB(A) value, or simply by selecting them from the attached color palettes. After selecting the two colors, you can specify the number of intermediate shades (known as midpoints) between them. The tool calculates the transitional colors based on the chosen mixing method. "Perceptual Blend" utilizes a function to create a palette optimized for human eye perception, resulting in natural transitions. "RGB Blend" creates a gradient by a simple linear averaging of the numerical values of the red, green, and blue components. "LAB Blend" interpolates colors in the LAB color space, creating smooth changes in lightness and color. "LCH Blend" mixes colors in the cylindrical LCH space, which usually avoids "muddy" intermediate shades. "Linear RGB Blend" performs mixing in the linear RGB space, which is physically more accurate. "HSL Blend" interpolates colors in the HSL space, moving along the shortest path on the hue circle. The blended palette is displayed on the screen as a sequence of swatches. In a horizontal arrangement, the first color appears on the left, the second on the right, and the midpoints in between. In a vertical arrangement, the first color is at the top, the second at the bottom, and the intermediate shades in the middle. You can adjust the size of each swatch, add spacing between them, set a background color for the canvas, or add padding around the palette. Each color in the blend can be labeled using various formats, such as Hexadecimal, RGB, HSL, or even advanced models like LAB, LCH, CMYK, and many others. After configuration, the entire palette displayed on the screen can be downloaded. Png-abulous!
This tool allows you to blend two colors and create a smooth transition between them using a customizable number of intermediate shades. You can specify the colors to be mixed within the option by providing the color's name (in English), a hexadecimal code, an RGB(A) value, or simply by selecting them from the attached color palettes. After selecting the two colors, you can specify the number of intermediate shades (known as midpoints) between them. The tool calculates the transitional colors based on the chosen mixing method. "Perceptual Blend" utilizes a function to create a palette optimized for human eye perception, resulting in natural transitions. "RGB Blend" creates a gradient by a simple linear averaging of the numerical values of the red, green, and blue components. "LAB Blend" interpolates colors in the LAB color space, creating smooth changes in lightness and color. "LCH Blend" mixes colors in the cylindrical LCH space, which usually avoids "muddy" intermediate shades. "Linear RGB Blend" performs mixing in the linear RGB space, which is physically more accurate. "HSL Blend" interpolates colors in the HSL space, moving along the shortest path on the hue circle. The blended palette is displayed on the screen as a sequence of swatches. In a horizontal arrangement, the first color appears on the left, the second on the right, and the midpoints in between. In a vertical arrangement, the first color is at the top, the second at the bottom, and the intermediate shades in the middle. You can adjust the size of each swatch, add spacing between them, set a background color for the canvas, or add padding around the palette. Each color in the blend can be labeled using various formats, such as Hexadecimal, RGB, HSL, or even advanced models like LAB, LCH, CMYK, and many others. After configuration, the entire palette displayed on the screen can be downloaded. Png-abulous!
In this example, we blend Yellow and Magenta using the Perceptual mixing method. We set three midpoints and obtain a palette of five colors (including the two chosen ones): Yellow, Orange, Coral, LightCoral, and Fuchsia (which is equivalent to Magenta). The Perceptual method focuses on producing the most natural transitions, similar to how pigments mix in the real world, making the entire palette predictable.
In this example, we apply RGB blending between aquamarine and navy. We generate 50 midpoints, resulting in an almost perfectly smooth gradient between the two colors. Each shade is displayed as a 10×400 pixel swatch, arranged side by side to create a horizontal transition from the aquamarine on the left to the navy on the right.
In this example, we mix lawngreen and blue in the LAB color space with 8 midpoints. The "LAB Blend" interpolates colors in the LAB color space, which is known for creating smooth, perceptually uniform changes in lightness and color. The colors are arranged vertically at 500×100 pixels and labeled with their hex values.
In this example, we blend "royalblue" and "darkorange" using the LCH blend method. This blend method mixes colors in the cylindrical LCH space, which is excellent for vibrant gradients because it typically avoids muddy intermediate shades. We specify 6 midpoints and generate a horizontal palette consisting of 6 square swatches (150x150 pixels) with a 10-pixel gap between them and 10 pixels of padding around the whole palette.
In this example, we mix "pink" and "black" using Linear RGB interpolation, which more accurately simulates the physical mixing of light than standard RGB. Unlike basic RGB averaging, which often results in tones that appear too dark or muddy near the midpoint, Linear RGB provides smoother transitions and better perceived luminosity. We generate ten intermediate shades between pink and black and arrange them vertically in blocks of 600×80 pixels. We also add a small gap between the colors and padding around the entire palette, displayed against a white background.
In this example, we create a horizontal gradient between "lime" and "purple" using HSL blending. This method calculates the blend by taking the shortest path on the hue circle. Thus, it passes through a specific range of secondary colors because of the large difference in hue between the two endpoints. Since both "lime" and "purple" start with maximum Saturation (S), all intermediate colors also maintain high saturation. We display the colors horizontally and label each one with its HSL code value. This clearly shows the change in the Hue (H) component from 120° to 300° and the change in the Lightness (L) component from 50% to 25%.
In this example, we blend an opaque color (blue) with a completely transparent color using perceptual blending. We generate four midpoints (intermediate shades) to create a smooth fade. The first color, as specified in the options, has full opacity (alpha channel value of 1). The generated colors then show a progressive reduction in opacity: one color has an alpha of 0.8 (20% transparent), the next has an alpha of 0.6 (40% transparent), the third has an alpha of 0.4 (60% transparent), the fourth has an alpha of 0.2 (80% transparent), and the last color (also specified in the options) is fully transparent. This process yields a palette with a smooth, gradual fade where the color slowly disappears until it becomes completely invisible.
Edit a PNG in your browser.
Compare two or more PNG images.
Convert a PNG image to an AV1 image (AVIF).
Convert an AV1 image (AVIF) to a PNG image.
Convert a PNG image to a High Efficiency Image File (HEIF).
Convert a Hide Efficiency Image File (HEIF) to a PNG image.
Convert a PNG image to an ICO icon.
Convert a PNG image to a TIFF image.
Convert a TIFF image to a PNG image.
Convert a PNG image to a PIK image.
Convert a PIK image to a PNG image.
Convert a PNG image to a PPM image.
Convert a PPM image to a PNG image.
Convert a PNG image to a BPG image.
Convert a BPG image to a PNG image.
Convert a PNG image to a FLIF image.
Convert a FLIF image to a PNG image.
Convert a PNG image to a Paint.net file.
Convert a Paint.net file to a PNG image.
Convert a PNG image to a Photoshop file.
Convert a Photoshop file to a PNG image.
Convert a PNG image to an SVG image.
Convert a PNG image to an PDF document.
Convert a PDF document to a PNG image (or multiple images).
Convert a PNG image to an EPS file.
Convert an EPS file to a PNG image (or multiple images).
Convert a PNG image to a JFIF image.
Convert a JFIF image to a PNG image.
Convert a PNG image to raw RGB values.
Convert RGB values to a PNG image.
Convert a PNG image to raw BGR values.
Convert BGR values to a PNG image.
Convert a PNG image to raw RGBA values.
Convert RGBA values to a PNG image.
Convert a PNG image to raw BGRA values.
Convert BGRA values to a PNG image.
Convert multiple PNGs to a GIF animation.
Convert an APNG animation to a GIF image.
Convert a GIF animation to an APNG image.
Convert an APNG image to a Webp image.
Convert a Webp image to an APNG image.
Convert an APNG image to an MP4 video.
Convert an MP4 video to an APNG image.
Convert an APNG image to an AVI video.
Convert an AVI video to an APNG image.
Convert an APNG image to a WMV video.
Convert an WMV video to an APNG image.
Extract all frames from an APNG image.
Play a PNG animation (APNG) frame by frame.
Change the playback speed of an animated PNG (APNG).
Change how many times an animated PNG loops.
Reverse the order of frames in an animated PNG (APNG).
Created animated PNGs (APNGs) from input images.
Check if the given PNG file is an animated PNG file (APNG).
Create a sprite sheet from all animated PNG (APNG) frames.
Create an animated PNG (APNG) from a sprite sheet.
Create Excel art from a PNG image.
Randomly distort data in a PNG file to make a glitched PNG.
Find all grayscale pixels in a PNG (grayscale mask).
Find all color pixels in a PNG (color mask).
Invert the alpha channel values in a PNG.
Break a PNG image into multiple pieces.
Generate a slideshow animation from multiple PNGs.
Generate a mosaic wall from multiple PNGs.
Convert a PNG into a hexagonal grid of pixels.
Convert a PNG into a triangular grid of pixels.
Create a Voronoi diagram from a PNG image.
Darken PNG corners compared to its center.
Create multiple reflections of a PNG.
Apply a Bayer filter on a PNG.
Make a PNG look like it was taken via night vision goggles.
Make a PNG look like it's spherical.
Run a PNG through the Mobius Transform.
Convert between RGB, CMYK, HSV, and HSL color spaces.
Convert between 8-bit, 16-bit, 24-bit, and 32-bit PNG depths.
Remove dithering from a PNG image.
Convert a PNG to an ASCII art image.
Convert ASCII art to a PNG image.
Convert a PNG to an ANSI art image.
Convert ANSI art to a PNG image.
Convert a PNG to a Braille art image.
Convert Braille art to a PNG image.
Create a PNG image from the given bytes.
Convert a PNG image to bytes.
Increase the quality of a PNG image.
Extract a 2d slice from a PNG.
Create a PNG that contains all possible RGB colors.
Find all textual information in a PNG image and extract it.
Given any 2D PNG, add 3rd dimension to it.
Quickly erase text (labels, captions) from a PNG.
Quickly delete a watermark from a PNG.
Salvage a PNG that has bad bytes in it and doesn't open.
Conceal a secret message in a PNG image.
Update meta data of a PNG file.
Delete meta data from a PNG picture.
Check if the given file is a valid PNG without errors.
Subscribe to our updates. We'll let you know when we release new tools, features, and organize online workshops.
Enter your email here
We're Browserling — a friendly and fun cross-browser testing company powered by alien technology. At Browserling we love to make people's lives easier, so we created this collection of online PNG tools. We created the simplest possible user interface for our tools and they are now used by millions of users every month. Behind the scenes, our online PNG tools are actually powered by our web developer tools that we created over the last couple of years. Check them out!
