# Color Inverter - Full Context

> Extended context for the Color Inverter in-browser image inversion tool, covering UX flow, technical architecture, and support resources.

Color Inverter flips RGB values using an in-browser Canvas pipeline. No files ever leave the device, so confidential design assets, QA screenshots, and photography remain private even when the page is used offline after the initial load.

Key capabilities include local-first inversion built on `createImageBitmap` with `<canvas>` fallback, preservation of alpha data, and sanitized download naming that appends `-ColorInverter` to the original filename. Supported imports span PNG, JPG, JPEG, WebP, GIF, HEIC, HEIF, AVIF, and BMP up to 25 MB; exports default to the source format or can be forced to PNG, JPG, or WebP with configurable quality.

User journey:
1. Upload via drag-and-drop, click, or paste to an accessible dropzone that surfaces localized hints and warns when multiple files are supplied.
2. Validation checks MIME support, file size, and dimensions (warning above 8K pixels per side) before enabling inversion.
3. Conversion uses `convertToNegative`, showing busy states, debug logs in development, and error copy for decode or processing failures.
4. Side-by-side previews show original and inverted images while users pick an output format; download links rely on object URLs that are revoked during cleanup.
5. Users can reset the session at any time to process new images without reloading the page.

Implementation notes:
- `ImageConverter` (`src/components/blocks/converter/index.tsx`) orchestrates state for original and inverted blobs, formats, warnings, and download names.
- Helper utilities in `src/lib/image-inversion.ts` handle Canvas drawing, bitmap fallbacks, dimension reads, MIME negotiation, and filename sanitation.
- Structured data generated in `src/app/[locale]/(default)/page.tsx` exposes Organization, WebSite, SoftwareApplication, and FAQ graph nodes keyed to localized copy.

Localization and accessibility:
- Copy for every section lives in `src/i18n/pages/landing/{locale}.json`, currently shipping English and Simplified Chinese variants with matching structure.
- The upload area exposes keyboard activation, focus styling, and descriptive `aria` labels while previews propagate localized alt text from CMS content.
- Mobile responsive layouts reflow the converter stack vertically and maintain performance via asynchronous Canvas work with cleanup inside `useEffect`.

## Black & White Converter Page

The `/tools/black-and-white-converter` route extends the core converter into a dedicated grayscale experience that targets queries like "convert photo to black and white" while preserving the privacy-first Canvas pipeline.

- Metadata and on-page copy live in `src/i18n/pages/tools/black-and-white-converter/{locale}.json`, supplying keyword-rich hero titles, meta descriptions, and FAQ entries for each locale.
- The layout composes Hero, Introduce, Converter, Benefits, Feature grids, Use Cases, Comparison, FAQ, and CTA blocks, each rewritten to emphasize grayscale workflows and file-format coverage.
- Structured data emitted by `src/app/[locale]/(default)/tools/black-and-white-converter/page.tsx` publishes `SoftwareApplication`, `WebPage`, and FAQ schema nodes that reference the page URL per locale to improve discovery across search and AI agents.

## Primary URLs

- [Landing page - English](https://colorinverter.net/): Full marketing narrative, converter component, feature grids, comparison table, and calls to action.
- [Landing page - Simplified Chinese](https://colorinverter.net/zh): Mirrored localized content for Chinese audiences with identical functionality.
- [Contact page - English](https://colorinverter.net/contact): Dedicated inquiry form, regional compliance details, and direct support touchpoints.
- [Contact page - Simplified Chinese](https://colorinverter.net/zh/contact): Localized contact flow for Chinese users with mirrored form fields and support copy.
- [Black and white converter - English](https://colorinverter.net/tools/black-and-white-converter): Standalone grayscale-focused funnel with hero, converter block, comparison, feature highlights, use cases, FAQ, and CTA for "make image black and white" intents.
- [Black and white converter - Simplified Chinese](https://colorinverter.net/zh/tools/black-and-white-converter): Localized equivalent for Simplified Chinese users with identical converter UX, structured data, and privacy messaging.

## Converter Anchors

- [Interactive converter](https://colorinverter.net/#app): Upload widget with drag and drop, preview panels, format selector, warnings, and download naming preview.
- [Usage guide](https://colorinverter.net/#usage): Illustrated three-step tutorial that covers upload, invert, and download flows.
- [Use cases](https://colorinverter.net/#use-cases): Detailed scenarios for designers, photographers, QA teams, and accessibility leads.
- [Comparison matrix](https://colorinverter.net/#comparison): Evaluation grid comparing Color Inverter to Photoshop and generic online tools across speed, privacy, and cost.

## Supporting Content

- [Feature highlights](https://colorinverter.net/#feature): Summary of the browser-based engine, one-click negatives, and color intelligence tooling.
- [FAQ](https://colorinverter.net/#faq): Coverage of privacy posture, format support, mobile usage, offline behavior, and roadmap direction.
- [CTA](https://colorinverter.net/#cta): Final call-to-action with quick access to the converter and supplemental guides.
- [Footer contact](https://colorinverter.net/#footer): Links to Discord, support email, and policy documents.

## Optional

- [Sitemap](https://colorinverter.net/sitemap.xml): XML snapshot of indexed locales for crawlers and agents.
- [Discord community](https://discord.gg/tfejDUG6): Invite for release updates, troubleshooting, and feature discussions.
- [Email support](mailto:support@colorinverter.net): Preferred contact for enterprise compliance questions or custom deployments.