Image, Color and Design Tools
These tools cover the visual side of building and publishing on the web: getting images to the right size and format, choosing colors that are readable, writing the CSS for gradients, shadows and transforms, sketching diagrams, and producing placeholder images, filler text and QR codes. They are used by front-end developers, designers, writers preparing screenshots for documentation, and anyone who needs a favicon or a smaller photo without opening a desktop editor.
25 free tools · no sign-up · no ads
Compress, resize and convert images, inspect EXIF and SVG files, sample colors and fonts, read QR codes and record GIFs, all processed in your browser.
Base64 Image Generator
Convert images to Base64 encodingImage Compressor
Compress images to reduce file sizeImage Converter
Convert between different image formatsImage Resizer
Resize images to specific dimensionsSVG Viewer
View and analyze SVG filesImage to PDF Converter
Convert images to PDF documentsQR Code Reader
Read and decode QR codes from imagesFavicon Generator
Generate favicons for websitesImage to WebP Converter
Convert images to WebP format for better compressionColor Picker from Image
Pick colors from uploaded imagesFont Picker from Image
Find look-alike fonts for text in an imageImage Format Comparison
Compare different image formats and their characteristicsImage Metadata Viewer
View EXIF data in photos: camera, lens, exposure, GPS location and timestampsGIF Creator
Create animated GIFs from multiple screenshots with custom skins and transitionsScreen Capture to GIF
Record your screen, a window or a tab as an animated GIF
Convert and test colors against WCAG, generate gradient, shadow and transform CSS, and sketch or diagram ideas on a canvas in the browser.
Color Picker & Converter
Pick and convert colors between RGB, HSV, and Hex formatsCSS Gradient Generator
Generate CSS gradients visuallyBox Shadow Generator
Generate CSS box shadow effectsCSS Transform Generator
Generate CSS transform propertiesContrast Checker
Check color contrast for accessibilityDrawing Tool
Simple drawing and sketching canvasDiagram Tool
Draw flowcharts, diagrams and wireframes on an infinite Excalidraw canvas
Make placeholder images in exact sizes, a set amount of lorem ipsum text, and static QR codes with your own colors and error correction level.
Which tool do I need?
Make a large photo small enough for a web page
Resize it to the width it will be shown at first, then compress it or convert it to WebP. Cutting pixels saves far more than lowering quality.
Check a photo for location data before posting it
Open it in the EXIF viewer to see GPS, camera and timestamps. Re-saving it through the compressor writes a copy with no metadata.
Find out whether my text color is readable on its background
Enter both colors in the Contrast Checker for WCAG AA and AAA results. Use the Color Picker to convert HEX values from a design file first.
Record a short UI demo for a README or pull request
Record a window or tab straight to GIF, or assemble a few screenshots into a looping GIF with a browser or phone frame around them.
Fill a mockup with dummy images and copy
Generate solid placeholder images at the exact slot sizes and an exact amount of lorem ipsum text.
Turn a logo into browser tab and home screen icons
The Favicon Generator draws every common size from one source image, packs a favicon.ico and writes the link tags.
About Creative & Design
The category is split three ways. Image Tools work on files: resizing, compression, format conversion, EXIF inspection, SVG previews, GIF recording and reading colors, fonts or QR codes out of a picture. Design Tools work on values and code: color conversion, WCAG contrast, CSS generators and two canvases for drawing and diagrams. Generator Tools make stand-in content for mockups and print. A typical page build touches all three: generate placeholders while the layout is in progress, check the palette against WCAG, then resize and compress the real photos and build a favicon set before launch.
Almost everything here runs on an HTML canvas in your browser tab, so images are not uploaded. Two consequences follow. Canvas re-encoding writes no EXIF data, which removes camera details and GPS location from every converted or compressed copy, and browsers can only export PNG, JPEG and WebP from a canvas, so AVIF and animated WebP are out of reach. The Font Finder is the main exception to the local-only rule: it downloads candidate fonts from Google Fonts while you use it.
Guides
- Resize, Convert, Compress: A Practical Order for Web ImagesWhy resizing comes first, how fit-inside aspect ratio maths works, when to use JPEG, PNG or WebP, what JPEG quality really changes, and when Base64 or PDF is the right package.
- JPEG, PNG, WebP, AVIF and JPEG XL: What Each Image Format Is ForHow each image format compresses, what it supports (alpha, animation, HDR), where it displays today, and when converting to WebP is worth it.
- WCAG Color Contrast: How the Ratio Works and How to Pass AAWhere 4.5:1 comes from, how relative luminance is calculated, what counts as large text in CSS pixels, and the contrast mistakes that fail audits most often.
- CSS Gradients, Box Shadows and Transforms: The Parts People Get WrongGradient angles, why background-color ignores gradients, how blur and spread really behave, and why the order of transform functions changes where an element ends up.
Frequently asked questions
Do the image and design tools upload my files?
No. Images are decoded and re-encoded on a canvas in your browser tab and never sent to a server. The Font Finder does load font files from Google Fonts while it runs, but your image stays local.
Why can these browser image tools not export AVIF?
Browser canvases can only encode PNG, JPEG and, in most browsers, WebP. AVIF and JPEG XL need a separate encoder, so the tools here read those formats where the browser supports them but cannot write them.
Why do browser image tools remove EXIF data from my photos?
Canvas re-encoding writes only pixels, so camera details, timestamps and GPS coordinates are not carried over. That is usually a privacy benefit; keep the original if you need the metadata for a photo library.
What is the difference between Image Tools and Design Tools?
Image Tools take a file in and give a file or a reading back. Design Tools work with values such as colors and CSS properties, plus two canvases for sketching and diagrams.
Can I edit SVG files with these tools?
Not directly. The SVG Viewer previews and inspects SVG code safely, the Image Converter rasterises SVG to PNG, JPEG or WebP, and the Diagram Tool exports its drawings as SVG.