5 free tools for images, colors and QR codes

Some small jobs come back every week.

Compressing a photo before it goes on the website. Getting a white version of the logo for a dark background. Creating the QR code for the menu. Finding the exact code of the brand color.

They are two-minute tasks, yet they often end up on sites full of ads, sites that ask you to sign up, or sites that upload your files to a server you know nothing about.

Hash42 Tools is Hash42 Labs' collection of free tools, at tools.hash42.xyz. This guide covers the 5 most used ones and, for each, what it does and how to use it well.

01. QR Generator

QR Generator creates QR codes for several kinds of content:

• a link to a website;
• plain text;
• a WhatsApp chat, an email address or a phone number;
• a location on Google Maps;
• access to a Wi-Fi network;
• a business card (vCard).

You can pick the style and colors, add a logo in the middle, or start from a ready-made preset: Hash42, Minimal, Premium, Restaurant, Business and Cyberpunk.

Before you print a QR code

QR codes often end up on paper: menus, flyers, business cards, shop windows. Once printed, they cannot be fixed, so three things are worth checking.

Contrast. The phone's reader has to tell the modules apart from the background. Dark modules on a light background are still the safest choice, even when you use brand colors.

The logo. A logo in the middle covers part of the code. The QR stays readable thanks to error correction, which has four levels: L, M, Q and H. Level M, the most common, can recover about 15% of the data; level H about 30%. A large logo needs a high level.

A real-world test. Before printing, scan the QR with at least two different phones, at its final size and in the lighting of the place where it will be displayed.

Content
  ↓
Style and colors with good contrast
  ↓
Logo, if needed
  ↓
Test with several phones
  ↓
Print

Static or dynamic

A static QR code contains the link or text itself: it works as long as the destination exists, with no expiry date. A dynamic one points to an intermediate service that then redirects: if that service shuts down or the subscription ends, the printed QR stops working.

Many free generators create dynamic QR codes that stop working after a trial period. Before printing hundreds of menus, always check which kind you are creating.

QR Generator creates QR codes directly in the browser, with no service in between: they are static, contain the content itself and never expire.

02. Image Optimizer

Image Optimizer compresses, converts and resizes images in JPG, PNG, WebP and AVIF. Everything happens in the browser, with no login and no uploads to external servers.

Which format to choose

• Photos: WebP or AVIF. They compress better than JPEG at the same quality and are supported by modern browsers.
• Logos and graphics with transparency: PNG or WebP. JPEG does not support transparency: a logo saved as JPEG will always come with a background rectangle.
• Dimensions: resize the image to the width it will be displayed at. A 4,000 pixel wide photo in an 800 pixel slot weighs far more than it needs to.

Photo from your phone
  ↓
Resize to the real display width
  ↓
Convert to WebP or AVIF
  ↓
Check the quality by eye
  ↓
Upload to the site

If you want to know why image weight matters so much, I covered it in the guide on how to make your website faster.

03. Batch Optimizer

Batch Optimizer does the same job on dozens of images at once, again in JPG, PNG, WebP and AVIF and again in the browser, with no login and no uploads.

It is the right tool when you need to prepare:

• a photo gallery for a website;
• dish photos for a digital menu;
• product images for a catalog;
• a photo archive before uploading it to a CMS.

Two tips

Use the same settings for every image in a gallery: consistent quality and dimensions give a tidier result and a predictable page weight.

Always keep the originals in a separate folder. A compressed photo can be compressed again, but lost quality never comes back.

04. WhiteLogo

WhiteLogo turns a PNG or WebP logo into its white version. It also works on several files at once and exports to PNG or WebP.

You can choose between white, soft white, warm white or a custom color, and between two modes: one turns every visible pixel white, the other keeps the brightness differences of the original logo. The preview shows the result on a dark, light or checkered background, so you can see right away how it will look where you plan to use it.

Processing is local: no file is sent to a server.

When you need a white logo

• in a website's dark footer;
• on top of a page's main photo;
• in a video, a slide or a social post;
• on printed material with a solid background.

Watch the format

A white logo needs a transparent background, otherwise it turns into a white rectangle. That is why it has to be saved as PNG or WebP, never as JPEG. If you also have an SVG version of the logo for your website, that is still the best choice: it is vector based and stays sharp at any size.

05. Color Picker

Color Picker helps you choose, convert and save colors, palettes and gradients. It shows the same color in HEX, RGB and HSL, can pull colors from an image, and includes ready-made palettes and a contrast check.

HEX, RGB and HSL

They are three different ways of writing the same color:

• HEX (#F97316) is the most common format in CSS and design tools.
• RGB (249, 115, 22) tells you how much red, green and blue the color contains.
• HSL (25, 95%, 53%) describes hue, saturation and lightness.

HSL is the handiest when you need variations of the same color: for a darker version, just lower the lightness.

:root {
  --brand: #f97316;
  --brand-hover: hsl(25 95% 45%);
}

Contrast

A color can be perfect for the brand and unreadable as a text color. The WCAG guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Take the orange #F97316, the tool's default color: the contrast check shows 2.8:1 on white and 7.5:1 on black. It works as a button background with dark text, not as a text color on a white background.

Pick the color
  ↓
Check the contrast
  ↓
Below 4.5:1 → large text or decorative elements only
  ↓
Above 4.5:1 → fine for body text too

What they have in common

All five tools follow the same rules: they are free, they do not ask for an account, and they do all the work in the browser, on your phone too.

This matters most when you are working on material that is not public yet. Client logos, unpublished photos, the details on a business card: they stay on your device.

Pick the file
  ↓
Processing in the browser
  ↓
Download the result
  ↓
No file sent to a server

If you want to check, open your browser's developer tools, go to the Network tab and process an image: you will not see any request uploading the file.

The tools page also lists SVG Generator and Favicon Generator, with more on the way.

Why I built them

Compressing a photo or creating a QR code should not require signing up, handing over an email address or closing one ad after another.

I built these tools so that anyone can get these jobs done quickly and easily: no sign-up, no personal data left behind and no barrage of ads.

Checklist before publishing images and graphics

Before uploading anything to your site or sending it to print, check at least these five points:

• Photos are resized and saved as WebP or AVIF.
• Logos have a transparent background and are PNG, WebP or SVG.
• The QR code is static, has good contrast and has been tested with several phones.
• Text colors reach a 4.5:1 contrast ratio against their background.
• The originals are kept in a separate folder.

Small tools, cleaner work

None of these tools will change a project on its own. But a lightweight image, a logo that reads well on any background, a QR code that still works a year from now and a legible color are details that, added up, make the difference between rushed work and careful work.

The tools are at tools.hash42.xyz, free and with no sign-up.

Sources

• Hash42 Tools
• QR Generator
• Image Optimizer
• Batch Optimizer
• WhiteLogo
• Color Picker
• DENSO WAVE, QR Code Error Correction
• web.dev, Image performance
• W3C, Understanding WCAG 2.2: Contrast (Minimum)
• MDN, hsl()