Web app untuk mengubah gambar menjadi duotone dengan kombinasi warna tetap: Hero Green (#1b602f) dan Brave Pink (#f784c5). Dibangun dengan Next.js 15, TypeScript, dan Tailwind CSS.
- Drag & Drop Interface: Upload gambar dengan mudah
- Real-time Preview: Lihat hasil duotone secara langsung dengan compare slider
- Kontrol Presisi:
- Gamma (0.5-2.0)
- Contrast (0.5-1.8)
- Balance (-0.5-0.5)
- Swap Colors toggle
- Export Fleksibel: PNG, JPG (dengan quality control), SVG posterized
- Multiple Sizes: Original, 50%, atau custom max-width
- EXIF Support: Otomatis handle orientasi gambar dari metadata
- Web Worker: Proses tidak freeze UI
- Linear RGB: Algoritma akurat untuk blending warna
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- Zustand (state management)
- Web Worker (background processing)
- exifr (EXIF handling)
- react-compare-slider (before/after preview)
- lucide-react (icons)
# Clone repository
git clone <repo-url>
cd 178tone
# Install dependencies
npm install
# Run development server
npm run devBuka http://localhost:3000 di browser.
Aplikasi menggunakan linear RGB untuk akurasi warna maksimal, bukan sRGB langsung:
- Konversi sRGB → Linear:
c <= 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4 - Luminance Calculation:
Y = 0.2126*R + 0.7152*G + 0.0722*B(Rec.709) - Kurva Adjustment:
Y = pow(Y, gamma)Y = clamp(((Y - 0.5) * contrast + 0.5) + balance, 0, 1)
- Linear Blending:
mix = lerp(SHADOWS_linear, HIGHLIGHTS_linear, Y) - Konversi Linear → sRGB:
c <= 0.0031308 ? 12.92*c : 1.055*c^(1/2.4) - 0.055
- Shadows (Gelap):
#1b602f- Hero Green - Highlights (Terang):
#f784c5- Brave Pink - Swap: Toggle untuk menukar mapping warna
- Upload Gambar: Drag & drop atau klik untuk memilih file (JPG/PNG/WebP)
- Adjust Parameters: Gunakan slider untuk fine-tune hasil
- Preview: Lihat before/after dengan compare slider
- Export: Pilih format dan ukuran, lalu download
- Gambar Resolusi Tinggi: Preview otomatis di-scale ke 1600px, export tetap resolusi asli
- Gamma: < 1.0 = lebih terang, > 1.0 = lebih gelap
- Contrast: < 1.0 = lebih soft, > 1.0 = lebih kontras
- Balance: Geser titik tengah untuk mengatur distribusi warna
- SVG Export: Posterized dengan 8 level warna untuk efek vektor
app/
├── components/ # Komponen UI reusable
│ ├── Button.tsx
│ ├── CanvasView.tsx
│ ├── ColorSwatch.tsx
│ ├── Dropzone.tsx
│ ├── Slider.tsx
│ └── Toggle.tsx
├── hooks/ # Custom hooks
│ └── useDuotoneWorker.ts
├── store/ # Zustand store
│ └── duotoneStore.ts
├── utils/ # Utility functions
│ └── imageUtils.ts
├── globals.css # Global styles
├── layout.tsx # Root layout
└── page.tsx # Main page
public/
└── workers/
└── duotone.worker.ts # Web Worker untuk proses duotone
npm run dev # Development server
npm run build # Production build
npm run start # Production server
npm run lint # ESLint- Web Worker: Proses duotone di background thread
- Preview Optimization: Auto-resize ke 1600px untuk preview cepat
- Memory Management: Cleanup object URLs dan worker instances
- Bundle Size: Optimized dengan tree-shaking
- Hero Green:
#1b602f- Warna shadow/gelap - Brave Pink:
#f784c5- Warna highlight/terang
Kombinasi warna ini memberikan kontras yang kuat dan estetika modern untuk efek duotone.
- Maksimal ukuran file: Tergantung memory browser
- Format yang didukung: JPG, PNG, WebP
- SVG export: Posterized sederhana (bukan vektor kompleks)
- Gunakan gambar dengan resolusi wajar untuk preview cepat
- Export dengan resolusi asli untuk kualitas maksimal
- JPG untuk foto, PNG untuk grafik dengan transparansi
- SVG untuk efek posterized minimalis
- Fork repository
- Buat feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push ke branch:
git push origin feature/amazing-feature - Buat Pull Request
MIT License - lihat LICENSE untuk detail.
Dibuat dengan ❤️ menggunakan Next.js dan algoritma linear RGB untuk akurasi warna maksimal.