DEV Community: Emily digiplanPro

Building Toon Tone: A Browser-Based Color Matching Game with HSB Sliders

Emily digiplanPro — Sat, 16 May 2026 02:27:40 +0000

Building Toon Tone: A Browser-Based Color Matching Game with HSB Sliders

I recently built a small browser game called Toon Tone.

You can try it here:

Toon Tone is a simple color matching game. The player sees a target color and tries to recreate it by adjusting three sliders:

Hue
Saturation
Brightness

After submitting a guess, the game calculates how close the selected color is to the target color and gives the player a score. Each game has 10 rounds.

The concept is simple, but building it was a good reminder that even small browser games require a lot of product and implementation decisions.

The Original Idea

The first idea was more visual.

I wanted Toon Tone to be a cartoon-style color memory game. A player would see a cute character, remember the color of one part of the character, such as a hoodie, hat, or accessory, and then recreate that color with sliders.

For example:

Remember the hoodie color.

Now match it from memory.

That sounded more unique than a normal color tool, but the asset workflow became complicated very quickly.

To make a character-based version work, I needed layered image assets:

A base character image
A mask for the color-changing area
A shading or highlight layer
Perfect alignment between all layers

If the mask and shading layers were even slightly misaligned, the result looked broken. SVG was easier to control, but the generated characters often looked too rough. PNG illustrations looked better, but separating and aligning layers took too much time.

So I decided to simplify the first version.

Instead of starting with characters, I built a pure color card version first.

Why Start With Color Cards?

The main goal of the MVP was to test the core game loop:

Show a target color
Let the user adjust the sliders
Preview the selected color in real time
Submit the guess
Calculate a score
Move to the next round

This version removed the hardest visual production problems and helped me focus on the actual gameplay.

The questions I wanted to answer were:

Is matching colors fun?
Are HSB sliders intuitive?
Is 10 rounds the right length?
Does scoring create replay value?
Does the game work well on mobile?

Those questions felt more important than solving character asset layers too early.

Why HSB Instead of RGB?

I chose HSB controls because they feel more natural for a casual color matching game.

RGB is useful for developers, but it can feel technical for general users. If you ask a player to adjust red, green, and blue values directly, the experience quickly becomes less intuitive.

HSB is easier to understand:

Hue changes the color family.
Saturation changes how intense or muted the color is.
Brightness changes how light or dark the color appears.

This makes the game easier to play without requiring color theory knowledge.

HSB to RGB Conversion

The sliders control HSB values, but the browser needs RGB or HEX values to display colors.

Here is a simplified version of the conversion logic:


ts
type HSB = {
  h: number; // 0 - 360
  s: number; // 0 - 100
  b: number; // 0 - 100
};

type RGB = {
  r: number;
  g: number;
  b: number;
};

function hsbToRgb({ h, s, b }: HSB): RGB {
  s /= 100;
  b /= 100;

  const k = (n: number) => (n + h / 60) % 6;
  const f = (n: number) =>
    b - b * s * Math.max(Math.min(k(n), 4 - k(n), 1), 0);

  return {
    r: Math.round(255 * f(5)),
    g: Math.round(255 * f(3)),
    b: Math.round(255 * f(1)),
  };
}

Building a Browser-Based Square Face Avatar Generator with HTML5 Canvas

Emily digiplanPro — Sat, 09 May 2026 09:39:30 +0000

I recently built squareface-generator.org, a free browser-based avatar maker for creating cute square face icons, PFP avatars, and simple profile images.

The idea was simple: bring back the fun of classic square face avatar generators, but rebuild the experience for the modern web.

A lot of older avatar tools were Flash-based, slow, difficult to use on mobile, or no longer accessible in today’s browsers. At the same time, people still need quick, lightweight profile pictures for Discord, TikTok, YouTube, forums, gaming profiles, and online communities.

So I wanted to create something that was:

Free to use
Fast in the browser
No Flash
No installation
Mobile-friendly
Easy to export as PNG
Simple enough for non-designers

The result is Square Face Generator, a small web app that lets users customize square face avatars using original Canvas-drawn parts.

Why HTML5 Canvas?

For this project, HTML5 Canvas was a natural choice.

The avatar is built from multiple visual layers: face shape, hair, eyes, mouth, clothes, accessories, and background. Each part can be drawn or positioned on the canvas, then exported as a final PNG image.

Canvas made it possible to keep the experience lightweight and flexible without requiring a backend image-rendering service for every avatar.

A simplified drawing flow looks like this:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

function drawAvatar(parts) {
ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBackground(ctx, parts.background);
drawFace(ctx, parts.face);
drawHair(ctx, parts.hair);
drawEyes(ctx, parts.eyes);
drawMouth(ctx, parts.mouth);
drawAccessories(ctx, parts.accessories);
}

function exportPNG() {
const imageUrl = canvas.toDataURL("image/png");
return imageUrl;
}

The real implementation has more structure, but the core concept is still simple: render each avatar part in order, then allow the user to export the final canvas as a PNG.

Layering Matters

One of the biggest small details in an avatar generator is layer order.

For example:

Background
Face
Ears
Hair behind face
Eyes
Mouth
Clothes
Hair in front
Accessories

If the order is wrong, the avatar can look broken. A hat might appear behind the hair, glasses might be hidden by the face layer, or clothing might overlap in strange ways.

So I had to treat the avatar almost like a mini rendering engine. Each part needed a clear category, position, and z-index.

Random Generation

One of the most useful features is the random avatar button.

Many users do not want to customize every single detail from scratch. They just want inspiration quickly. Random generation solves that by creating a complete avatar instantly.

The basic logic is straightforward:

function getRandomItem(items) {
return items[Math.floor(Math.random() * items.length)];
}

function generateRandomAvatar(config) {
return {
face: getRandomItem(config.faces),
hair: getRandomItem(config.hair),
eyes: getRandomItem(config.eyes),
mouth: getRandomItem(config.mouth),
clothes: getRandomItem(config.clothes),
background: getRandomItem(config.backgrounds),
};
}

But the tricky part is making random results look good.

Not every combination works well. Some colors clash. Some accessories only fit certain hairstyles. Some facial parts need spacing rules.

So the generator needs a balance between randomness and constraints.

PNG Export Sizes

Another feature I added was multiple PNG export sizes.

Users may need different image sizes depending on where they want to use the avatar:

256px for small icons
512px for most profile pictures
1024px for higher-quality profile images

This makes the tool more useful across different platforms without requiring users to resize the image manually.

Shareable Avatar Links

A useful feature for avatar tools is the ability to share a generated result.

Instead of only downloading the image, users can also create a shareable link. This makes it easier to save, revisit, or send an avatar to someone else.

The general idea is to serialize the avatar configuration into a URL-friendly format:

const avatarState = {
face: "face_01",
hair: "hair_05",
eyes: "eyes_03",
mouth: "mouth_02",
background: "blue",
};

const encoded = encodeURIComponent(JSON.stringify(avatarState));
const shareUrl = ${location.origin}/?avatar=${encoded};

Then the app can read the URL parameter and rebuild the avatar from the saved configuration.

Designing for Non-Designers

The biggest product lesson from this project was that avatar generators should feel playful, not complicated.

It is tempting to add too many controls: sliders, advanced color pickers, layer editing, manual transforms, and detailed positioning. But most users just want a cute profile image quickly.

So I focused on keeping the interface simple:

Click to change parts
Use random generation for inspiration
Export PNG quickly
Share the result easily

The goal was not to build a professional illustration tool. The goal was to make avatar creation feel fast and fun.

Why I Built It

The inspiration came from older square face icon tools that many people used years ago. Those tools had a very specific charm: simple shapes, cute expressions, and a quick customization experience.

But many of them depended on outdated technology or were not built for modern browsers.

I wanted to rebuild that nostalgic experience using modern web technology, original artwork, and a cleaner user experience.

What I Learned

Building a simple avatar generator is more complex than it looks.

Some of the challenges included:

Managing canvas layers
Keeping generated avatars visually consistent
Supporting multiple export sizes
Making the app work well on mobile
Creating shareable avatar states
Keeping the UI simple enough for casual users

It reminded me that small tools can still involve interesting technical and design decisions.

Final Thoughts

Square Face Generator started as a small browser experiment, but it became a useful reminder of why I enjoy building web tools.

A good web app does not always need to be complex. Sometimes the best tools are simple, fast, and focused on one specific user need.

In this case, the need is simple:

Create a cute square face avatar, export it as a PNG, and use it anywhere online.

You can try it here:
https://squareface-generator.org/

I would love to hear feedback from other developers, especially around Canvas rendering, avatar state sharing, and improving random generation quality.

How I Built a Simple AI Tool to Remove Text and Backgrounds from Images

Emily digiplanPro — Sun, 03 May 2026 06:20:01 +0000

Images are everywhere: product pages, social posts, landing pages, screenshots, thumbnails, documents, presentations, and marketing assets.

But there is one small problem that comes up again and again:

You have an image that is almost perfect, except it contains unwanted text, a watermark, a messy background, a logo, a caption, or some object you want to remove.

For designers, this is easy enough with professional tools. But for many creators, ecommerce sellers, marketers, students, and everyday users, opening Photoshop just to clean up one image feels like too much work.

That is the problem I wanted to solve with AI Remove Text From Image.

What the tool does

AI Remove Text From Image is a browser-based image cleanup tool that helps users remove unwanted elements from images with AI.

The main features include:

Remove text from images
Remove watermarks
Remove captions and subtitles
Remove logos and labels
Remove unwanted objects
Remove image backgrounds
Use manual brush masking for more control
Preview and download processed images directly in the browser

The goal is simple: upload an image, select the area you want to clean, let AI process it, and download the result.

No Photoshop. No complex editing workflow. No design experience required.

Why I built it

I noticed that a lot of image editing tools are either too broad or too complicated.

Many tools try to become full design platforms. That can be powerful, but it also creates friction for users who only want to do one quick task.

For example:

An ecommerce seller wants to remove a messy background from a product photo
A creator wants to remove captions from a screenshot
A marketer wants to clean a poster or ad image
A student wants to remove text from a scanned image
A designer wants to quickly extract an object for reuse
A real estate agent wants to clean up interior visuals
A social media manager wants to prepare cleaner thumbnails

These users do not always need a full editing suite. They just need a fast, focused image cleanup tool.

That is why I decided to build a tool around a very specific workflow.

The workflow

The core workflow is designed to be as simple as possible:

Upload an image
Select or brush over the area to remove
Let AI generate a clean result
Preview the processed image
Download the final image

For background removal, the tool can automatically detect the subject and remove the background, which is useful for product photos, portraits, pet photos, logos, design assets, and ecommerce images.

For text or object removal, users can manually mask the area they want to remove, which gives them more control over the result.

Example use cases

Here are some common use cases the tool is designed for.

Product photos

Ecommerce sellers often need clean product images for online stores, ads, and marketplaces.

A product photo might be taken on a table, in a room, or against a distracting background. With background removal, the product can be isolated and used on a white or transparent background.

This is useful for Shopify stores, Amazon listings, Etsy products, and independent ecommerce websites.

Portraits

Users can remove distracting backgrounds from personal photos and create cleaner profile images.

This can be useful for LinkedIn, resumes, personal websites, creator profiles, and social media accounts.

Social media content

Creators often need to reuse people, products, pets, or objects in thumbnails, posts, banners, and short-form video covers.

Removing the background makes it easier to place the subject on a custom design, gradient, poster, or branded visual.

Logos and objects

Sometimes you have a logo, icon, sticker, or small object inside an image, but you need it as a clean transparent asset.

Background removal makes it easier to reuse that visual in slides, websites, videos, posters, and marketing materials.

Text removal

There are many cases where users need to remove text from an image:

Captions on screenshots
Text overlays on posters
Labels on product images
Handwriting on photos
Unwanted subtitles
Old design text that needs to be replaced

Instead of manually cloning pixels, users can brush over the text and let AI reconstruct the background.

Design decisions

One of the main design decisions was to keep the interface focused.

I did not want users to feel like they had to learn another complex design tool.

So the product focuses on a few core actions:

Upload
Mask
Remove
Preview
Download

Another decision was to support free 720p previews and downloads, so users can test the result before deciding whether they need original-quality exports.

This makes the tool easier to try, especially for users who are not sure whether AI cleanup will work well for their image.

What I learned while building it

One thing I learned is that image cleanup is not just a technical feature. It is also a user experience problem.

The AI result matters, of course. But the workflow around the result matters just as much.

Users need to understand:

What type of image works best
Whether they should use automatic background removal or manual masking
How to select the right area
What quality they can preview
When they should export the original image

A good AI product is not only about the model. It is also about making the model easy to use for people who are not technical.

Why this matters

AI image editing is becoming more accessible, but many tools are still too complex for quick everyday use.

I think there is value in smaller, focused tools that solve one practical problem well.

AI Remove Text From Image is built around that idea.

Instead of trying to replace every design tool, it focuses on helping users quickly clean up images in the browser.

Try it

You can try the tool here:

https://airemovetextfromimage.com

If you specifically want to remove image backgrounds, you can use:

https://airemovetextfromimage.com/remove-background

I would love to hear feedback from other builders, creators, designers, and developers.

What would you improve in an AI image cleanup workflow?