A sleek, modern web-based steganography tool that hides any file inside PNG images. Works entirely in your browser with no server uploads — your files never leave your device.
- Hide any file inside a PNG image
- Extract hidden files from encoded images
- 100% client-side — no uploads, no servers, no tracking
- Modern UI with smooth animations and accessibility support
- Drag & drop support
- Demo included — try hiding the Bitcoin whitepaper!
Steganography is the practice of hiding information within other non-secret data. Unlike encryption (which makes data unreadable), steganography conceals the very existence of the hidden data. The word comes from Greek: steganos (covered) + graphein (writing).
ShadeOfColor uses Pixel Channel Encoding — a technique that stores data bytes directly in the color values of image pixels.
PNG images store pixels as RGBA values (Red, Green, Blue, Alpha), each channel holding a value from 0-255 (1 byte). ShadeOfColor encodes data into the RGB channels only, keeping Alpha fixed at 255.
Why RGB only? Browsers apply alpha premultiplication when processing images — if Alpha isn't 255, the RGB values get modified, corrupting our hidden data. By keeping Alpha at 255, we ensure pixel-perfect data preservation.
Each pixel stores 3 bytes of data:
┌─────────┬─────────┬─────────┬─────────┐
│ Red │ Green │ Blue │ Alpha │
│ (data) │ (data) │ (data) │ (255) │
└─────────┴─────────┴─────────┴─────────┘
Every encoded image starts with a 286-byte header:
| Field | Offset | Size | Description |
|---|---|---|---|
| Signature | 0 | 2 bytes | "ER" magic marker to identify encoded images |
| File Size | 2 | 8 bytes | Little-endian Int64 of original file size |
| Filename | 10 | 256 bytes | UTF-8 encoded, null-padded original filename |
| SHA-1 Hash | 266 | 20 bytes | Integrity checksum of the file data |
The header enables:
- Detection — quickly check if an image contains hidden data
- Metadata — restore the original filename
- Integrity — verify data wasn't corrupted during transfer
flowchart TB
subgraph Encode["📥 ENCODE: Hide File in Image"]
direction TB
E1[/"Select file to hide"/] --> E2["Read file as bytes"]
E2 --> E3["Create 286-byte header<br/>(signature + size + name + SHA-1)"]
E3 --> E4["Concatenate header + file bytes"]
E4 --> E5["Calculate image dimensions<br/>size = √(total_bytes ÷ 3)"]
E5 --> E6["Create canvas with pixels"]
E6 --> E7["Write bytes to RGB channels<br/>(Alpha = 255)"]
E7 --> E8["Export as PNG"]
E8 --> E9[/"Download encoded image"/]
end
subgraph Decode["📤 DECODE: Extract File from Image"]
direction TB
D1[/"Select encoded PNG"/] --> D2["Load image to canvas"]
D2 --> D3["Read pixel RGB values"]
D3 --> D4{"Check for 'ER'<br/>signature?"}
D4 -->|No| D5[/"Error: No hidden data"/]
D4 -->|Yes| D6["Parse header<br/>(size, filename, hash)"]
D6 --> D7["Extract file bytes"]
D7 --> D8["Compute SHA-1 of extracted data"]
D8 --> D9{"Hash matches<br/>header?"}
D9 -->|No| D10[/"Error: Data corrupted"/]
D9 -->|Yes| D11["Create file blob with original name"]
D11 --> D12[/"Download extracted file"/]
end
style Encode fill:#1a1f2e,stroke:#f59e0b,stroke-width:2px
style Decode fill:#1a1f2e,stroke:#f59e0b,stroke-width:2px
The output image size depends on your file size:
pixels_needed = ⌈(286 + file_size) ÷ 3⌉
image_dimension = ⌈√pixels_needed⌉
Example: 1 MB file
→ (286 + 1,048,576) ÷ 3 = 349,621 pixels
→ √349,621 ≈ 591
→ Output: 591 × 591 PNG (~1 MB)
The output PNG is approximately the same size as your input file (plus ~286 bytes overhead).
Visit the deployed version: shadeofcolor.vercel.app
# Clone the repository
git clone https://github.com/AbdelStark/ShadeOfColorWeb.git
cd ShadeOfColorWeb
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildThe app includes a demo that lets you hide Satoshi Nakamoto's Bitcoin whitepaper (PDF) inside a PNG image. Click "Try the Demo" to load the whitepaper, then encode it into an image.
- Next.js 16 with App Router
- TypeScript for type safety
- Tailwind CSS 4 for styling
- Canvas API for pixel manipulation
- Web Crypto API for SHA-1 checksums
- No server communication — everything happens in your browser
- No tracking or analytics
- Your files are never uploaded
- Open source — verify the code yourself
Important: Steganography ≠ Encryption
This tool hides data, it does not encrypt it. Anyone with this tool (or knowledge of the format) can extract hidden files. For sensitive data, encrypt your files first before hiding them.
- PNG only — JPEG and other lossy formats will destroy hidden data
- No compression resistance — re-saving the PNG may corrupt data
- Large files = large images — the output scales with input size
- Social media — most platforms re-compress images, destroying hidden data
A simple cross-platform tool to hide files inside PNG images.
The original ShadeOfColor2 by @archistico is a C#/.NET command-line tool. This web version brings the same functionality to the browser, making it accessible without installation.
@GithubProjects: "ShadeOfColor — A simple cross-platform tool to hide files inside PNG images"
MIT License — see LICENSE for details.
Contributions are welcome! Please feel free to submit a Pull Request.
Made with steganographic intent ✦