World's simplest online color steps generator. Just select two colors and define how many steps you want in between, and the tool will calculate a sequence of evenly spaced shades. In the options, you can choose the interpolation method (Perceptual, RGB, LAB, LCH, Linear RGB, or HSL), organize the palette horizontally or vertically, adjust color block size, spacing, and select how the color values should be labeled. Free, quick, and very powerful. Created with love by team Browserling.
World's simplest online color steps generator. Just select two colors and define how many steps you want in between, and the tool will calculate a sequence of evenly spaced shades. In the options, you can choose the interpolation method (Perceptual, RGB, LAB, LCH, Linear RGB, or HSL), organize the palette horizontally or vertically, adjust color block size, spacing, and select how the color values should be labeled. Free, quick, and very powerful. Created with love by team Browserling.

This tool allows you to generate multi-step color transitions between any two selected colors. Instead of producing a smooth, continuous gradient, it creates a discrete gradient made up of a fixed number of visually distinct shades. To create a palette, specify the start and end colors in the options (hex codes, RGB(A) values, or English color names are supported). Then, set the number of steps – this determines how many intermediate shades will be placed between the two chosen colors. For example, if you enter 4, the result will contain 6 colors in total: the start, the end, and four calculated steps in between. The interpolation mode defines the algorithm and color space used to calculate the intermediate steps. Perceptual transition uses models of human vision to create smooth, natural-looking results. RGB and Linear RGB operate directly on the red, green, and blue channels. LAB and LCH are based on perceptual uniformity and are often used in professional color workflows. HSL offers hue-based transitions, which are useful for artistic or thematic palettes. Once the color steps are generated, you can choose how they are displayed. The tool lets you arrange the palette horizontally (left to right) or vertically (top to bottom). You can also customize the width and height of each swatch, showing the steps as tall rectangles, wide strips, or square tiles. In addition, you can set the canvas background color, add spacing between swatches, and apply outer padding around the entire discrete gradient. For easier color identification, each step can be labeled in your preferred format: Nearest Named Color, RGB, RGBA, HSL, HSV, HSI, LAB, LCH, HCL, CMYK, YIQ, YCbCr, XYZ, LUV, OKLab, or YCoCg. A full text list of all generated colors is also available for copying. Png-abulous!
This tool allows you to generate multi-step color transitions between any two selected colors. Instead of producing a smooth, continuous gradient, it creates a discrete gradient made up of a fixed number of visually distinct shades. To create a palette, specify the start and end colors in the options (hex codes, RGB(A) values, or English color names are supported). Then, set the number of steps – this determines how many intermediate shades will be placed between the two chosen colors. For example, if you enter 4, the result will contain 6 colors in total: the start, the end, and four calculated steps in between. The interpolation mode defines the algorithm and color space used to calculate the intermediate steps. Perceptual transition uses models of human vision to create smooth, natural-looking results. RGB and Linear RGB operate directly on the red, green, and blue channels. LAB and LCH are based on perceptual uniformity and are often used in professional color workflows. HSL offers hue-based transitions, which are useful for artistic or thematic palettes. Once the color steps are generated, you can choose how they are displayed. The tool lets you arrange the palette horizontally (left to right) or vertically (top to bottom). You can also customize the width and height of each swatch, showing the steps as tall rectangles, wide strips, or square tiles. In addition, you can set the canvas background color, add spacing between swatches, and apply outer padding around the entire discrete gradient. For easier color identification, each step can be labeled in your preferred format: Nearest Named Color, RGB, RGBA, HSL, HSV, HSI, LAB, LCH, HCL, CMYK, YIQ, YCbCr, XYZ, LUV, OKLab, or YCoCg. A full text list of all generated colors is also available for copying. Png-abulous!
This example generates a stepped color palette that smoothly steps from the pale warmth of LightYellow to the deep coolness of MidnightBlue. We define 4 transition steps, resulting in a total of six visually distinct shades. We apply the Perceptual interpolation method. This technique calculates color steps based on human color perception, ensuring a natural and visually uniform progression from light to dark. The resulting palette is presented vertically using wide swatches (460x100px), with each generated color labeled by its closest named equivalent for easy identification.
In this example, we create a detailed discrete gradient of 13 transition steps between LimeGreen and Crimson (yielding a total of 15 color shades). We use LAB color interpolation, which produces a balanced progression – not overly bright and saturated as in HSL or LCH, and not too dark or muddy as in RGB or perceptual modes. We configure the palette to display horizontally (left-to-right), adding a 4-pixel gap between each color swatch and 4-pixel outer padding. Each color is labeled with its RGB code, making the palette especially useful for developers working with precise color values.
In this example, we create a long vertical sequence of color transitions that begins with vivid OrangeRed and shifts into DodgerBlue. With 50 midpoints defined, the palette contains 52 distinct swatches, forming a detailed, discrete gradient. Since orange and blue are nearly opposite on the color wheel, the resulting palette passes through intermediate steps of purple and magenta, producing a beautiful rainbow-like distribution of hues. The palette is displayed vertically with narrow swatches (500×20 pixels), without gaps, padding, or labels.
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!




