World's simplest online similar color shade generator. Just pick a base color, and the tool will create a palette of shades that vary by hue, saturation, lightness, or transparency. You can set the total number of shades, define the step size, and choose the generation mode (Hue, Saturation, Lightness, or Alpha). You can also adjust the palette layout, swatch size, spacing, and label format. Free, quick, and very powerful. Created with love by team Browserling.
World's simplest online similar color shade generator. Just pick a base color, and the tool will create a palette of shades that vary by hue, saturation, lightness, or transparency. You can set the total number of shades, define the step size, and choose the generation mode (Hue, Saturation, Lightness, or Alpha). You can also adjust the palette layout, swatch size, spacing, and label format. Free, quick, and very powerful. Created with love by team Browserling.
This tool generates a palette of similar color shades based on a single selected color. You can define the base color in the options using its English name (e.g., "blue" or "red"), a Hex, or an RGB(A) code, or by selecting it directly from the attached color picker. You can also set the total number of generated shades (the base color is included in this total). Then, choose the shade generation method by which the palette will be formed: the shades can vary by hue, saturation, lightness, or alpha (transparency). In the "Hue Shades" mode, the tool adjusts the hue angle on the HSL color wheel by a fixed step, creating colors that differ in hue while keeping the same saturation and lightness. The hue values cycle from 0° to 360°, providing smooth transitions across the full spectrum. Smaller steps (e.g., 5°, 10°, or 15°) produce similar-looking colors, while larger steps (e.g., 50°, 100°, or 150°) result in more distinct hues. In the "Saturation Shades" mode, the tool adjusts the color's intensity. You can set the saturation step, and the palette will include shades within the 0% – 100% range, where 0% represents gray, desaturated tones and 100% fully saturated colors. In the "Lightness Shades" mode, the tool modifies brightness. It creates a gradient of lighter and darker shades by adjusting lightness from 0% (black) to 100% (white), while keeping hue and saturation unchanged. In the "Alpha Shades" mode, the tool generates shades with varying transparency. You can define the alpha step to create a smooth transition towards either complete transparency or complete opacity (note: alpha = 0 is fully transparent, and alpha = 1 is fully opaque). You can display the resulting palette horizontally or vertically and specify the width and height of each color swatch. The base color defined in the options will be marked in the preview. Additionally, you can customize the canvas background (useful for visualizing semi-transparent shades), add spacing between swatches, and padding around the palette. You can also choose how color values are labeled – using the closest named color, hex, RGB/RGBA, HSL, HSV, LAB, LCH, CMYK, and more. The generated palette is also exported as text in the selected format for easy copying. Png-abulous!
This tool generates a palette of similar color shades based on a single selected color. You can define the base color in the options using its English name (e.g., "blue" or "red"), a Hex, or an RGB(A) code, or by selecting it directly from the attached color picker. You can also set the total number of generated shades (the base color is included in this total). Then, choose the shade generation method by which the palette will be formed: the shades can vary by hue, saturation, lightness, or alpha (transparency). In the "Hue Shades" mode, the tool adjusts the hue angle on the HSL color wheel by a fixed step, creating colors that differ in hue while keeping the same saturation and lightness. The hue values cycle from 0° to 360°, providing smooth transitions across the full spectrum. Smaller steps (e.g., 5°, 10°, or 15°) produce similar-looking colors, while larger steps (e.g., 50°, 100°, or 150°) result in more distinct hues. In the "Saturation Shades" mode, the tool adjusts the color's intensity. You can set the saturation step, and the palette will include shades within the 0% – 100% range, where 0% represents gray, desaturated tones and 100% fully saturated colors. In the "Lightness Shades" mode, the tool modifies brightness. It creates a gradient of lighter and darker shades by adjusting lightness from 0% (black) to 100% (white), while keeping hue and saturation unchanged. In the "Alpha Shades" mode, the tool generates shades with varying transparency. You can define the alpha step to create a smooth transition towards either complete transparency or complete opacity (note: alpha = 0 is fully transparent, and alpha = 1 is fully opaque). You can display the resulting palette horizontally or vertically and specify the width and height of each color swatch. The base color defined in the options will be marked in the preview. Additionally, you can customize the canvas background (useful for visualizing semi-transparent shades), add spacing between swatches, and padding around the palette. You can also choose how color values are labeled – using the closest named color, hex, RGB/RGBA, HSL, HSV, LAB, LCH, CMYK, and more. The generated palette is also exported as text in the selected format for easy copying. Png-abulous!
In this example, we generate a palette of 7 colors based on the orange color. The shades are generated by varying the hue component with a fixed hue step of 20 degrees. This creates a set of analogous colors that are close to each other on the color wheel, moving from lawn-green to indian-red. The palette is displayed vertically, and the color codes are labeled using their closest English name for easy identification.
This example creates a lime shade palette with saturation variations. It starts from a fully saturated "lime" color on the left and gradually reduces the saturation by 10% steps across 11 shades, ending with a completely desaturated gray on the right. The palette is arranged horizontally with a swatch size of 100×500 pixels. It also includes a 2-pixel gap and 2-pixel padding, which visually separates the color swatches from each other and from the canvas edge. The output color codes are displayed in hex format.
In this example, we generate a perfectly balanced lightness palette. We use the base color deepSkyBlue and set the lightness step to 25%. Since the HSL lightness range is 0% to 100%, this step size mathematically allows for exactly 5 shades (0%, 25%, 50%, 75%, 100%) to cover the full spectrum. The deepSkyBlue has L = 50%, placing it exactly in the center of the generated palette, with two darker shades (down to black) and two lighter shades (up to white). The shades are labeled using the HSL format, clearly showing the changing lightness (L) component.
In this example, we focus on the alpha channel. We set the base color to "crimson" (starting with α = 1, or full opacity) and generate 6 shades that progressively decrease in opacity (or increase in transparency) with an alpha step of 0.2. This creates a perfect fade effect, with the final color being completely transparent (α = 0). Since the background is transparent, the shades blend with the page background. We label the colors with RGBA codes, explicitly displaying the decreasing alpha component for each shade.
In this example, we demonstrate generating a very large palette by setting the total shades in the palette to 60. We select the "Hue Shades" mode and specify a hue step of 12 degrees. Since 60 × 12° = 720°, the palette cycles twice through the entire 360° color spectrum, creating a continuous rainbow effect starting from the base color "cyan". The swatches are displayed horizontally with a minimal width (20px) to form very long and thin color bands.
In this example, we generate a series of PeachPuff shades using a small 5% lightness step. Because the base color is already quite bright (around 86% lightness), the tool creates two lighter and five darker variations, forming a balanced palette of eight shades. The colors are displayed vertically with gentle spacing and padding on a white background, and each swatch includes its HSL value to highlight the gradual changes in lightness.
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!
