Our Network


Coming Soon


Coming Later

WebP to Hex Codes Converter

World's Simplest WebP Tool

This free online tool lets you convert the pixels in a WebP image to a sequence of hex codes. Just load your WebP image in the input editor, and you'll instantly get a list of hex codes (one per pixel) in the output editor. In the settings, you can choose to include the alpha channel values, change the hex code separator, and wrap each hex code in single or double quotes. Created by team Browserling.

WebP to Hex Codes Converter

World's Simplest WebP Tool

This free online tool lets you convert the pixels in a WebP image to a sequence of hex codes. Just load your WebP image in the input editor, and you'll instantly get a list of hex codes (one per pixel) in the output editor. In the settings, you can choose to include the alpha channel values, change the hex code separator, and wrap each hex code in single or double quotes. Created by team Browserling.

᠎᠎᠎          Tool Options

Hex Code Style

Print hex codes with the
transparency information.
Format: #RRGGBBAA.
Add a '#' symbol
before each hex code.
Convert the letters in hex
codes to uppercase.
Example: #ABCDEF.

Hex Sequence Format

Choose a character to
separate the hex codes.
Enclose each hex code in
quotes (choose type below).

Track Image Width

Insert line breaks after each
pixel row to preserve WebP
width.
For example, for a WebP of
size of 600-by-400 pixels,
there will be 400 lines with
600 hex codes on each line.

What Is a WebP to Hex Codes Converter?

With this online tool, you can convert your WebP images into a set of hexadecimal codes. The program precisely determines the color of each pixel and generates its hexadecimal value. For WebP images that are fully opaque (without alpha channel), you can calculate three-component hexadecimal color codes with the format "#rrggbb". For example, yellow will be converted to "#ffff00", orange will be converted to "#ffa500", red will be converted to "#ff0000", and so on. If your WebP contains transparency, you can generate four-component hexadecimal color codes where the last two values represent the pixel's transparency level and contain the alpha channel value. If you enable the alpha channel checkbox in the options, the resulting hex code sequence will look like this: "#ffff0000, #ffa50088, #ff0000ff, …". The hash symbol (#) before each hex code is optional and can be added or removed in the options. You can also choose between printing uppercase and lowercase hex codes. Additionally, you can select a character to separate the hex codes. For example, you can print them as a comma-separated list or a semicolon-separated list. If necessary, you can also enclose each hex code in single or double quotes to make it easy to import them into a programming language or a scientific application. You can also add line breaks after each pixel row to preserve the original WebP width. The final list of hex codes can be easily converted back into a WebP image via our Convert Hex to WebP tool. Webp-abulous!

What Is a WebP to Hex Codes Converter?

With this online tool, you can convert your WebP images into a set of hexadecimal codes. The program precisely determines the color of each pixel and generates its hexadecimal value. For WebP images that are fully opaque (without alpha channel), you can calculate three-component hexadecimal color codes with the format "#rrggbb". For example, yellow will be converted to "#ffff00", orange will be converted to "#ffa500", red will be converted to "#ff0000", and so on. If your WebP contains transparency, you can generate four-component hexadecimal color codes where the last two values represent the pixel's transparency level and contain the alpha channel value. If you enable the alpha channel checkbox in the options, the resulting hex code sequence will look like this: "#ffff0000, #ffa50088, #ff0000ff, …". The hash symbol (#) before each hex code is optional and can be added or removed in the options. You can also choose between printing uppercase and lowercase hex codes. Additionally, you can select a character to separate the hex codes. For example, you can print them as a comma-separated list or a semicolon-separated list. If necessary, you can also enclose each hex code in single or double quotes to make it easy to import them into a programming language or a scientific application. You can also add line breaks after each pixel row to preserve the original WebP width. The final list of hex codes can be easily converted back into a WebP image via our Convert Hex to WebP tool. Webp-abulous!


WebP to Hex Codes Converter Examples

Click to try!
click me

Convert WebP to Hex Sequence

In this example, we process a WebP image of a chessboard and pieces, converting it into a textual hex code representation. Since the WebP does not contain transparency (all pixels are opaque), we use the standard hex color code format #rrggbb, which excludes the alpha channel. For the conversion, we set the following options – display hex codes with the hash symbol, use lowercase letters for hex codes, and separate hex codes by commas. (Source: Pexels.)

#f6a941, #f6a941, #f6a941, #f6a941, #f6a944, #f6a944, #f6a944, #f6a944, #f6a946, #f6a946, #f6a944, #f6a944, #f6a946, #f6a946, #f6a944, #f6a944, #f6a944, #f6a944, #f6a941, #f6a941, #f6a941, #f6a941, #f6a941, #f6a941, #f7aa45, #f7aa45, #f7aa47, #f7aa47, #f7aa47, #f7aa47, #f7aa47, #f7aa47, #f7aa47, #f7aa47, #f7aa47, #f7aa47, #f7aa47, #f7aa47, #f7aa45, #f7aa45, #f7ab43, #f7ab43, #f7ab41, #f7ab41, #f7ab43, #f7ab43, #f7ab43, #f7ab43, #f7ab43, #f7ab43, [...]
Required options
These options will be used automatically if you select this example.
Print hex codes with the
transparency information.
Format: #RRGGBBAA.
Add a '#' symbol
before each hex code.
Convert the letters in hex
codes to uppercase.
Example: #ABCDEF.
Choose a character to
separate the hex codes.
Enclose each hex code in
quotes (choose type below).
Insert line breaks after each
pixel row to preserve WebP
width.
click me

Generate Hex Representation of Sony Logo

In this example, we print a list of hexadecimal values for each pixel of the Sony logo, which is given in the WebP format. As the letters in the company's logo are placed on a transparent background, it's important to use the four-channel hex codes that include the transparency information. Therefore, we enable the alpha channel option and choose our preferred format for formatting the hex codes: use uppercase hex symbols, prepend the hash symbol, and separate hex codes by spaces. (Source: Wikipedia.)

#00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #00000000 #1C1C1C09 #0C0C0C28 #0E0E0E45 #0D0D0D62 #07070780 #06060698 #060606AA #060606BD #060606CE #060606E0 #060606EE [...]
Required options
These options will be used automatically if you select this example.
Print hex codes with the
transparency information.
Format: #RRGGBBAA.
Add a '#' symbol
before each hex code.
Convert the letters in hex
codes to uppercase.
Example: #ABCDEF.
Choose a character to
separate the hex codes.
Enclose each hex code in
quotes (choose type below).
Insert line breaks after each
pixel row to preserve WebP
width.
click me

Add Line Breaks to Hex Codes

In this example, we convert a WebP photo of a tabby cat into hexadecimal color codes and, additionally, preserve the original WebP width and height information. This is done by splitting the sequence of hex codes into separate lines with the number of hex codes per line equal to the width of the WebP and the number of lines equal to the height of the WebP. This makes it easy to determine the dimensions of the WebP by simply opening the hex file in the text editor. We also choose to enclose the hex codes in double quotes, remove the hash symbol, and convert the RGB values to uppercase. (Source: Pexels.)

"D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D3D8D6"; "D3D8D6"; "D3D8D6"; "D3D8D6"; "D5D7D6"; "D5D7D6"; "D5D7D6"; "D5D7D6"; "D5D7D6"; "D5D7D6"; "D5D7D6"; "D5D7D6"; "D3D8D6"; "D3D8D6"; "D3D8D6"; "D3D8D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D1D9D6"; "D3DAD7"; "D3DAD7"; "D3DAD7"; "D3DAD7"; "D4D9D7"; "D4D9D7"; "D4D9D7"; "D4D9D7"; "D6D8D7"; "D6D8D7"; "D4D9D7"; "D4D9D7"; "D6D8D7"; "D6D8D7"; "D4D9D7"; "D4D9D7"; "D4D9D7"; "D4D9D7"; "D3DAD7"; "D3DAD7"; "D3DAD7"; "D3DAD7"; "D3DAD7"; [...]
Required options
These options will be used automatically if you select this example.
Print hex codes with the
transparency information.
Format: #RRGGBBAA.
Add a '#' symbol
before each hex code.
Convert the letters in hex
codes to uppercase.
Example: #ABCDEF.
Choose a character to
separate the hex codes.
Enclose each hex code in
quotes (choose type below).
Insert line breaks after each
pixel row to preserve WebP
width.

All WebP Tools

Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!
Quickly convert a non-transparent WebP to a transparent WebP.
Quickly fill transparent areas in a WebP image with a specific color.
Quickly change one color to another in a WebP image.
Quickly make a part of a WebP image semi-transparent.
Quickly add a background to a transparent WebP image.
Quickly remove the background from a WebP image.
Quickly remove the green or blue screen from a WebP image.
Quickly add a border around a WebP image.
Quickly remove a border surrounding a WebP image.
Quickly cut out a rectangular or oval area from a WebP image.
Quickly pixelate an area of a WebP image.
Quickly blur an area of a WebP image.
Quickly sharpen an area of a WebP image.
Quickly change the width and height of a WebP image.
Quickly interactively rotate a WebP image by any angle.
Quickly create multiple copies of the same WebP image.
Quickly remove a specific color from a WebP image.
Quickly convert a full-color WebP image to a grayscale format.
Quickly convert a colorful WebP to a black and white WebP.
Quickly invert colors in an area of a WebP image.
Quickly decrease the color count in a WebP image.
Quickly increase or decrease the quality of a WebP image.
Quickly optimize the file size and quality of a WebP image.
Quickly compress a WebP image and make it smaller in size.
Quickly convert printed text into a WebP image.
Quickly add a text label to a WebP image.
Quickly remove transparency and translucency from a WebP image.
Quickly visualize the WebP transparency via an alpha mask.
Quickly extract the alpha channel from a WebP image.
Quickly fill the alpha channel in a WebP image.
Quickly replace the alpha channel in a WebP image.
Quickly remove the alpha channel from a WebP image.
Quickly add artifacts and distortions to a WebP image.
Quickly find the size of a WebP image in bytes and kilobytes.
Quickly check the width and height of a WebP image.
Quickly generate a blank WebP image of any size and color.
Quickly generate a random WebP image with random colors.
Quickly find the dominant colors of a WebP image.
Quickly find the color of a single pixel in a WebP image.
Quickly extract objects based on their color from a WebP image.
Quickly round the corners of a WebP image.
Quickly convert a horizontal WebP image to a vertical WebP image.
Quickly convert a vertical WebP image to a horizontal WebP image.
Quickly flip a WebP image horizontally.
Quickly flip a WebP image vertically.
Quickly convert a PNG image to a WebP image.
Quickly convert a WebP image to a PNG image.
Quickly convert a JPG image to a WebP image.
Quickly convert a WebP image to a JPG image.
Quickly convert a GIF image to a WebP image.
Quickly convert a WebP image to a GIF image.
Quickly convert a WebP image into a hex code sequence.
Quickly convert a hex sequence into a WebP image.
Quickly convert a WebP image into a base64-encoded string.
Quickly convert a base64-encoded string into a WebP image.

Coming Soon

These WebP tools are on the way!
WebP Editor

Edit WebP images in your browser.

Convert WebP to APNG

Convert a WebP animation to an APNG animation.

Convert APNG to WebP

Convert an APNG animation to a WebP animation.

Convert WebP to GIF

Convert a WebP animation to a GIF animation.

Convert GIF to WebP

Convert a GIF animation to a WebP animation.

Extract WebP Frames

Extract all frames from a WebP animation.

Convert WebP to MP4

Convert a WebP animation to an MP4 video.

Convert MP4 to WebP

Convert an MP4 video to a WebP animation.

Convert WebP to WebM

Convert a WebP animation to a WebM video.

Convert WebM to WebP

Convert a WebM video to a WebP animation.

Compare WebP Images

Find the difference between two or more WebP images.

Compress WebP

Reduce the file size of a WebP image.

View WebP Metadata

View the metadata information of a WebP image.

Remove WebP Metadata

Remove all metadata information from a WebP image.

Edit WebP Metadata

Edit the metadata information of a WebP image.

Play WebP

Play WebP animations frame by frame.

Extract WebP Frames

Extract one or more frames from a WebP animation.

Convert Sprite Sheet to WebP

Create a WebP animation from a sprite sheet.

Convert WebP to Sprite Sheet

Create a sprite sheet from a WebP animation.

WebP Viewer

View WebP images and in your browser.


Subscribe!

Subscribe to our updates. We'll let you know when we release new tools, features, and organize online workshops.

Enter your email here


Feedback. We'd love to hear from you! 👋

Created with love by

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 WebP editing tools. Our tools have the simplest user interface that doesn't require advanced computer skills and they are used by millions of people every month. Our WebP tools are actually powered by our web developer tools that we created over the last couple of years. Check them out!

49K
@browserling

Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!