Articles · Media and color

Which image or color tool do I need?

A practical route map for image conversion, resize, compression, cleanup, palette extraction, contrast checks, CSS colors, gradients, QR codes, and barcodes.

Image work and color work often arrive together. You export a hero image, notice it is too heavy, sample a brand color, check text contrast, then realize the gradient in the mockup needs CSS syntax instead of a screenshot. Toolcore splits those jobs into small pages so you can open only the tool that matches the next decision.

This guide is a task-first map for the Media tools and Color tools. Most linked tools run in the browser, which is useful when you are checking drafts, screenshots, marketing assets, or UI colors before they go into a CMS or codebase.

Convert, resize, or compress an image

Start with the image task. If the file type is wrong, use the converter. If the dimensions are wrong, use resize. If the format and dimensions are already fine but the file is still too large, use compression.

  • Image convert handles WebP, JPEG, PNG export, quick enhancement, resize panels, and metadata review in one workspace.
  • Image resize is the direct route when you only need max width, max height, or aspect-ratio-safe scaling.
  • Compress images is the better fit for shrinking already-correct JPEG, PNG, SVG, WebP, or AVIF files.

Clean up before you publish

Screenshots and photos often carry more than the visible pixels. Before a public upload, check whether you need to crop, remove camera metadata, rotate, or create favicon-sized exports.

  • Image crop is for trimming a screenshot or social card before you export.
  • Image rotate fixes orientation without opening a full editor.
  • Favicon generator turns one square source into common favicon and app icon sizes.
  • Image convert metadata panel shows EXIF when present and rebuilds exports through canvas so camera tags are not carried forward.

Extract or check colors from an asset

Once the image is ready, the next question is usually visual: which color is actually in the asset, and will text remain readable on top of it?

Build UI colors, gradients, and tokens

For design systems, a single sampled color is rarely enough. You may need a palette, a CSS gradient, framework-ready theme variables, or a small historical web-safe reference.

Pick QR or barcode when pixels must scan

A scannable code is not just another image export. Quiet zones, contrast, module size, and payload length matter. Use the dedicated generators before you place codes into artwork.

A simple routing rule

If the input is a file, start under Media. If the input is a color value, start under Color. If the result must be scanned, use QR or Barcode. That split keeps the first step small, and the links above let you jump sideways when a design task turns into a color or accessibility check.

Common use cases

  • Bookmark before publishing web images so format, resize, compression, and metadata checks stay in one route map.
  • Share with a teammate who has a color from an asset but is not sure whether to open palette, converter, or contrast tools.
  • Use when a design or CMS task jumps between image files, CSS color values, gradients, and QR or barcode exports.

Common mistakes to avoid

  • Using compression when the dimensions are still wrong

    Resize or crop first, then compress the finished asset. Compression is not a substitute for a layout-sized export.

  • Sampling colors without checking contrast

    A color can look good in an image and still fail as text. Pair palette extraction with the WCAG contrast checker before shipping UI copy.

  • Treating QR and barcode as regular decoration

    Scannable codes need quiet zones, enough contrast, and real-device testing. Generate them on the dedicated pages before placing them in artwork.

FAQ

Do Toolcore image tools upload my files?

The image and color tools linked from this guide run in the browser unless a specific page says otherwise. Common convert, resize, palette, and contrast work is handled locally in the tab.

Should I start with Media tools or Color tools?

Start with Media when the input is an image file. Start with Color when the input is a CSS color value, a palette decision, or a contrast check.

Which page should I open for WebP, JPEG, or PNG conversion?

Open /tools/image-convert for WebP, JPEG, and PNG export plus quick enhancement, resize panels, and metadata review.

Where do I check whether text is readable on a color?

Use /tools/color/contrast for exact WCAG ratios. If one side of the pair can change, /tools/color/accessible can suggest a better matching color.