Free Image Tools
Extract color palettes from images, convert images to Base64 data URIs, and decode Base64 strings back to images — all free, all instant, and all in your browser. Your images never leave your device.
3
Free Tools
4
Color Formats
0
Images Uploaded
100%
Browser-Based
Color Palette Generator from Image
Extract HEX, RGB, HSL & CMYK from any photo
Upload any image and instantly extract its dominant color palette. Get HEX, RGB, HSL, and CMYK codes for every color with one-click copy. Includes a manual eyedropper for pixel-precise picking, a live UI preview, and CSS variable export.
- Extract brand colors from a logo or photo
- Build a website color scheme from a mood-board image
- Generate a matching design palette for an illustration
Image to Base64 Converter
Convert any image to a data URI — no upload
Convert any image (JPG, PNG, SVG, WebP, GIF) to a Base64 data URI string entirely in your browser. Generates ready-to-use HTML <img> tags, CSS background-image code, raw Base64, and JSON output — all with one click.
- Embed small icons in CSS without an HTTP request
- Inline images in HTML email signatures
- Include images in JSON API payloads
Base64 to Image Decoder
Decode Base64 strings back to visible images
Paste any Base64 string (with or without the data:image prefix) and instantly decode it to a visible image. Shows resolution, file size, and image type. Detects and cleans broken strings. Download the decoded image directly.
- Visualise a Base64 image stored in a database
- Debug a broken data URI in an API response
- Recover an image file from raw Base64 text
Which Tool Should I Use?
Match your task to the right tool:
| I need to… | Example | Use this tool |
|---|---|---|
| Extract a color palette from a photo or logo | Find the 5 dominant colors in a brand image | Color Palette Generator |
| Pick the exact color of a specific pixel | Sample a color from a background texture | Color Palette Generator (Eyedropper) |
| Get HEX/RGB codes for a design project | Build a CSS color scheme from a mood image | Color Palette Generator |
| Convert an image to Base64 for CSS embedding | Embed a small icon in a stylesheet | Image to Base64 |
| Inline an image in an HTML file | Single-file HTML with no external image files | Image to Base64 |
| Include an image in a JSON payload | POST request with base64-encoded photo | Image to Base64 |
| See what image a Base64 string represents | Database field contains a data URI | Base64 to Image Decoder |
| Debug a broken Base64 image in an API response | Check if the data URI is valid and renderable | Base64 to Image Decoder |
Color Format Reference
The Color Palette Generator outputs all four formats. Here's when to use each:
| Format | Example | Used In | Advantages |
|---|---|---|---|
| HEX | #3A86FF | CSS, HTML, Figma, Sketch, Photoshop | Compact, universally recognised, easy to share |
| RGB | rgb(58, 134, 255) | CSS, screen design, JavaScript | Intuitive light mixing, directly matches screen output |
| HSL | hsl(217, 100%, 61%) | CSS, design systems, Tailwind | Easy to create tints (↑L) and shades (↓L) systematically |
| CMYK | cmyk(77%, 47%, 0%, 0%) | Print design, InDesign, offset printing | Required for physical printing — represents ink percentages |
Creating Tints and Shades from a Base Color
Tint (lighter)
In HSL, increase Lightness — hsl(217, 100%, 75%)Shade (darker)
In HSL, decrease Lightness — hsl(217, 100%, 40%)Tone (muted)
In HSL, decrease Saturation — hsl(217, 60%, 61%)Base64 Image Encoding — Developer Guide
Base64 converts binary image data into ASCII text. Here's the full format and practical context:
Data URI format:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==✅ Good Uses for Base64 Images
- ✓Small icons and logos in CSS (saves HTTP request)
- ✓Images in HTML email templates (bypasses blocking)
- ✓Single-file web apps or offline HTML documents
- ✓Images in JSON API request/response bodies
- ✓Inline images inside SVG files
- ✓Favicon embedding in HTML `<head>`
❌ When NOT to Use Base64
- ✗Large images (Base64 adds ~33% to file size)
- ✗Images that change frequently (no browser caching)
- ✗Photos or large illustrations on web pages
- ✗Any image over ~10 KB (separate file is more efficient)
- ✗When HTTP/2 multiplexing already reduces request overhead
Output Formats from the Image to Base64 Converter
Raw Base64
iVBORw0KGgoAAAANS...HTML <img> tag
<img src="data:image/png;base64,iVBORw0KGgo..." />CSS background-image
background-image: url("data:image/png;base64,iVBORw...");JSON value
{ "image": "data:image/png;base64,iVBORw..." }Image Format Comparison
All formats supported by the Image to Base64 Converter and Base64 Decoder:
| Format | Compression | Transparency | Best For | Typical Use |
|---|---|---|---|---|
| PNG | Lossless | ✅ Alpha channel | Screenshots, icons, logos | Web images requiring transparency |
| JPG | Lossy | ❌ None | Photographs, complex images | Web photos — smallest file at acceptable quality |
| WebP | Both | ✅ Alpha channel | All web images | Modern web — 25–35% smaller than JPG/PNG |
| SVG | Vector | ✅ Yes | Icons, logos, illustrations | UI icons — infinitely scalable, tiny file size |
| GIF | Lossless | ✅ 1-bit | Simple animations | Short animated images (limited to 256 colours) |
Who Uses These Image Tools?
Designers & Brand Teams
Use the Color Palette Generator to extract exact brand colors from a logo, mood board, or product photo — getting HEX and CMYK codes for both screen and print use in seconds.
Frontend Developers
Use Image to Base64 to embed small icons and logos directly in CSS, reducing HTTP requests. Use the Base64 Decoder to verify data URIs stored in a database or returned by an API.
Content Creators & Bloggers
Use the Color Palette Generator to build a consistent visual palette for a post, product launch, or social campaign based on key imagery.
Email Marketers
Use Image to Base64 to inline images in HTML email templates, bypassing email client image blocking and ensuring images always display even before the recipient clicks "Load images".
Why Use Texterfly Image Tools?
Images Never Leave Your Device
All processing uses the browser Canvas API and FileReader. Images are never uploaded, transmitted, or stored — safe for client assets and confidential designs.
Instant Results
Color extraction, Base64 encoding, and decoding all happen in real time in your browser tab with no server round-trip.
Works on Any Device
Fully responsive on desktop, tablet, and mobile. No app download, no account. Open from any browser on any device.
Frequently Asked Questions
What image tools does Texterfly offer?
Three free image tools: a Color Palette Generator (extracts HEX, RGB, HSL, CMYK codes from any uploaded image, with eyedropper and CSS export), an Image to Base64 Converter (converts images to data URIs with HTML, CSS, and JSON output), and a Base64 to Image Decoder (decodes Base64 strings back to visible images with resolution info and download). All are browser-based — images are never uploaded to servers.
What color formats does the palette generator output?
Four formats per color: HEX (#3A86FF — used in web CSS and most design tools), RGB (rgb(58, 134, 255) — screen design), HSL (hsl(217, 100%, 61%) — useful for adjusting lightness and saturation), and CMYK (cmyk(77, 47, 0, 0) — required for print design). Copy any format with one click.
What is Base64 image encoding?
Base64 converts binary image data into a string of ASCII characters. The result — a "data URI" — lets browsers render the image without fetching an external file: data:image/png;base64,<string>. Base64 increases file size by ~33% but eliminates one HTTP request, making it useful for small icons and inline images.
When should I use Image to Base64?
Use it when: embedding small icons directly in CSS (saves one HTTP request), including images in HTML emails (bypasses email client image blocking), building single-file HTML/SVG applications, or embedding images in JSON API payloads.
What is the difference between HEX, RGB, HSL, and CMYK?
HEX (#RRGGBB) is a 6-digit hex code used in CSS and design tools. RGB mixes red, green, blue light channels (0–255 each). HSL separates hue, saturation, and lightness — great for creating tints and shades. CMYK defines cyan, magenta, yellow, and black ink percentages — used exclusively in print design. For web, use HEX or RGB. For print, use CMYK.
What image formats does the Base64 converter support?
JPEG (.jpg, .jpeg), PNG (.png), GIF (.gif), SVG (.svg), and WebP (.webp). Each produces a correctly typed data URI — e.g. data:image/png;base64,... for PNG files.
How does the Base64 to Image Decoder work?
Paste a Base64 string (with or without the data:image/...;base64, prefix). The tool renders the image, shows resolution (width × height) and file size, and provides a download button. It also detects whitespace or line break issues in malformed strings.
How does the color palette generator extract colors?
It uses a colour quantisation algorithm (similar to k-means clustering) to analyse pixel data and identify the most visually representative colours. The manual eyedropper lets you click any specific pixel to get its exact colour code.
Are these image tools free?
Yes. All 3 image tools are 100% free with no registration, subscription, or payment required.
Are my images private?
Yes. All processing runs in your browser using the Canvas API and FileReader. Images are never uploaded to any server, stored, or transmitted — including the colour palette generator.